Bootstrap排版
在本教程中，您将了解如何使用 Bootstrap 对文本内容（如标题、段落、块引用等）进行样式设置和格式设置。
使用标题
您可以定义所有 HTML 标题、<h1> 到 <h6> — 与您在简单 HTML 文档中定义的方式相同。 如果您想在元素的文本上应用与标题相同的样式，您还可以在其他元素上使用标题类 .h1 到 .h6。
<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>— 上面示例的输出将如下所示：
自定义标题
此外，您可以将 <small> 标记与 .text-muted 类一起使用，以更小、更轻的变体显示任何标题的辅助文本。 这是一个例子：
<h2>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h2>— 上面示例的输出将如下所示：
显示标题
Bootstrap 4 引入了显示标题，当您需要突出标题时可以使用这些标题。 显示标题以较大的 font-size 显示但较轻的 font-weight。
有四种不同的显示标题可用。 这是一个例子：
<h1 class="display-1">Display Heading 1</h1>
<h1 class="display-2">Display Heading 2</h1>
<h1 class="display-3">Display Heading 3</h1>
<h1 class="display-4">Display Heading 4</h1>— 上面示例的输出将如下所示：
使用段落
Bootstrap 的全局默认 font-size 为 1rem（通常为 16px），line-height 为 1.5（通常为 24px），适用于 <body> 元素以及所有段落，即 <p> 元素。 此外，1rem 的 margin-bottom 也适用于所有段落。
您还可以通过在其上添加类 .lead 来突出段落。
<p>这就是 Bootstrap 中普通段落的样子。</p>
<p class="lead">这就是段落在 Bootstrap 中脱颖而出的方式。</p>— 上述示例中的 HTML 代码将产生以下结果：
提示： 在 CSS 中 rem 代表"root em"。 1rem 等于根元素（即 <html> 元素）的字体大小，在大多数浏览器中默认为 16px。
文本对齐
您可以使用文本对齐类轻松地将文本左对齐、右对齐和居中对齐。
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>您还可以使用响应式文本对齐类根据屏幕大小对齐文本。 这些类使用与网格系统相同的视口宽度断点。
<p class="text-sm-left">Text aligned to left on small or wider viewports.</p>
<p class="text-md-left">Text aligned to left on medium or wider viewports.</p>
<p class="text-lg-left">Text aligned to left on large or wider viewports.</p>
<p class="text-xl-left">Text aligned to left on extra-large or wider viewports.</p>文本格式
您可以自由使用像 <strong>, <i>, <small> 这样的文本格式标签来使您的文本变为粗体、斜体、小等，就像在简单的 HTML 页面中一样。
<p><b>This is bold text</b></p>
<p><code>This is computer code</code></p>
<p><em>This is emphasized text</em></p>
<p><i>This is italic text</i></p>
<p><mark>This is highlighted text</mark></p>
<p><small>This is small text</small></p>
<p><strong>This is strongly emphasized text</strong></p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup></p>
<p><ins>This text is inserted to the document</ins></p>
<p><del>This text is deleted from the document</del></p>— 上面示例的输出将如下所示：
文本转换
您还可以将文本转换为小写、大写或大写。
<p class="text-lowercase">The quick brown fox jumps over the lazy dog.</p>
<p class="text-uppercase">The quick brown fox jumps over the lazy dog.</p>
<p class="text-capitalize">The quick brown fox jumps over the lazy dog.</p>— 上面示例的输出将如下所示：
文本着色
颜色是网站设计中传达重要信息的有力方法。
Bootstrap 有一些可用于此目的的强调实用程序类，例如以绿色显示成功消息、以红色显示警告或错误消息等。
<p class="text-primary">主要：请在继续之前仔细阅读说明。</p>
<p class="text-secondary">次要：此功能已从最新版本中删除。</p>
<p class="text-success">成功：您的消息已成功发送。</p>
<p class="text-info">信息：您必须同意条款和条件才能完成注册过程。</p>
<p class="text-warning">警告：您的网络连接有问题。</p>
<p class="text-danger">危险：提交数据时发生错误。</p>
<p class="text-muted">静音：此段文字显示为灰色。</p>— 上面示例的输出将如下所示：
请查看Bootstrap 帮助类章节，了解其他文本着色和背景着色类，以及其他各种实用程序类。
样式块引用
您还可以漂亮地查看您的块引用 — 只需使用标准 <blockquote> 元素定义块引用，其余的将由Bootstrap程序的样式表完成。
此外，为了识别来源，您可以添加一个具有类 .blockquote-footer 的 <footer> 元素，并将源作品的名称包装在 <cite> 中，如下所示：
<blockquote class="blockquote">
<p class="mb-0">日照香炉生紫烟，遥看瀑布挂前川。飞流直下三千尺，疑是银河落九天。</p>
<footer class="blockquote-footer">by <cite>[作者] 李白 [朝代] 唐</cite></footer>
</blockquote>— 上面示例的输出将如下所示：
您还可以通过简单地在 <blockquote> 元素上应用文本对齐类 .text-right 或 .text-center 来将块引用对齐到右或居中。
截断长文本
对于较长的文本，您可以使用类 .text-truncate 用省略号截断文本。 元素的 display 属性值必须为 inline-block 或 block。
当您想在一行中显示一段文本但没有足够的可用空间时，它特别有用。 让我们看看它实际上是如何工作的：
<!-- Block level element -->
<div class="row">
<div class="col-2 text-truncate">
The quick brown fox jumps over the lazy dog.
</div>
</div>
<!-- Inline level element -->
<span class="d-inline-block text-truncate" style="max-width: 100px;">
The quick brown fox jumps over the lazy dog.
</span>包装长字
您可以使用类 .text-break 来防止长字破坏您的布局。
让我们试试下面的例子来了解它的基本工作原理：
<div class="row">
<div class="col-2">
<p class="text-break">veryveryveryveryveryveryverylongword</p>
</div>
</div>