Bootstrap 4 文字排版
Bootstrap 4 默认设置
Bootstrap 4 默认的
font-size 为 16px, line-height 为 1.5。
默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif.
此外，所有的 <p> 元素
margin-top: 0 ，margin-bottom: 1rem (默认为 16px)。
<h1> - <h6>
Bootstrap 4 中定义了所有的 HTML 标题 (<h1> 到
<h6>) 的样式的，字体设置为粗体。请看下面的实例:
实例
h1 Bootstrap 标题 (2.5rem = 40px)
h2 Bootstrap 标题 (2rem = 32px)
h3 Bootstrap 标题 (1.75rem = 28px)
h4 Bootstrap 标题 (1.5rem = 24px)
h5 Bootstrap 标题 (1.25rem = 20px)
h6 Bootstrap 标题 (1rem = 16px)
Display 标题类
Bootstrap 还提供了四个 Display 类来控制标题的样式:
.display-1, .display-2, .display-3, .display-4
，Display 标题类用于比普通标题（更大的字体大小和更轻的字体重量）更突出
<small>
在 Bootstrap 4 中 HTML <small> 元素用于创建字号更小的颜色更浅的文本:
<mark>
Bootstrap 4 定义 <mark> 为黄色背景及有一定的内边距:
<abbr>
Bootstrap 4 定义 HTML <abbr> 元素的样式为显示在文本底部的一条虚线边框:
<blockquote>
对于引用的内容可以在 .blockquote 上添加 <blockquote> 类 :
<dl>
Bootstrap 4 定义 HTML <dl> 元素的样式如下:
<code>
Bootstrap 4 定义 HTML <code> 元素的样式如下:
<kbd>
Bootstrap 4 定义 HTML <kbd> 元素的样式如下:
<pre>
Bootstrap 4 定义 HTML <pre> 元素的样式如下:
实例
Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks.
更多排版类
下表提供了 Bootstrap 4 更多排版类的实例:
| 类名 | 描述 | 实例 |
|---|---|---|
.font-weight-bold |
加粗文本 | 测试一下 |
.font-weight-bolder |
黑体字 | 测试一下 |
.font-italic |
斜体文本 | 测试一下 |
.font-weight-light |
更细的文本 | 测试一下 |
.font-weight-lighter |
较轻的文字 | 测试一下 |
.font-weight-normal |
普通文本 | 测试一下 |
.lead |
让段落更突出 | 测试一下 |
.small |
指定更小文本 (为父元素的 80% ) | 测试一下 |
.text-left |
文本左对齐 | 测试一下 |
.text-*-left |
在小屏幕、中屏幕、大屏幕或大屏幕上指示文本左对齐 | 测试一下 |
.text-break |
防止长文本破坏布局 | 测试一下 |
.text-center |
文本居中对齐 | 测试一下 |
.text-*-center |
在小屏幕、中屏幕、大屏幕或大屏幕上指示文本居中对齐 | 测试一下 |
.text-decoration-none |
从链接中删除下划线 | 测试一下 |
.text-right |
文本右对齐 | 测试一下 |
.text-*-right |
在小屏幕、中屏幕、大屏幕或大屏幕上文本右对齐 | 测试一下 |
.text-justify |
设定文本对齐,段落中超出屏幕部分文字自动换行 | 测试一下 |
.text-monospace |
等距文本 | 测试一下 |
.text-nowrap |
段落中超出屏幕部分不换行 | 测试一下 |
.text-lowercase |
设定文本小写 | 测试一下 |
.text-reset |
重置文本或链接的颜色（从其父级继承颜色） | 测试一下 |
.text-uppercase |
设定文本大写 | 测试一下 |
.text-capitalize |
设定单词首字母大写 | 测试一下 |
.initialism |
显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母 |
测试一下 |
.list-unstyled |
移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项
(如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式) |
测试一下 |
.list-inline |
将所有列表项放置同一行 | 测试一下 |
.pre-scrollable |
使 <pre> 元素可滚动 |
测试一下 |
完整 Bootstrap 4 CSS 参考
有关 Bootstrap 4 中所有可用 CSS 类的完整参考，请访问我们的 Bootstrap 4 所有类参考。
