Bootstrap 文字/排版

Bootstrap的默认设置

Bootstrap 的全局默认字体大小为 14px，行高为 1.428。

这适用于<body>元素和所有段落 (<p>）。

此外，所有<p>元素的下边距等于其计算的行高的一半（默认为 10px）。

Bootstrap 与浏览器默认值

在本章中，我们将研究一些 HTML 元素，Bootstrap 的样式与浏览器默认样式略有不同。

<h1> - <h6>

默认情况下，Bootstrap 将为 HTML 标题设置样式（<h1>到<h6>）通过以下方式：

示例

h1 Bootstrap heading (36px)

h2 Bootstrap heading (30px)

h3 Bootstrap heading (24px)

h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px)

h6 Bootstrap heading (12px)

亲自试一试 »

<小>

在 Bootstrap 中的 HTML<small>元素用于在任何标题中创建更轻的辅助文本：

示例

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text

h6 heading secondary text

亲自试一试 »

<标记>

Bootstrap 将设置 HTML 样式<mark>元素的方式如下：

示例

Use the mark element to highlight text.

亲自试一试 »

<缩写>

Bootstrap 将设置 HTML 样式<abbr>元素的方式如下：

示例

The WHO was founded in 1948.

亲自试一试 »

<块引用>

Bootstrap 将设置 HTML 样式<blockquote>元素的方式如下：

示例

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

From WWF's website

亲自试一试 »

要显示右侧的报价，请使用.blockquote-reverse类：

示例

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

From WWF's website

亲自试一试 »

<dl>

Bootstrap 将设置 HTML 样式<dl>元素的方式如下：

示例

Coffee: - black hot drink
Milk: - white cold drink

亲自试一试 »

<代码>

Bootstrap 将设置 HTML 样式<code>元素的方式如下：

示例

The following HTML elements: span, section, and div defines a section in a document.

亲自试一试 »

<KBD>

Bootstrap 将设置 HTML 样式<kbd>元素的方式如下：

示例

Use ctrl + p to open the Print dialog box.

亲自试一试 »

<前>

Bootstrap 将设置 HTML 样式<pre>元素的方式如下：

示例

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.

亲自试一试 »

上下文颜色和背景

Bootstrap 还有一些上下文类可用于提供"meaning through colors"。

文本颜色的类别有：.text-muted,.text-primary,.text-success,.text-info,.text-warning，和.text-danger:

示例

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

亲自试一试 »

背景颜色的类别有：.bg-primary, .bg-success,.bg-info,.bg-warning，和.bg-danger:

示例

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

亲自试一试 »

更多版式课程

可以添加下面的 Bootstrap 类来进一步设置 HTML 元素的样式：

Class	Description	Example
`.lead`	Makes a paragraph stand out	尝试一下
`.small`	Indicates smaller text (set to 85% of the size of the parent)	尝试一下
`.text-left`	Indicates left-aligned text	尝试一下
`.text-center`	Indicates center-aligned text	尝试一下
`.text-right`	Indicates right-aligned text	尝试一下
`.text-justify`	Indicates justified text	尝试一下
`.text-nowrap`	Indicates no wrap text	尝试一下
`.text-lowercase`	Indicates lowercased text	尝试一下
`.text-uppercase`	Indicates uppercased text	尝试一下
`.text-capitalize`	Indicates capitalized text	尝试一下
`.initialism`	Displays the text inside an `<abbr>` element in a slightly smaller font size	尝试一下
`.list-unstyled`	Removes the default list-style and left margin on list items (works on both `<ul>` and `<ol>`). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well)	尝试一下
`.list-inline`	Places all list items on a single line	尝试一下
`.dl-horizontal`	Lines up the terms (`<dt>`) and descriptions (`<dd>`) in `<dl>` elements side-by-side. Starts off like default `<dl>`s, but when the browser window expands, it will line up side-by-side	尝试一下
`.pre-scrollable`	Makes a `<pre>` element scrollable	尝试一下

完整的 Bootstrap 版式参考

有关所有版式元素/类的完整参考，请访问我们的完整版式Bootstrap 版式参考。

也看看我们的Bootstrap 帮助程序类参考有关上下文类的更多信息。