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

Question

我找不到任何实用程序 classes 来更改段落的 Bootstrap. There are utility classes for margins and padding, etc. There are display classes for headings and there's a lead class 中的字体大小，但是有什么方法可以使用实用程序使特定的文本片段变大或变小class 在 html 而不是必须添加一些 css?

我发现在将通用模式抽象为自定义 css.

之前，使用尽可能多的实用程序 classes 快速模拟设计会更容易

我已经梳理了 Bootstrap Text Utilities docs and the Typography docs，但找不到任何内容。我是不是遗漏了什么，或者这只是 Bootstrap 中不存在的东西？这似乎是 Bootstrap 会提供的东西——通过添加 class 名称来更改文本大小的能力，例如 t-1、t-2、t-3、t-4，等等

我不是在谈论 responsive typography，只是使用实用程序更改默认字体大小 class 而不是写 css.

Answer 1

没有类可以更改字体大小，但是您可以使用strong 和small 标签管理字体大小，但不能更改段落字体大小。您需要创建自定义 CSS 才能做到这一点。

Answer 2

：目前没有 Bootstrap 实用程序可以为您调整 font-size。但是，在 Sass:

中创建自己的自定义实用程序 class 非常简单

$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 实用程序 classes，从 .font-size-10 到 .font-size-200，看起来像这样：

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

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

/* ...etc... */

您可以调整 $util-font-sizes 中的值或 class 名称或单位以满足您的需要。

Answer 3

这里的评论好像忽略了h1-h6标签和对应的.h1, .h2, .h3, .h4, .h5 and .h6 classes，还有.display1, .display2、.display3 和 .display4 classes 用于超大字体。哦，还有 small 标签和 .small class!

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

Does twitter bootstrap have any font-size utility classes?

html

css

typography