排版

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>

自定义标题

使用包含的实用程序类从bootstrap3重新创建小的辅助标题文本。

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 映射和两个变量（$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中随意使用 和 。  用来突出单词或短语而不传达额外的重要性，而主要用于语音、技术术语等。

文字工具

使用我们的文本工具和颜色工具更改更改文本对齐、转换、样式、权重、行高、装饰和颜色。

缩略语

HTML的<abbr>元素的样式化实现，用于显示悬停时的扩展版本。缩略语有一个默认下划线，并获得一个帮助光标，以便为悬停和辅助技术的用户提供额外的上下文。

在缩写中加上 .initialism，表示字体稍小。

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>中，并使用 <figcaption> 或块级元素（例如，）和 .blockquote-footer类。请务必将源代码的名称也包装在<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>

对准

根据需要使用文本实用程序更改blockquote的对齐方式。

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 a和 left margin（仅限直接子项）。 这只适用于直接子列表项，这意味着您还需要为任何嵌套列表添加类。

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>

自适应字体大小

在Bootstrap5中，我们默认启用了响应字体大小，允许文本在设备和视口大小之间更自然地缩放。查看RFS页面以了解其工作原理。