Bootstrap 排版

排版（Typography）决定页面文字的第一观感。Bootstrap 基于 Reboot 重置了默认样式，并定义了标题、强调、列表等一整套排版类，让文字层级清晰、风格统一，无需手写 CSS。

标题

普通标题直接使用 h1h6，字号与粗细已由 Bootstrap 预设。想让标题更有冲击力，可用 display-1display-6 展示级标题；用 h1~h6 类还能让 div、span 等元素“长得像”对应级别的标题。

<!-- 本示例基于 CDN 引入的 Bootstrap 5（引入代码见"环境安装"章节）；展示级标题与普通标题对比 -->
<h1>一级标题</h1>
<h1 class="display-3">展示级标题</h1>
<p class="h3">用类名 h3 修饰的段落</p>

显示效果：第一个是一级标题；中间的 display-3 明显更大更细，适合页面主视觉；第三个虽然只是段落文字，却被渲染成三级标题大小。

文本强调与内联元素

Bootstrap 为常用内联语义准备了现成类：.lead 让引导段落更大更轻；.mark 加黄底高亮；.small 显示小号字；.text-decoration-line-through 加删除线：

<!-- 引导段与内联标记 -->
<p class="lead">这是一段引导文字，字号更大、颜色更浅。</p>
<p>文中可插入 <mark>高亮内容</mark>、<del>已删除内容</del> 和 <u>下划线内容</u>。</p>

显示效果：第一段比普通正文大且细；第二段中黄底高亮、删除线、下划线三种效果依次可见。

文字颜色与对齐

颜色类 text-primary、text-success、text-danger 等可快速着色；对齐类 text-start、text-center、text-end 分别对应左、中、右对齐，还可写成 text-md-center 实现响应式对齐：

<!-- 颜色与对齐 -->
<p class="text-primary">主色文字</p>
<p class="text-danger text-center">居中显示的红色警示文字</p>
<p class="text-end">右对齐的说明文字</p>

显示效果：三行分别呈现蓝色、红色居中、灰色靠右，可用于状态提示与排版微调。

列表样式

.list-unstyled 去掉列表的项目符号与缩进；.list-inline 配合 list-inline-item 把列表变成一行，常用于横向导航或标签：

<!-- 无序列表变横向 -->
<ul class="list-inline">
  <li class="list-inline-item">首页</li>
  <li class="list-inline-item">产品</li>
  <li class="list-inline-item">关于我们</li>
</ul>

显示效果：三个列表项横向排列且无圆点，项间留有一定间距，视觉上接近简单导航栏。

小结

掌握 display 标题、lead/mark 强调、text-* 颜色对齐与 list-inline 横排列表，就能快速完成大部分页面文字排版需求。