在GitHub上查看

排版

Bootstrap排版的文档和示例，包括全局设置，标题，正文，列表等。

在本页

全局设置

Bootstrap设置基本的全局显示、排版和链接样式。当需要更多的控制时，请检查文本工具。

使用一个本地字体堆栈，为每个操作系统和设备选择最好的 font-family。
为了更具包容性和可访问性，我们使用浏览器的默认根 font-size （通常为16px），以便访问者可以根据需要自定义浏览器默认值。
使用 $font-family-base, $font-size-base, 和 $line-height-base 属性作为应用于<body>的排版基础。
通过 $link-color 设置全局链接颜色。
使用 $body-bg 设置 <body> 上的 background-color （默认为#fff）。

这些样式可以在 _reboot.scss中找到，而全局变量在 _variables.scss中定义。确保在 rem 中设置 $font-size-base 。

标题

所有的HTML标题，<h1> 到 <h6>都可用。

标题	示例
`<h1></h1>`	h1. Bootstrap heading
`<h2></h2>`	h2. Bootstrap heading
`<h3></h3>`	h3. Bootstrap heading
`<h4></h4>`	h4. Bootstrap heading
`<h5></h5>`	h5. Bootstrap heading
`<h6></h6>`	h6. Bootstrap heading

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

当你想匹配标题的字体样式但不想使用相关联的HTML元素时，也可以使用 .h1 到 .h6。

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

自定义标题

使用附带的实用程序类从Bootstrap 重新创建小的辅助标题文本。

Fancy display heading With faded secondary text

<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>

显示标题

传统的标题元素旨在最有效地处理您页面内容的内容。当您需要一个标题来突出显示时，请考虑使用 显示标题 一种较大的，略显自省的标题样式。

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

显示标题是通过 $display-font-sizes Sass map和两个变量 $display-font-weight 和$display-line-height配置的。

$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);

$display-font-weight: 300;
$display-line-height: $headings-line-height;

Lead中心内容

通过添加 .lead使段落突出。

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

内联文字元素

常见内联HTML5元素的样式。

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

~~This line of text is meant to be treated as no longer accurate.~~

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

请注意，这些标记应用于语义目的：

 表示标记或突出显示的文本，以供参考或标记。
 代表旁注和小字体，例如版权和法律文字。
<s> 表示不再相关或不再准确的元素。
 表示一定范围的嵌入式文本，应以指示其具有非文本注释的方式呈现。

如果要设置文本样式，则应改用以下类：

.mark 将应用与  相同的样式。
.small 将应用与 相同的样式。
.text-decoration-underline 将采用与  相同的样式。
.text-decoration-line-through 将应用与 <s> 相同的样式。

尽管上面没有显示，但可以在HTML5中随意使用  和 。  旨在突出显示单词或短语而不传达其他重要性，而  主要用于语音，技术术语等。

文字工具

使用我们的文本工具和颜色工具更改文本的对齐方式，变换，样式，粗细，行高，装饰和颜色。

Abbr缩略语

HTML的 <abbr> 元素的缩写和首字母缩略词的样式化实现，以显示悬停时的扩展版本。缩写带有默认下划线，并获得帮助光标，以提供有关悬停和辅助技术用户的其他上下文。

attr

HTML

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

块引用

用于引用文档中其他来源的内容块。将 <blockquote class="blockquote"> 环绕在任何 HTML 上作为引号。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

命名来源

HTML规范要求将blockquote属性置于 <blockquote>之外。提供属性时，请将 <blockquote>包裹在 <figure> 中，并在 .blockquote-footer 类中使用 <figcaption> 或块级元素（例如 ）。还要确保将源代码的名称也包装在 <cite> 中。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<figure>
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>

对齐

根据需要使用文本工具来更改块引用的对齐方式。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<figure class="text-center">
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<figure class="text-end">
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>

列表

无样式

删除列表项的默认 list-style 和左边距（仅适用于子级）。 这仅适用于直接子级列表项，这意味着你还需要为任何嵌套列表添加类。

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
  <li>Phasellus iaculis neque</li>
  <li>Purus sodales ultricies</li>
  <li>Vestibulum laoreet porttitor sem</li>
  <li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>

内联并排

移除列表的项目符号，并结合使用两个类（ .list-inline 和 .list-inline-item）来增加一些 margin。

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>

列表对齐

使用网格系统的预定义类（或语义混合），水平对齐术语和描述。对于较长的语句，你可以选择添加 .text-truncate类以用省略号截断文本。

Description lists

A description list is perfect for defining terms.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Truncated term is truncated

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Nesting

Nested definition list: Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>

<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>

<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>

<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
  <dt class="col-sm-4">Nested definition list</dt>
  <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>

自适应字体大小

在Bootstrap 5中，默认情况下，我们启用了响应字体大小，从而使文本可以在设备和视口大小之间更自然地缩放。查看 RFS页面以了解其工作原理。