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> 元素用于创建字号更小的颜色更浅的文本:

实例

h1 标题 次要文字

h2 标题 次要文字

h3 标题 次要文字

h4 标题 次要文字

h5 标题 次要文字
h6 标题 次要文字
亲自试一试 »


<mark>

Bootstrap 定义 HTML <mark> 为黄色背景及有一定的内边距:

实例

使用标记元素highlight高亮文本。

亲自试一试 »

<abbr>

Bootstrap 定义 HTML <abbr> 元素的样式为显示在文本底部的一条虚线边框:

实例

世界卫生组织成立于 1948 年。

亲自试一试 »

<blockquote>

Bootstrap 将按以下方式设置 HTML <blockquote> 元素的样式:

实例

这是一个演示 Bootstrap 主体用法的实例。

From WWF's website
亲自试一试 »

要在右侧显示,请使用 .blockquote-reverse 类:

实例

这是一些演示文本,这是一些演示文本,这是一些演示文本,这是一些演示文本,这是一些演示文本,这是一些演示文本,这是一些演示文本。

From WWF's website
亲自试一试 »

<dl>

Bootstrap 定义 HTML <dl> 元素的样式如下:

实例

Coffee
- black hot drink
Milk
- white cold drink
亲自试一试 »

<code>

Bootstrap 定义 HTML <code> 元素的样式如下:

实例

以下 HTML 元素:spansectiondiv 定义文档中的一个部分。

亲自试一试 »

<kbd>

Bootstrap 定义 HTML <kbd> 元素的样式如下:

实例

使用 ctrl + p 打开打印对话框。

亲自试一试 »

<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 助手类参考 以了解有关上下文类的更多信息。