Question

在Bootstrap中找不到用于更改字体大小的实用程序类。有用于边距和填充等的实用程序类。用于标题的display classes和用于段落的lead class都有，但是有什么方法可以通过实用程序类使特定的文本变大或变小在html中，而不必添加一些CSS？

我发现在将通用模式抽象到自定义css之前，使用尽可能多的实用程序类来快速模拟设计会更容易。

我已经遍历了Bootstrap Text Utilities docs和Typography docs，但是找不到任何东西。我是否缺少某些内容，或者Bootstrap中不存在此内容？这似乎是Bootstrap提供的功能-通过添加诸如t-1，t-2，t-3，t-4等类名来更改文本大小的功能。

我不是在谈论responsive typography，只是使用实用程序类来更改默认字体大小，而不是编写CSS。

Answer 1

没有用于更改字体大小的类，但是您可以使用H标签和小标签来管理字体大小，但是不能更改段落字体大小。您需要创建自定义CSS来实现。

Answer 2

jitu thakur is correct in their answer to this question：目前尚无能为您调整字体大小的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个字体大小的util类，从.font-size-10到.font-size-200，如下所示：

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

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

/* ...etc... */

您可以调整$util-font-sizes中的值或类名或单位以适合您的需求。

Answer 3

此处的注释似乎忽略了h1-h6标签以及相应的.h1，.h2，.h3，.h4，.h5和.h6类，以及.display1，.display2，.display3和。 display4类可用于超大字体。哦，还有小标签和.small类！

twitter bootstrap是否有任何字体大小的实用程序类？

3 个答案: