Bootstrap5提供了强大的排版工具，让网页的文字展示更规范、更美观。本文将带你了解Bootstrap5中最基础且常用的排版功能，包括标题层级和文本样式的设置方法，适合刚开始学习Bootstrap的同学。
一、标题层级：快速设置不同大小的标题¶
Bootstrap5通过一系列预定义的类名，让你轻松创建不同层级的标题样式，同时兼顾了样式和语义化的平衡。
1. 基础标题类（h1-h6）¶
Bootstrap5使用 .h1 到 .h6 类来定义标题样式，这些类会影响元素的字体大小、粗细和行高，但不会改变元素本身的语义。例如，即使你用 <p> 标签加上 .h1 类，它会显示成h1的大小，却不会像 <h1> 那样被浏览器视为一级标题（语义化标签的作用）。
<!-- 用h1标签和.h1类效果相同 -->
<h1 class="h1">这是h1样式的标题</h1>
<p class="h2">这是h2样式的段落（通过.h2类实现）</p>
<p class="h3">h3样式的文本</p>
<p class="h4">h4样式的文本</p>
<p class="h5">h5样式的文本</p>
<p class="h6">h6样式的文本</p>
效果：h1 最大，字体最粗；h6 最小，字体最细。
2. 标题间距与默认样式¶
Bootstrap5的标题默认会有间距，避免和正文拥挤：
- h1 到 h6 都默认带有 margin-bottom: 1rem，确保标题之间有足够空隙。
- 相邻标题或标题与正文的间距通过 margin-top 和 margin-bottom 自动调整。
<h1 class="h1">大标题</h1>
<p>这是大标题下方的正文内容，间距由Bootstrap自动处理。</p>
<h2 class="h2">中标题</h2>
<p>这是中标题下方的正文内容。</p>
二、文本样式：丰富的文本美化方式¶
Bootstrap5提供了大量文本样式类，可快速调整文本对齐、颜色、粗细、大小写等。
1. 文本对齐：调整文字左右位置¶
通过以下类控制文本对齐方式（默认左对齐）：
- .text-start：左对齐（默认）
- .text-center：居中对齐
- .text-end：右对齐
- .text-justify：两端对齐（适合多段文本）
<p class="text-center">这段文字是居中的</p>
<p class="text-end">这段文字靠右显示</p>
<p class="text-justify">这段文字会两端对齐，让内容更整齐（需容器宽度足够）。</p>
2. 文本颜色：改变文字和背景色¶
- 文字颜色：使用
.text-*类（如.text-primary、.text-success等）。 - 背景颜色：使用
.bg-*类（较少用，通常配合白色文字）。
<p class="text-primary">蓝色文本（主要色）</p>
<p class="text-success">绿色文本（成功色）</p>
<p class="text-muted">灰色文本（次要文本，弱化显示）</p>
<p class="text-danger bg-light">红色文本（危险色）</p>
<p class="bg-primary text-white">蓝色背景白色文字</p>
3. 文本粗细与斜体：突出重要内容¶
- 粗细：
fw-bold（粗体）、fw-normal（常规）、fw-light（细体）。 - 斜体：
fst-italic（斜体）。
<p class="fw-bold">这段文字是粗体</p>
<p class="fst-italic">这段文字是斜体</p>
<p class="fw-light fst-italic">既细体又斜体</p>
4. 文本大小写：统一文字形式¶
.text-lowercase：全部小写。.text-uppercase：全部大写。.text-capitalize：每个单词首字母大写。
<p class="text-lowercase">HELLO WORLD → hello world</p>
<p class="text-uppercase">hello world → HELLO WORLD</p>
<p class="text-capitalize">hello world → Hello World</p>
5. 行高与间距：优化可读性¶
- 行高：
lh-sm（小行高1.25）、lh-base（默认1.5）、lh-lg（大行高2）。 - 间距：通过
.mb-*（margin-bottom）或.mt-*（margin-top）工具类调整。
<p class="lh-sm">小行高（文本更紧凑）</p>
<p class="lh-lg">大行高（文本更宽松，适合长段落）</p>
<p class="mb-3">这里有margin-bottom，与下方段落隔开</p>
<p class="mt-4">这里有margin-top，与上方段落隔开</p>
6. 特殊文本样式：引用、列表、删除线¶
- 引用样式：用
<blockquote>配合.blockquote类，<footer>配合.blockquote-footer显示引用来源。 - 列表样式：
.list-unstyled（无列表符号）、.list-inline（内联列表，一行显示）。 - 文本装饰：
.text-decoration-line-through（删除线）、.text-decoration-none（去掉下划线）。
<!-- 引用样式 -->
<blockquote class="blockquote">
<p>这是一段引用文本，默认带左侧边框和内边距。</p>
<footer class="blockquote-footer">引用来源：Bootstrap文档</footer>
</blockquote>
<!-- 无列表符号 -->
<ul class="list-unstyled">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<!-- 内联列表 -->
<ul class="list-inline">
<li class="list-inline-item">项目1</li>
<li class="list-inline-item">项目2</li>
<li class="list-inline-item">项目3</li>
</ul>
<!-- 删除线文本 -->
<p class="text-decoration-line-through">这段文字有删除线</p>
三、使用注意事项¶
- 语义化优先：标题尽量用
<h1>-<h6>标签（增强SEO和无障碍性），样式类（.h1-.h6）仅用于美化。 - 类名与标签区分：不要混淆
.h1类和<h1>标签，前者是样式，后者是语义。 - 响应式适配：Bootstrap5类默认响应式，如需特定断点调整（如仅移动端居中），可加前缀（如
.text-center-sm）。
总结¶
掌握Bootstrap5排版基础，只需记住核心类名：.h1-.h6（标题）、.text-*（颜色/对齐）、fw-*（粗细）、fst-*（斜体）等。这些工具能快速让文字更美观、结构更清晰，后续结合网格系统和组件，可进一步提升页面效果。