使用Bootstrap类设置字体粗细

128

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

如果Bootstrap中已经存在一个新的，我不会创建一个。

— 爱奥尼亚比乌
source

5

没有课程，您需要自定义。

— Manoz

2

是的，Font-weight：bold没有单独的类

— Dinesh Kanivu

52

编辑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发布后，我将更新此帖子。

— 伊尔希杜尔
source

哦，真可爱！您能否改善答案以提及这将在Bootstrap 4中发生，并为当前版本添加解决方案（使用或仅创建自己的类）？那我要标记你的答案。

— 尼卡比曹

另外（在Bootstrap 4中），您可以将建议的类（“ font-weight-bold”）添加到<input/>框中，其中的文本将变为粗体。我们将其与“标题”字段一起使用，以便在必要时强调它们。已在Windows ver64和Chrome ver76和IE11中进行测试。

— timmi4sa

太酷了有用！！！我确实尝试通过手动将样式添加到css文件中来使内容变为粗体，但这只是没有发生。然后我找到了您的答案：D

— 特拉维斯·勒

93

我在Bootstrap网站上找到了它，但它实际上不是Bootstrap类，而只是HTML。

<strong>rendered as bold text</strong>

— 布雷特·梅里菲尔德
source

3

此外strong，不一定意味着大胆。来自developer.mozilla.org/zh-CN/docs/Web/HTML/Element/strong：“通常，默认情况下，此元素使用粗体字体粗细呈现。但是，不应仅将其用于粗体样式；请使用CSS font-weight属性用于此目的。”

强是强，大胆是大胆:( @GurgenHakobyan的答案应该更可取

— 。– MattAllegro

这是从没有CSS的旧时代开始的。由于关注点设计模式分离，因此发明了CSS以避免在HTML中混合内容和表示形式。尽管Web浏览器仍支持此功能以实现向后兼容性，但强烈建议不要使用和，和等。en.wikipedia.org

— wiki/

49

在Bootstrap 4中：

class="font-weight-bold"

要么：

<strong>text</strong>

— 杰里米·林奇（Jeremy Lynch）
source

39

在您的Site.css（或其他位置）中创建一个名为.font-bold的新类，并将其设置为您的元素

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

— 古尔根·哈科比（Gurgen Hakobyan）
source

8

我建议不要这样做，标记应该是语义的，例如：.some-functional-description-of-the-element {font-weight：bold}。与其仅仅使用一个有点像CSS的类，还不如使用style =“ font-weight：bold;”，更诚实地说是“肮脏”。

— cmc

23

这是一个完美的解决方案，并且与许多其他Bootstrap类（如.text-uppercase或.list-unstyled）一样具有语义。内联样式可能会成为管理上的噩梦，例如，如果您稍后决定所有粗体元素应使用不同的颜色或具有文本效果。上课会让这变得容易，这是最好的答案。

— Andy Mehalick

我在这里同意安迪的观点。这可以正确回答问题。在使用通用类可提供最干净的html输出的情况下，存在有效的用例，其中使用了生成器，工具箱和模板。

— dperish '16

这是bootstrap <4的正确解决方案。其目的strong 不是使文本变为粗体，浏览器还是这样做，因为约定是强调突出的粗体文本。HTML标记必须具有语义，而不仅仅是出于设计目的而存在。实际上，它在W3建议中没有被引用，甚至b 不应该被认为是大胆的。

— 安德烈·菲格雷多

1

这在bootstrap 4中已过时

— toddmo '18

8

在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>

— 丹兰兹杰夫
source

2

如果您想要更多的自定义值和/或正在遵循需要重复的方案，则应使用bootstarp的变量来控制字体粗细。变量在整个项目中使用，是集中和共享常用值（例如颜色，间距或字体堆栈）的一种方式。

您可以在http://getbootstrap.com/css中找到所有文档。

— 毛伊曼
source