Bootstrap 文字排版
Bootstrap 默认设置
Bootstrap 的全局默认字体大小为 14px,行高为 1.428。
这适用于 <body> 元素和所有段落(<p>)。
此外,所有 <p> 元素的底边距都等于其计算行高的一半(默认为10px)。
Bootstrap 与 浏览器默认设置
在本章中,我们将介绍一些HTML元素,Bootstrap 对这些元素的样式与浏览器默认值略有不同。
<h1> - <h6>
默认情况下,Bootstrap 将按以下方式设置 HTML 标题 (<h1> 到 <h6>) 的样式:
实例
h1 Bootstrap 标题(36 像素)
h2 Bootstrap 标题(30 像素)
h3 Bootstrap 标题(24 像素)
h4 Bootstrap 标题(18 像素)
h5 Bootstrap 标题(14 像素)
h6 Bootstrap 标题(12 像素)
<small>
在 Bootstrap 中 HTML <small> 元素用于创建字号更小的颜色更浅的文本:
<mark>
Bootstrap 定义 HTML <mark> 为黄色背景及有一定的内边距:
<abbr>
Bootstrap 定义 HTML <abbr> 元素的样式为显示在文本底部的一条虚线边框:
<blockquote>
Bootstrap 将按以下方式设置 HTML <blockquote> 元素的样式:
要在右侧显示,请使用 .blockquote-reverse 类:
<dl>
Bootstrap 定义 HTML <dl> 元素的样式如下:
<code>
Bootstrap 定义 HTML <code> 元素的样式如下:
<kbd>
Bootstrap 定义 HTML <kbd> 元素的样式如下:
<pre>
Bootstrap 定义 HTML <pre> 元素的样式如下:
实例
Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks.
文本颜色和背景色
Bootstrap 提供了一些有代表意义的颜色类,文本颜色的类是:.text-muted,
.text-primary, .text-success, .text-info,
.text-warning, 和 .text-danger:
背景颜色的类是:.bg-primary,
.bg-success, .bg-info, .bg-warning, 和 .bg-danger:
更多排版类
下表提供了 Bootstrap 更多排版类的实例:
| 类 | 描述 | 实例 |
|---|---|---|
.lead |
使段落突出显示 | 测试一下 |
.small |
设定小文本 (设置为父文本的 85% 大小) | 测试一下 |
.text-left |
设定文本左对齐 | 测试一下 |
.text-center |
设定文本居中对齐 | 测试一下 |
.text-right |
设定文本右对齐 | 测试一下 |
.text-justify |
设定文本对齐,段落中超出屏幕部分文字自动换行 | 测试一下 |
.text-nowrap |
段落中超出屏幕部分不换行 | 测试一下 |
.text-lowercase |
设定文本小写 | 测试一下 |
.text-uppercase |
设定文本大写 | 测试一下 |
.text-capitalize |
设定单词首字母大写 | 测试一下 |
.initialism |
显示在 <abbr> 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母 |
测试一下 |
.list-unstyled |
移除默认的列表样式,列表项中左对齐 (<ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式) |
测试一下 |
.list-inline |
将所有列表项放置同一行 | 测试一下 |
.dl-horizontal |
将<dl>元素中的术语(<dt>)和描述(<dd>)并排排列。开始时与默认值类似,但当浏览器窗口扩展时,它将并排排列 |
测试一下 |
.pre-scrollable |
使 <pre> 元素可滚动 |
测试一下 |
完整 Bootstrap 文字排版参考
有关文字排版的完整参考,请访问我们的 Bootstrap 文字排版参考。
还可以查看我们的 Bootstrap 助手类参考 以了解有关上下文类的更多信息。

