Bootstrap 排版

Bootstrap 5 文本与排版

Bootstrap 5 为排版提供了坚实的基础，确保文本在各种设备上保持一致且易于阅读。它设置了全局默认值，并提供工具类以供进一步定制。

Bootstrap 的默认设置

Bootstrap 5 将全局默认的 font-size 设置为 1rem（在大多数浏览器中通常为 16px），line-height（行高）设置为 1.5。

这些默认设置应用于 <body> 元素，并由段落和其他文本元素继承。

所有 <p> 元素都有一个默认的 margin-bottom: 1rem（底部外边距）。

Bootstrap 5 还默认实现了响应式字体大小（Responsive Font Sizes, RFS），允许文本在不同设备尺寸上更自然地缩放。请访问 https://getbootstrap.com/docs/5.3/content/typography/#responsive-font-sizes 了解更多信息。

标题 <h1> - <h6>

Bootstrap 为 HTML 标题（<h1> 到 <h6>）设置了特定的字体大小、外边距和字重。借助 RFS，这些大小会根据视口进行调整。

<!-- 标题显示示例（实际大小取决于 RFS 和视口） -->
<h1>h1. Bootstrap heading (Approx. 2.5rem)</h1>
<h2>h2. Bootstrap heading (Approx. 2rem)</h2>
<h3>h3. Bootstrap heading (Approx. 1.75rem)</h3>
<h4>h4. Bootstrap heading (Approx. 1.5rem)</h4>
<h5>h5. Bootstrap heading (Approx. 1.25rem)</h5>
<h6>h6. Bootstrap heading (Approx. 1rem)</h6>

显示标题（Display Headings）：对于更大、更具表现力的标题样式，请使用 .display-1 到 .display-6 等显示标题类。

<h1 class="display-1">Display 1</h1>
<h1 class="display-4">Display 4</h1>

内联文本元素

Bootstrap 为常用的内联 HTML 元素提供了样式：

<small>：用于弱化显示的文本，常用于标题中的次要文本或小字说明。它将字体大小设置为父元素字体的 87.5%。

<h1>Main Heading <small class="text-muted">Secondary text</small></h1>
<p>This is normal text, and this is <small>small text</small>.</p>

<mark> 或 .mark：用背景色（通常为黄色）突出显示文本。

<p>Use the <mark>mark element</mark> or <span class="mark">.mark class</span> to highlight text.</p>

<abbr>：用于缩写和首字母缩写。Bootstrap 为它添加了点状下边框，并在悬停时显示帮助光标，从而显示 title 属性中的完整文本。

<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is a markup language.</p>
<!-- `.initialism` 类使 <abbr> 文本略小。 -->

引用块（Blockquotes）

要引用来自其他来源的内容块，请使用 <blockquote class="blockquote"> 进行包裹。要显示出处，请使用 <figcaption class="blockquote-footer">。

<figure class="mb-4">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

<!-- 注意：旧的 `.blockquote-reverse` 类已移除。可以使用 `.text-end` 等文本对齐工具类应用于 `<figure>` 或 `<blockquote>` 实现右对齐引用。 -->

描述列表 <dl>

Bootstrap 为 <dl>、<dt> 和 <dd> 元素设置了样式。对于术语和描述并排显示的水平布局，请使用 Bootstrap 的网格系统或 flex 工具类。

<!-- 默认堆叠布局 -->
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

<!-- 使用网格的水平布局 -->
<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">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3 text-truncate">Long truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is limited. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
</dl>
<!-- 提示：旧版本 Bootstrap 中的 `.dl-horizontal` 类已移除。网格系统提供了更大的灵活性。 -->

代码块

<code>：使用 <code> 包裹内联的代码片段。HTML 角括号将被转义。

<p>例如，<code>&lt;section&gt;</code> 应作为内联代码包裹。</p>

<kbd>：表示通常通过键盘输入的用户输入。

<p>要切换目录，请键入 <kbd>cd</kbd>，后跟目录名称。<br>
要编辑设置，请按下 <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd></p>

<pre>：用于多行代码。转义角括号以正确渲染。可以考虑使用 .pre-scrollable 类创建可滚动块。

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;</code></pre>

<pre class="pre-scrollable"><code>// 这是一行很长的代码，如果超出宽度，将使 pre 标签可滚动。
// 还有很多行...
// ...
// ...
// ...（重复多行以演示可滚动性）
</code></pre>

语境颜色和背景色

Bootstrap 提供了语境文本颜色和背景工具类，通过颜色传达含义。这些类与按钮和警告框的颜色方案一致。

文本颜色类：.text-primary、.text-secondary、.text-success、.text-info、.text-warning、.text-danger、.text-light、.text-dark、.text-body（默认）、.text-muted、.text-black-50、.text-white-50。

<p class="text-primary">.text-primary: 主色文本，用于强调。</p>
<p class="text-success">.text-success: 表示成功操作。</p>
<p class="text-danger">.text-danger: 表示危险操作。</p>
<p class="text-muted">.text-muted: 柔和文本，用于减弱强调。</p>

背景色类：.bg-primary、.bg-secondary、.bg-success 等。这些类设置背景色。文本颜色可能需要调整以确保对比度（例如，在 .bg-dark 上使用 .text-white）。Bootstrap 5 还提供了组合的文本和背景色工具类，例如 .text-bg-primary。

<div class="p-3 mb-2 bg-primary text-white">.bg-primary .text-white</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success .text-white</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning .text-dark</div>
<div class="p-3 mb-2 text-bg-danger">.text-bg-danger (Combined class)</div>
<!-- 提示：使用 `.text-dark` 或 `.text-white` 确保在有色背景上的对比度。 -->

应用场景：语境颜色对于用户反馈、突出重要信息或样式化状态指示器至关重要。

更多排版工具类

Bootstrap 包含了许多工具类，用于快速设置文本样式。

类	描述
.lead	使段落突出显示（更大的字体大小，更轻的字重）。
.small	创建更小的文本（父元素字体大小的 87.5%）。
.text-start	文本左对齐（或 LTR 中的开始对齐，RTL 中的结束对齐）。替换 .text-left。
.text-center	文本居中对齐。
.text-end	文本右对齐（或 LTR 中的结束对齐，RTL 中的开始对齐）。替换 .text-right。
.text-justify	文本两端对齐。
.text-wrap	允许文本换行（默认行为）。
.text-nowrap	防止文本换行。
.text-break	允许长字符串文本断行，防止破坏布局。
.text-lowercase	将文本转换为小写。
.text-uppercase	将文本转换为大写。
.text-capitalize	将每个单词的首字母大写。
.fst-italic	将文本样式设置为斜体。替换 .font-italic。
.fst-normal	重置文本为正常字体样式。
.fw-bold	将字重设置为粗体。替换 .font-weight-bold。
.fw-bolder	将字重设置为更粗（相对于父元素）。
.fw-semibold	将字重设置为半粗体。
.fw-normal	将字重设置为正常。
.fw-light	将字重设置为轻体。
.fw-lighter	将字重设置为更轻（相对于父元素）。
.lh-1, .lh-sm, .lh-base, .lh-lg	调整行高。
.text-decoration-none	移除文本装饰（例如，链接的下划线）。
.text-decoration-underline	给文本添加下划线。
.text-decoration-line-through	给文本添加删除线。
.text-reset	将文本或链接元素的颜色重置为其父元素的颜色。
.list-unstyled	移除 <ul> 或 <ol> 的默认列表样式（项目符号/数字）和左外边距。
.list-inline	将列表项设置为内联显示 (display: inline-block) 并添加一些内边距。
.list-inline-item	使用 .list-inline 时应用于每个 <li> 的类。

要获取所有排版和文本工具类的完整参考，请查阅官方 Bootstrap 5 文档：

• 排版：https://getbootstrap.com/docs/5.3/content/typography/
• 文本工具类：https://getbootstrap.com/docs/5.3/utilities/text/