Bootstrap 文字排版
概述
Bootstrap 提供了一套完整的排版系统，包括标题、段落、列表等文本元素的样式。这些样式确保了跨浏览器的一致性和良好的可读性。
标题
HTML 标题
Bootstrap 为所有 HTML 标题元素（<h1> 到 <h6>）提供了样式：
html
<h1>h1. Bootstrap 标题</h1>
<h2>h2. Bootstrap 标题</h2>
<h3>h3. Bootstrap 标题</h3>
<h4>h4. Bootstrap 标题</h4>
<h5>h5. Bootstrap 标题</h5>
<h6>h6. Bootstrap 标题</h6>标题类
当你想要标题的字体样式但不能使用相关的 HTML 元素时，可以使用 .h1 到 .h6 类：
html
<p class="h1">看起来像 h1 的段落</p>
<p class="h2">看起来像 h2 的段落</p>
<p class="h3">看起来像 h3 的段落</p>
<p class="h4">看起来像 h4 的段落</p>
<p class="h5">看起来像 h5 的段落</p>
<p class="h6">看起来像 h6 的段落</p>显示标题
传统的标题元素设计用于页面内容的层次结构。当你需要一个突出显示的标题时，可以使用显示标题：
html
<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>段落
基本段落
html
<p>这是一个普通的段落。Bootstrap 为段落提供了合适的行高和底部边距。</p>
<p>这是另一个段落，展示了段落之间的间距。</p>引导段落
使用 .lead 类让段落突出显示：
html
<p class="lead">
这是一个引导段落。它比普通段落更加突出，通常用于重要的介绍性文本。
</p>内联文本元素
标记文本
html
<p>你可以使用 <mark>mark 标签</mark> 来高亮文本。</p>删除文本
html
<p><del>这行文本被视为已删除的文本。</del></p>
<p><s>这行文本被视为不再准确的文本。</s></p>插入文本
html
<p><ins>这行文本被视为文档的补充。</ins></p>
<p><u>这行文本将呈现为带下划线。</u></p>小号文本
html
<p><small>这行文本被视为小号文本。</small></p>粗体和斜体
html
<p><strong>这行文本呈现为粗体。</strong></p>
<p><em>这行文本呈现为斜体。</em></p>文本工具类
文本对齐
html
<p class="text-start">左对齐文本。</p>
<p class="text-center">居中对齐文本。</p>
<p class="text-end">右对齐文本。</p>
<p class="text-justify">两端对齐文本。</p>文本换行和溢出
html
<p class="text-wrap">这是一段会换行的文本。</p>
<p class="text-nowrap">这是一段不会换行的文本。</p>
<p class="text-break">这是一段会在长单词处断行的文本。</p>文本转换
html
<p class="text-lowercase">小写文本。</p>
<p class="text-uppercase">大写文本。</p>
<p class="text-capitalize">首字母大写文本。</p>字体粗细和斜体
html
<p class="fw-bold">粗体文本。</p>
<p class="fw-bolder">更粗的文本（相对于父元素）。</p>
<p class="fw-semibold">半粗体文本。</p>
<p class="fw-medium">中等粗细文本。</p>
<p class="fw-normal">正常粗细文本。</p>
<p class="fw-light">细体文本。</p>
<p class="fw-lighter">更细的文本（相对于父元素）。</p>
<p class="fst-italic">斜体文本。</p>
<p class="fst-normal">正常样式文本。</p>列表
无样式列表
移除默认的 list-style 和左边距：
html
<ul class="list-unstyled">
<li>这是一个列表项。</li>
<li>还有另一个列表项。</li>
<li>但它们没有项目符号。</li>
</ul>内联列表
将列表项放在同一行：
html
<ul class="list-inline">
<li class="list-inline-item">这是一个列表项。</li>
<li class="list-inline-item">还有另一个列表项。</li>
<li class="list-inline-item">但它们都在同一行。</li>
</ul>描述列表对齐
使用网格系统的预定义类对齐术语和描述：
html
<dl class="row">
<dt class="col-sm-3">描述列表</dt>
<dd class="col-sm-9">描述列表非常适合定义术语。</dd>
<dt class="col-sm-3">术语</dt>
<dd class="col-sm-9">
<p>这是术语的定义。</p>
<p>还可以包含多个段落。</p>
</dd>
<dt class="col-sm-3">另一个术语</dt>
<dd class="col-sm-9">这个定义很短，所以没有额外的段落或其他内容。</dd>
</dl>引用
基本引用
html
<blockquote class="blockquote">
<p>人生苦短，我用 Python。</p>
</blockquote>引用来源
html
<blockquote class="blockquote">
<p>人生苦短，我用 Python。</p>
<footer class="blockquote-footer">
来自 <cite title="Python 社区">Python 开发者</cite>
</footer>
</blockquote>居中引用
html
<blockquote class="blockquote text-center">
<p>人生苦短，我用 Python。</p>
<footer class="blockquote-footer">
来自 <cite title="Python 社区">Python 开发者</cite>
</footer>
</blockquote>实际示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 排版示例</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container my-5">
<h1 class="display-4">Bootstrap 排版系统</h1>
<p class="lead">这是一个展示 Bootstrap 排版功能的示例页面。</p>
<hr>
<h2>标题示例</h2>
<h1>主标题 (h1)</h1>
<h2>二级标题 (h2)</h2>
<h3>三级标题 (h3)</h3>
<h2>段落和文本</h2>
<p>这是一个普通段落。Bootstrap 提供了良好的默认排版样式。</p>
<p class="lead">这是一个引导段落，用于重要的介绍性文本。</p>
<p>你可以使用各种内联元素：</p>
<ul>
<li><strong>粗体文本</strong></li>
<li><em>斜体文本</em></li>
<li><mark>高亮文本</mark></li>
<li><small>小号文本</small></li>
</ul>
<h2>文本对齐</h2>
<p class="text-start">左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-end">右对齐文本</p>
<h2>引用</h2>
<blockquote class="blockquote">
<p>学而时习之，不亦说乎？</p>
<footer class="blockquote-footer">
来自 <cite title="论语">孔子</cite>
</footer>
</blockquote>
<h2>列表</h2>
<h3>无样式列表</h3>
<ul class="list-unstyled">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
<h3>内联列表</h3>
<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>
</div>
</body>
</html>响应式排版
Bootstrap 的排版是响应式的，字体大小会根据屏幕尺寸自动调整。你也可以使用响应式工具类：
html
<!-- 响应式文本对齐 -->
<p class="text-start text-md-center text-lg-end">
在小屏幕左对齐，中等屏幕居中，大屏幕右对齐
</p>
<!-- 响应式字体大小 -->
<h1 class="fs-1 fs-md-2 fs-lg-3">响应式标题</h1>最佳实践
- 保持层次结构：正确使用标题层次（h1-h6）
- 适当使用引导段落：只在重要的介绍性文本使用
.lead - 注意可读性：确保文本颜色与背景有足够的对比度
- 响应式考虑：在不同设备上测试文本的可读性
- 语义化标记：使用正确的 HTML 元素表达内容含义
下一步
现在你已经掌握了 Bootstrap 的排版系统，接下来我们将学习颜色系统。