Bootstrap: 排版

Q: 用 class="h1" 和直接用 <h1> 标签区别大吗？

视觉上完全一致，区别在语义上。 <h1> 告诉搜索引擎和屏幕阅读器"这是本页最重要的标题"，而 class="h1" 只是视觉模拟。建议能选 <h1> ~ <h6> 就用 HTML 标签，兼顾样式和语义。

Q: display-1 为什么比 h1 大那么多？什么时候用？

display 系列设计用于"展示性"场景——如首页 Hero 标题、活动标语、品牌 Slogan——强调视觉冲击力。内页正文标题用标准 h1 ~ h6 即可。

Q: 文字对齐的断点后缀（如 text-md-center ）在所有工具类中都通用吗？

这是 Bootstrap 响应式工具类的统一语法： {class}-{breakpoint}-{value} 。文本对齐、显示、浮动、边距等大多支持。不支持的例外情况很少，遇到时会专门说明。

Q: .small class 和 <small> 标签有什么区别？

Q: Bootstrap 支持响应式字号吗？

支持。Bootstrap 5.3+ 提供 fs-1 ~ fs-6 工具类，它们也支持断点后缀： fs-md-3 、 fs-lg-1 等。此外你还可以通过 CSS 变量 --bs-body-font-size 在断点处统一调整，或使用 Sass 变量 $font-size-root 实现全局响应式字号。

最后更新：2026-08-26

1. 本课导读

(1) 前置知识

掌握三种容器的区别和选择（来自第二课）
了解 .container 的响应式宽度变化规律

(2) 🎯 你将学到

掌握 Bootstrap 标题体系（h1~h6）及 display 标题
学会使用 .lead 引导段落和内联文字元素
掌握文字颜色工具 .text-* 和不透明度控制
熟练使用文字对齐、转换和字号工具类
能独立制作一篇完整博客文章排版

(3) 痛点

Charlie 刚接手一个博客项目，需要在不同页面保持统一的标题样式和段落间距。如果用纯 CSS，他需要为每个页面写选择器、担心优先级冲突。

(4) 解法

Bootstrap 的排版 class 让这一切变得简单。Bootstrap 提供了一套完整的排版样式——从标题字号到行高、从文字颜色到间距——所有样式都已预设好，你只需使用合适的 class。

(5) 收益

Charlie 只需在 HTML 中添加对应的排版 class，就能在所有博客页面中保持统一的标题样式和段落间距，无需手写任何 CSS 样式。

2. 标题

▶ 示例：标题与显示标题

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Typography</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">

    <!-- Standard headings -->
    <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>

    <hr>

    <!-- Heading classes on any element -->
    <p class="h1">This paragraph looks like an h1</p>
    <p class="h2">This paragraph looks like an h2</p>
    <p class="h3">This paragraph looks like an h3</p>

    <hr>

    <!-- Display headings (extra-large) -->
    <h1 class="display-1">Display 1</h1>
    <h1 class="display-2">Display 2</h1>
    <h1 class="display-3">Display 3</h1>
    <h1 class="display-4">Display 4</h1>
    <h1 class="display-5">Display 5</h1>
    <h1 class="display-6">Display 6</h1>

  </div>
</body>
</html>

▶ 试一试

(1) 默认字号

级别	标签/class	字号	粗度
`h1`	`<h1>`	2.5rem (40px)	500
`h2`	`<h2>`	2rem (32px)	500
`h3`	`<h3>`	1.75rem (28px)	500
`h4`	`<h4>`	1.5rem (24px)	500
`h5`	`<h5>`	1.25rem (20px)	500
`h6`	`<h6>`	1rem (16px)	500

3. 显示标题

display-1 ~ display-6 比普通标题更大、更细（font-weight: 300），用于首页标题、品牌标语等需要视觉冲击的地方：

HTML

<h1 class="display-3">Build <span class="text-primary">fast</span> with Bootstrap</h1>
<p class="lead">A powerful, feature-packed frontend toolkit.</p>

▶ 试一试

class	字号	粗度	适用场景
`display-1`	5rem	300	首页大标题
`display-3`	4rem	300	落地页标题
`display-6`	2.5rem	300	内页 Banner

(2) 全部 display 标题对比

class	字号	行高	font-weight	适用场景
`display-1`	5rem (80px)	1.2	300（细体）	首页 Hero 大标题
`display-2`	4.5rem (72px)	1.2	300（细体）	落地页主标题
`display-3`	4rem (64px)	1.2	300（细体）	品牌 Slogan
`display-4`	3.5rem (56px)	1.2	300（细体）	活动页面标题
`display-5`	3rem (48px)	1.2	300（细体）	内页 Banner
`display-6`	2.5rem (40px)	1.2	300（细体）	区块标题

graph TD
    A[Bootstrap 排版体系] --> B[标题 h1~h6]
    A --> C[显示标题 display-1~6]
    A --> D[引导段落 .lead]
    A --> E[内联元素]
    A --> F[工具类]
    B --> G[标准标题标签]
    B --> H[class h1 模拟标题]
    E --> I[mark / del / ins / small]
    E --> J[strong / em / u / s]
    F --> K[文字颜色 text-*]
    F --> L[文字对齐 text-start/center/end]
    F --> M[文字转换 uppercase/lowercase/capitalize]
    F --> N[字号 fs-1~fs-6]

4. 引导段落

.lead 让段落更大更醒目，用于文章开头或强调性文字：

HTML

<p>This is a normal paragraph with default font size (1rem).</p>
<p class="lead">This is a lead paragraph. It stands out from regular content with larger font and lighter weight.</p>

▶ 试一试

5. 内联文字元素

Bootstrap 对常用 HTML 内联标签做了样式重置，开箱即用：

HTML

<p>You can <mark>highlight</mark> text with the mark tag.</p>
<p><del>This line is deleted text.</del></p>
<p><s>This line is no longer accurate.</s></p>
<p><ins>This line is newly inserted.</ins></p>
<p><u>This line is underlined.</u></p>
<p><small>This line is small text.</small></p>
<p><strong>This line is bold.</strong></p>
<p><em>This line is italic.</em></p>

▶ 试一试

标签	效果	用途
`<mark>`	黄色背景高亮	关键词/搜索结果
`<del>`	删除线	已删除内容
`<ins>`	下划线（通常绿色）	新增内容
`<small>`	小号字 0.875em	注释/脚注
`<strong>`	加粗	关键词强调

6. 文字颜色

▶ 示例：文字颜色

HTML

<p class="text-primary">.text-primary - Primary blue</p>
<p class="text-success">.text-success - Success green</p>
<p class="text-danger">.text-danger - Danger red</p>
<p class="text-warning bg-dark p-2">.text-warning - Warning amber</p>
<p class="text-info bg-dark p-2">.text-info - Info cyan</p>
<p class="text-muted">.text-muted - Muted gray</p>
<p class="text-dark">.text-dark - Dark text</p>
<p class="text-body">.text-body - Default body color</p>

▶ 试一试

HTML

<p class="text-primary">100% opacity</p>
<p class="text-primary text-opacity-75">75% opacity</p>
<p class="text-primary text-opacity-50">50% opacity</p>
<p class="text-primary text-opacity-25">25% opacity</p>

▶ 试一试

7. 文字对齐

HTML

<p class="text-start">Left aligned on all viewports.</p>
<p class="text-center">Center aligned on all viewports.</p>
<p class="text-end">Right aligned on all viewports.</p>
<p class="text-sm-end">Right aligned on sm+ viewports.</p>
<p class="text-md-center">Center aligned on md+ viewports.</p>

▶ 试一试

8. 文字转换与字号

HTML

<p class="text-lowercase">Lowercased Text</p>
<p class="text-uppercase">Uppercased Text</p>
<p class="text-capitalize">capitalized text</p>

<p class="fs-1">fs-1 - font-size: 2.5rem</p>
<p class="fs-2">fs-2 - font-size: 2rem</p>
<p class="fs-3">fs-3 - font-size: 1.75rem</p>
<p class="fs-4">fs-4 - font-size: 1.5rem</p>
<p class="fs-5">fs-5 - font-size: 1.25rem</p>
<p class="fs-6">fs-6 - font-size: 1rem</p>

▶ 试一试

class	CSS 属性	等效
`text-lowercase`	`text-transform: lowercase`	字母全小写
`text-uppercase`	`text-transform: uppercase`	字母全大写
`text-capitalize`	`text-transform: capitalize`	首字母大写
`fs-1` ~ `fs-6`	`font-size`	与 h1~h6 字号一致

9. 引用

HTML

<figure>
  <blockquote class="blockquote">
    <p>The best way to predict the future is to create it.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Peter Drucker in <cite>The Practice of Management</cite>
  </figcaption>
</figure>

▶ 试一试

10. 列表

HTML

<ul class="list-unstyled">
  <li>Item without bullet</li>
  <li>Another item</li>
</ul>

<ul class="list-inline">
  <li class="list-inline-item">Home</li>
  <li class="list-inline-item">Blog</li>
  <li class="list-inline-item">About</li>
</ul>

▶ 试一试

▶ 示例：博客文章页面

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blog Post</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <article>
      <header class="mb-4">
        <p class="text-muted small">发布于 2026 年 1 月 · 5 分钟阅读</p>
        <h1 class="display-4">Bootstrap 5 排版最佳实践</h1>
        <p class="lead text-secondary">掌握 Bootstrap 排版工具类，让你的内容在每一屏都清晰易读。</p>
      </header>
      <section class="mb-4">
        <h2>为什么选择 Bootstrap 排版</h2>
        <p>Bootstrap 的排版系统基于 <mark>rem 单位</mark>，确保在所有设备上保持比例一致。你只需关注内容层次，不用操心像素值。</p>
        <blockquote class="blockquote">
          <p>设计不是看起来怎样，而是如何工作。</p>
          <figcaption class="blockquote-footer">Steve Jobs</figcaption>
        </blockquote>
        <p>使用 <code>.text-muted</code> 搭配 <code>&lt;small&gt;</code> 标签可以创建清晰的元信息行，如日期和阅读时间。</p>
      </section>
      <footer>
        <p class="text-muted mb-1">标签：</p>
        <ul class="list-inline">
          <li class="list-inline-item"><span class="badge bg-primary">Bootstrap</span></li>
          <li class="list-inline-item"><span class="badge bg-secondary">CSS</span></li>
          <li class="list-inline-item"><span class="badge bg-info">响应式</span></li>
        </ul>
      </footer>
    </article>
  </div>
</body>
</html>

▶ 试一试

▶ 示例：文字颜色与不透明度

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Colors Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h3 class="mb-3">语义颜色</h3>
    <p class="text-primary">🔵 text-primary — 主要信息</p>
    <p class="text-success">🟢 text-success — 成功反馈</p>
    <p class="text-danger">🔴 text-danger — 错误或危险</p>
    <p class="text-warning bg-dark p-2">🟡 text-warning — 警告提示</p>
    <p class="text-info bg-dark p-2">🔷 text-info — 信息提示</p>
    <p class="text-muted">⚪ text-muted — 辅助文字</p>
    <p class="text-dark">⚫ text-dark — 深色文字</p>

    <hr>
    <h3 class="mb-3">不透明度 (Bootstrap 5.3+)</h3>
    <p class="text-primary">text-primary (100%)</p>
    <p class="text-primary text-opacity-75">text-primary text-opacity-75</p>
    <p class="text-primary text-opacity-50">text-primary text-opacity-50</p>
    <p class="text-primary text-opacity-25">text-primary text-opacity-25</p>

    <hr>
    <h3 class="mb-3">背景色上的文字</h3>
    <p class="text-white bg-primary p-2">白色文字在蓝色背景上</p>
    <p class="text-light bg-dark p-2">浅色文字在深色背景上</p>
    <p class="text-dark bg-warning p-2">深色文字在黄色背景上</p>
  </div>
</body>
</html>

▶ 试一试

▶ 示例：响应式文字对齐

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Text Alignment</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .demo-box { border: 1px dashed #ccc; padding: 1rem; margin-bottom: 1rem; }
  </style>
</head>
<body>
  <div class="container py-4">
    <h3 class="mb-3">对齐方式对比</h3>

    <div class="demo-box">
      <p class="text-start">左对齐 (text-start) — 始终左侧</p>
    </div>
    <div class="demo-box">
      <p class="text-center">居中 (text-center) — 始终居中</p>
    </div>
    <div class="demo-box">
      <p class="text-end">右对齐 (text-end) — 始终右侧</p>
    </div>

    <hr>
    <h3 class="mb-3">响应式对齐</h3>
    <p class="text-center text-md-start bg-light p-3">
      手机居中 · 平板及以上左对齐<br>
      <code>.text-center .text-md-start</code>
    </p>
    <p class="text-start text-lg-center bg-info text-white p-3">
      手机左对齐 · 桌面居中<br>
      <code>.text-start .text-lg-center</code>
    </p>
    <p class="text-center text-sm-end text-xl-start bg-dark text-light p-3">
      手机居中 · 小屏及以上右对齐 · 大屏及以上左对齐<br>
      <code>.text-center .text-sm-end .text-xl-start</code>
    </p>
  </div>
</body>
</html>

▶ 试一试

❓ 常见问题

Q 用 class="h1" 和直接用 <h1> 标签区别大吗？

A 视觉上完全一致，区别在语义上。<h1> 告诉搜索引擎和屏幕阅读器"这是本页最重要的标题"，而 class="h1" 只是视觉模拟。建议能选 <h1>~<h6> 就用 HTML 标签，兼顾样式和语义。

Q display-1 为什么比 h1 大那么多？什么时候用？

A display 系列设计用于"展示性"场景——如首页 Hero 标题、活动标语、品牌 Slogan——强调视觉冲击力。内页正文标题用标准 h1~h6 即可。

Q 文字对齐的断点后缀（如 text-md-center）在所有工具类中都通用吗？

A 这是 Bootstrap 响应式工具类的统一语法：{class}-{breakpoint}-{value}。文本对齐、显示、浮动、边距等大多支持。不支持的例外情况很少，遇到时会专门说明。

Q .small class 和 <small> 标签有什么区别？

Q Bootstrap 支持响应式字号吗？

A 支持。Bootstrap 5.3+ 提供 fs-1~fs-6 工具类，它们也支持断点后缀：fs-md-3、fs-lg-1 等。此外你还可以通过 CSS 变量 --bs-body-font-size 在断点处统一调整，或使用 Sass 变量 $font-size-root 实现全局响应式字号。

📖 小节

Bootstrap 排版预设了 h1~h6、display-1~display-6、lead 等样式
内联标签（<mark>、<del>、<small> 等）开箱即用
工具类 text-* 控制颜色、对齐、转换和字号
引用用 blockquote + blockquote-footer，列表用 list-unstyled / list-inline

📝 作业

⭐ 写一个博客文章页面：标题 h1，作者信息 text-muted small 文字，正文 lead 开头，内文含一个 <blockquote> 引用，底部标签用 list-inline。
⭐⭐ 在一行中排列四个 display-* 标题，分别使用不同 text-* 颜色，观察它们的字号差异和粗细。
⭐⭐⭐ 用 fs-1 ~ fs-6 为一段诗展示字号渐变效果，每行使用不同的不透明度（text-opacity-*）。

上一课： 容器 · 下一课： 间距

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

关于我们

Bootstrap: 排版

1. 本课导读

(1) 前置知识

(2) 🎯 你将学到

(3) 痛点

(4) 解法

(5) 收益

2. 标题

▶ 示例：标题与显示标题

(1) 默认字号

3. 显示标题

(2) 全部 display 标题对比

4. 引导段落

5. 内联文字元素

6. 文字颜色

▶ 示例：文字颜色

7. 文字对齐

8. 文字转换与字号

9. 引用

10. 列表

▶ 示例：博客文章页面

▶ 示例：文字颜色与不透明度

▶ 示例：响应式文字对齐

❓ 常见问题

📖 小节

📝 作业

🙏 帮我们做得更好