使用Bootstrap类设置font-weight

Question

是否有任何Twitter Bootstrap类font-weight: bold和其他值font-weight？

如果在Bootstrap中已存在,我不会创建一个新的.

Answer 1

我在Bootstrap网站上发现了这个,但它确实不是一个Bootstrap类,它只是HTML.

<strong>rendered as bold text</strong>

此外,"强"并不一定意味着大胆.来自https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong:"通常,此元素默认使用粗体字体权重进行渲染.但是,它不应仅用于应用粗体样式;为此目的使用CSS font-weight属性." (2认同)

Answer 2

在Bootstrap 4中:

class="font-weight-bold"

要么:

<strong>text</strong>

Answer 3

在Site.css(或其他地方)创建一个名为.font-bold的新类,并将其设置为您的元素

.font-bold {
  font-weight: bold;
}

这是一个完美的解决方案,就像许多其他Bootstrap类一样,如.text-uppercase或.list-unstyled.内联样式可能会成为管理的噩梦,例如,如果您稍后决定所有粗体元素应该是不同的颜色或具有文本效果.上课使这更容易,这是最好的答案. (22认同)
我建议不要这样做,标记应该是语义的,就像这样:.some-functional-description-of-the-element {font-weight:bold}.不要只使用一个名为css的类,只需使用style ="font-weight:bold;",它就更加诚实,快速肮脏. (8认同)

Answer 4

EDIT 2(最终):根据bootstrap 4文档,class="font-weight-bold"您正在寻找.

编辑:您可以使用class="font-weight-bold"如此处所示(Bootstrap 4 alpha).

为了清晰起见,我保留了下面的原始答案.

我发布这个答案是因为这个帖子似乎有很多访问者,但它没有适当的解决方案来解决这个问题.但是现在很快就会有一种Bootstrap 4:

由于该GitHub的拉动请求节目,你只需要使用text-weight-normal,text-weight-bold和text-weight-italic类.

这可能会改变,直到官方稳定发布.在此撰写日期,此拉取请求尚未在alpha分支中合并.

一旦Bootstrap v4发布,我将更新这篇文章.

Answer 5

如果使用Boostrap 5，最准确的方法如下例所示：

<p class="fw-bold">Bold text.</p>

Answer 6

在Bootstrap 4上,您可以使用:

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>