标题 

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

<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 重新创建小的辅助标题文本。

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

显示标题

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

<h1 class="display-1">显示标题 1</h1>
<h1 class="display-2">显示标题 2</h1>
<h1 class="display-3">显示标题 3</h1>
<h1 class="display-4">显示标题 4</h1>
<h1 class="display-5">显示标题 5</h1>
<h1 class="display-6">显示标题 6</h1>

Lead中心内容 

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

<p class="lead">
  这是一个前导段落，从普通段落中脱颖而出。
</p>

内联文字元素

常见内联HTML5元素的样式。

<p>你可以使用 mark tag 来 <mark>突显</mark> 文本.</p>
<p><del>这一行文本将被视为已删除的文本.</del></p>
<p><s>这一行文字意味着不再准确.</s></p>
<p><ins>这一行文本意味着作为文档的附加部分处理.</ins></p>
<p><u>这一行文本将呈现为下划线.</u></p>
<p><small>这行文字应该被当作小字.</small></p>
<p><strong>这一行显示为粗体文本.</strong></p>
<p><em>这一行呈现为斜体字文本.</em></p>

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

<mark> 表示标记或突出显示的文本，以供参考或标记。

<small> 代表旁注和小字体，例如版权和法律文字。

<s> 表示不再相关或不再准确的元素。

<u> 表示一定范围的嵌入式文本，应以指示其具有非文本注释的方式呈现。

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

.mark 将应用与 <mark> 相同的样式。

.small 将应用与 <small>相同的样式。

.text-decoration-underline 将采用与 <u> 相同的样式。

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

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

Abbr缩略语

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

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

块引用

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

<blockquote class="blockquote">
<p>让他们坐在一起，祝福他们，给他们一个机会。</p>
</blockquote>

命名来源

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

<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>

对齐 

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

<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>

<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 和左边距（仅适用于子级）。 这仅适用于直接子级列表项，这意味着你还需要为任何嵌套列表添加类。

<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。

<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类以用省略号截断文本。

<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