Twitter Bootstrap有任何字体大小实用类吗？

Question

我找不到任何在Bootstrap中改变字体大小的实用类。虽然有边距和内边距等实用类，也有应用于标题的显示类以及段落的引导类，但是否有一种方法可以通过在HTML中添加实用类来使特定文本变大或变小而无需添加CSS呢？

我发现在快速模拟设计时，使用尽可能多的实用类比起将常见样式抽象为自定义CSS更加方便。

我查阅了Bootstrap的文本实用程序文档和排版字体文档，但没有找到任何信息。是我漏掉了什么，还是Bootstrap中确实没有这个功能？这似乎是Bootstrap会提供的功能 - 通过添加类名如t-1、t-2、t-3、t-4等来改变文本大小。

我不是在谈论响应式排版，而是使用一个实用类改变默认字体大小，而不是编写CSS。

- Lee McAlilly

---

您可以在Bootstrap文档的排版部分找到您所需的内容。 - Marios Nikolaou

@Marios 这个问题已经有一个链接了。另外你要找的格式是[这里](网址)。 - Heretic Monkey

@MariosNikolaou 这就是为什么在Bootstrap文档中链接到了几个不同的地方。我查看了文档，但没有找到任何内容，这就是我提出问题的原因。我想确保我没有漏掉什么。 - Lee McAlilly

等待字体大小实用类，但现在不存在！ - Nisharg Shah

@LeeMcAlilly 如果它不在文档中，那么它就不存在。 - Marios Nikolaou

@MariosNikolaou 我只是想问一下，因为Bootstrap有些非常有用但在文档中有点模糊的地方。例如，您可以覆盖的可用变量在源代码中（https://github.com/twbs/bootstrap-rubygem/blob/master/assets/stylesheets/bootstrap/_variables.scss）。此外，当我搜索这个问题时，我没有找到任何明确的答案，所以我想如果我在StackOverflow上问了它，它可能会帮助其他人节省一些时间。感谢您抽出时间回复！ - Lee McAlilly

Answer 1

目前没有可用的类来更改字体大小，但您可以使用 strong 和 small 标签来控制字体大小，但是无法更改段落字体大小。您需要创建自定义 CSS 样式来实现这一功能。

- jitu thakur

---

感谢您。我只是觉得可能漏掉了什么。 - Lee McAlilly

一般情况下，不要仅仅为了让文字变大而使用标题标签。它们具有重要的语义、可访问性和搜索引擎优化作用，而不是仅仅起到装饰效果。 - Andu Andrici

Answer 2

这里的评论似乎忽略了h1-h6标签和相应的.h1、.h2、.h3、.h4、.h5和.h6类，以及.display1、.display2、.display3和.display4类，用于超大字体大小。还有small标签和.small类！

- pureth

---

头文件类有一些其他的副作用，但在我的情况下它们是有益的。 - kitsu.eb

在Bootstrap 3中没有.displayX。 - Michal - wereda-net

Answer 3

jitu thakur在回答这个问题时是正确的：目前Bootstrap没有调整字体大小的实用程序，但是你可以很容易地在Sass中创建自己的定制实用程序类：

$util-font-sizes: 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200;

@each $util-font-size in $util-font-sizes {
  .font-size-#{$util-font-size} {
    font-size: $util-font-size * 1% !important;
  }
}

这将创建20个字体大小的实用类，从.font-size-10到.font-size-200，它们的样式如下：

.font-size-10 {
    font-size: 10% !important;
}

.font-size-20 {
    font-size: 20% !important;
}

/* ...etc... */

您可以调整 $util-font-sizes 的值、类名称或单位，以适应您的需求。

- Alexander Nied