本章概述
Bootstrap 提供了完整的排版系统，包括标题、段落、列表、引用等文本元素的样式，以及丰富的文本工具类。本章将详细介绍如何使用这些排版工具创建美观、一致的文本内容，并掌握文本对齐、颜色、字体等实用工具类。
基础排版
1. 标题系统
HTML 标题
<!-- 标准 HTML 标题 -->
<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>
标题类
<!-- 当需要标题样式但不能使用标题元素时 -->
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
显示标题
<!-- 更大、更突出的标题样式 -->
<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>
副标题
<!-- 使用 small 元素或 .text-muted 类 -->
<h1>
主标题
<small class="text-muted">副标题文本</small>
</h1>
<h2>
文章标题
<small class="text-muted">发布于 2023年12月1日</small>
</h2>
2. 段落和文本
基础段落
<!-- 标准段落 -->
<p>这是一个标准段落。Bootstrap 为段落设置了合适的行高和底部边距，确保良好的可读性。</p>
<p>另一个段落，展示段落之间的间距效果。文本内容应该保持适当的长度，避免过长的行影响阅读体验。</p>
突出段落
<!-- 引导段落 -->
<p class="lead">
这是一个引导段落，通常用于文章开头或重要内容的强调。它具有更大的字体和更突出的样式。
</p>
内联文本元素
<!-- 各种内联文本样式 -->
<p>你可以使用 <mark>mark 标签</mark> 来高亮文本。</p>
<p><del>这行文本被删除了。</del></p>
<p><s>这行文本不再准确。</s></p>
<p><ins>这行文本是新增的。</ins></p>
<p><u>这行文本有下划线。</u></p>
<p><small>这行文本是小号字体。</small></p>
<p><strong>这行文本是粗体。</strong></p>
<p><em>这行文本是斜体。</em></p>
3. 文本工具类
文本对齐
<!-- 文本对齐 -->
<p class="text-start">左对齐文本。</p>
<p class="text-center">居中对齐文本。</p>
<p class="text-end">右对齐文本。</p>
<!-- 响应式文本对齐 -->
<p class="text-sm-start text-md-center text-lg-end">
响应式对齐：小屏幕左对齐，中等屏幕居中，大屏幕右对齐。
</p>
文本换行和溢出
<!-- 文本换行 -->
<div class="badge bg-primary text-wrap" style="width: 6rem;">
这个文本会换行
</div>
<!-- 防止文本换行 -->
<div class="text-nowrap bd-highlight" style="width: 8rem;">
这个文本不会换行
</div>
<!-- 文本截断 -->
<div class="row">
<div class="col-2 text-truncate">
这是一段很长的文本，会被截断显示省略号。
</div>
</div>
<!-- 单词断行 -->
<p class="text-break">
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
</p>
文本变换
<!-- 文本大小写变换 -->
<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 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>
字体粗细
<!-- 字体粗细 -->
<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-semibold">Semibold weight text.</p>
<p class="fw-medium">Medium weight text.</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
字体样式
<!-- 字体样式 -->
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>
行高
<!-- 行高设置 -->
<p class="lh-1">这是一个长段落，用来演示行高设置的效果。行高为 1。</p>
<p class="lh-sm">这是一个长段落，用来演示行高设置的效果。行高为 small。</p>
<p class="lh-base">这是一个长段落，用来演示行高设置的效果。行高为 base。</p>
<p class="lh-lg">这是一个长段落，用来演示行高设置的效果。行高为 large。</p>
文本颜色系统
1. 语义化颜色
<!-- 语义化文本颜色 -->
<p class="text-primary">.text-primary</p>
<p class="text-primary-emphasis">.text-primary-emphasis</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-secondary-emphasis">.text-secondary-emphasis</p>
<p class="text-success">.text-success</p>
<p class="text-success-emphasis">.text-success-emphasis</p>
<p class="text-danger">.text-danger</p>
<p class="text-danger-emphasis">.text-danger-emphasis</p>
<p class="text-warning">.text-warning</p>
<p class="text-warning-emphasis">.text-warning-emphasis</p>
<p class="text-info">.text-info</p>
<p class="text-info-emphasis">.text-info-emphasis</p>
<p class="text-light">.text-light</p>
<p class="text-light-emphasis">.text-light-emphasis</p>
<p class="text-dark">.text-dark</p>
<p class="text-dark-emphasis">.text-dark-emphasis</p>
2. 中性颜色
<!-- 中性文本颜色 -->
<p class="text-body">.text-body</p>
<p class="text-body-emphasis">.text-body-emphasis</p>
<p class="text-body-secondary">.text-body-secondary</p>
<p class="text-body-tertiary">.text-body-tertiary</p>
<p class="text-black">.text-black</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
<p class="text-muted">.text-muted</p>
3. 链接颜色
<!-- 链接颜色 -->
<p><a href="#" class="link-primary">Primary link</a></p>
<p><a href="#" class="link-secondary">Secondary link</a></p>
<p><a href="#" class="link-success">Success link</a></p>
<p><a href="#" class="link-danger">Danger link</a></p>
<p><a href="#" class="link-warning">Warning link</a></p>
<p><a href="#" class="link-info">Info link</a></p>
<p><a href="#" class="link-light">Light link</a></p>
<p><a href="#" class="link-dark">Dark link</a></p>
<p><a href="#" class="link-body-emphasis">Emphasis link</a></p>
<!-- 链接装饰 -->
<p><a href="#" class="link-offset-2 link-underline link-underline-opacity-25">Underline link</a></p>
<p><a href="#" class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover">Hover underline link</a></p>
列表样式
1. 无序列表
<!-- 标准无序列表 -->
<ul>
<li>这是列表项 1</li>
<li>这是列表项 2</li>
<li>这是列表项 3
<ul>
<li>嵌套列表项 1</li>
<li>嵌套列表项 2</li>
</ul>
</li>
<li>这是列表项 4</li>
</ul>
<!-- 无样式列表 -->
<ul class="list-unstyled">
<li>这是无样式列表项 1</li>
<li>这是无样式列表项 2</li>
<li>这是无样式列表项 3
<ul>
<li>嵌套列表项保持原样式</li>
<li>嵌套列表项保持原样式</li>
</ul>
</li>
<li>这是无样式列表项 4</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>
2. 有序列表
<!-- 标准有序列表 -->
<ol>
<li>第一步：准备材料</li>
<li>第二步：开始制作</li>
<li>第三步：完成作品</li>
</ol>
<!-- 自定义计数器 -->
<ol class="list-group list-group-numbered">
<li class="list-group-item">项目 1</li>
<li class="list-group-item">项目 2</li>
<li class="list-group-item">项目 3</li>
</ol>
3. 描述列表
<!-- 描述列表 -->
<dl>
<dt>描述列表</dt>
<dd>描述列表是用来显示术语和描述的列表。</dd>
<dt>Bootstrap</dt>
<dd>世界上最流行的前端框架，用于构建响应式、移动优先的网站。</dd>
<dt>响应式设计</dt>
<dd>一种网页设计方法，使网站能够在各种设备和屏幕尺寸上良好显示。</dd>
</dl>
<!-- 水平描述列表 -->
<dl class="row">
<dt class="col-sm-3">描述列表</dt>
<dd class="col-sm-9">描述列表是用来显示术语和描述的列表。</dd>
<dt class="col-sm-3">Bootstrap</dt>
<dd class="col-sm-9">世界上最流行的前端框架，用于构建响应式、移动优先的网站。</dd>
<dt class="col-sm-3 text-truncate">很长的术语名称会被截断</dt>
<dd class="col-sm-9">这个术语的描述内容。</dd>
</dl>
引用和代码
1. 块引用
<!-- 基础块引用 -->
<blockquote class="blockquote">
<p>人生苦短，我用 Python。</p>
</blockquote>
<!-- 带来源的引用 -->
<blockquote class="blockquote">
<p>设计不仅仅是看起来如何和感觉如何。设计是它如何工作。</p>
<footer class="blockquote-footer">
史蒂夫·乔布斯 <cite title="苹果公司创始人">苹果公司创始人</cite>
</footer>
</blockquote>
<!-- 居中引用 -->
<blockquote class="blockquote text-center">
<p>简单是复杂的终极形式。</p>
<footer class="blockquote-footer">
达芬奇 <cite title="文艺复兴时期艺术家">文艺复兴时期艺术家</cite>
</footer>
</blockquote>
<!-- 右对齐引用 -->
<blockquote class="blockquote text-end">
<p>创新区分领导者和跟随者。</p>
<footer class="blockquote-footer">
史蒂夫·乔布斯 <cite title="苹果公司创始人">苹果公司创始人</cite>
</footer>
</blockquote>
2. 内联代码
<!-- 内联代码 -->
<p>使用 <code><section></code> 元素来包装通用内容。</p>
<p>要切换目录，请输入 <kbd>cd</kbd> 命令，后跟目录名称。</p>
<p>要编辑设置，按 <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd></p>
3. 代码块
<!-- 代码块 -->
<pre><code><p>示例文本在这里...</p>
<p>另一行示例文本...</p>
</code></pre>
<!-- 可滚动代码块 -->
<pre class="pre-scrollable"><code>这是一个很长的代码块...
可能需要滚动来查看全部内容...
第三行代码...
第四行代码...
第五行代码...
第六行代码...
第七行代码...
第八行代码...
第九行代码...
第十行代码...
</code></pre>
4. 变量和示例输出
<!-- 变量 -->
<p><var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>
<!-- 示例输出 -->
<samp>这是程序的示例输出。</samp>
实际应用案例
1. 文章页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文章页面示例</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-12 col-lg-8">
<!-- 文章头部 -->
<header class="mb-5">
<h1 class="display-4 fw-bold mb-3">Bootstrap 排版系统完全指南</h1>
<p class="lead text-muted mb-4">
深入了解 Bootstrap 5 的排版系统，掌握文本样式、颜色和布局的最佳实践。
</p>
<div class="d-flex align-items-center text-muted">
<img src="https://via.placeholder.com/40x40" class="rounded-circle me-3" alt="作者头像">
<div>
<div class="fw-semibold">张三</div>
<small>发布于 2023年12月1日 · 阅读时间 8分钟</small>
</div>
</div>
</header>
<!-- 文章内容 -->
<article>
<h2 class="h3 mb-3">什么是排版系统？</h2>
<p>
排版系统是网页设计中的重要组成部分，它定义了文本的外观、层次结构和可读性。
Bootstrap 提供了一套完整的排版工具，帮助开发者创建美观、一致的文本内容。
</p>
<blockquote class="blockquote my-4">
<p>"好的排版是隐形的，它让内容自然地传达给读者。"</p>
<footer class="blockquote-footer">
<cite title="排版设计师">排版设计师</cite>
</footer>
</blockquote>
<h3 class="h4 mb-3">核心特性</h3>
<p>Bootstrap 的排版系统包含以下核心特性：</p>
<ul>
<li><strong>标题层次</strong>：从 h1 到 h6 的完整标题系统</li>
<li><strong>文本工具</strong>：对齐、颜色、大小等实用工具类</li>
<li><strong>响应式设计</strong>：适应不同屏幕尺寸的文本样式</li>
<li><strong>语义化标记</strong>：保持良好的 HTML 语义结构</li>
</ul>
<h3 class="h4 mb-3">代码示例</h3>
<p>以下是一个基本的标题使用示例：</p>
<pre class="bg-light p-3 rounded"><code><h1 class="display-4">主标题</h1>
<h2 class="h3 text-primary">副标题</h2>
<p class="lead">引导段落</p></code></pre>
<div class="alert alert-info" role="alert">
<h4 class="alert-heading">提示</h4>
<p class="mb-0">
使用 <code>.display-*</code> 类可以创建更大、更突出的标题样式，
适合用于页面的主要标题或重要内容的强调。
</p>
</div>
<h3 class="h4 mb-3">最佳实践</h3>
<ol>
<li class="mb-2">
<strong>保持层次结构</strong>：使用正确的标题层次，不要跳级使用标题标签。
</li>
<li class="mb-2">
<strong>合理使用颜色</strong>：文本颜色应该有足够的对比度，确保可读性。
</li>
<li class="mb-2">
<strong>响应式考虑</strong>：在不同设备上测试文本的显示效果。
</li>
<li class="mb-2">
<strong>语义化优先</strong>：优先使用语义化的 HTML 标签，再配合 CSS 类。
</li>
</ol>
<h3 class="h4 mb-3">总结</h3>
<p>
Bootstrap 的排版系统为开发者提供了强大而灵活的文本样式工具。
通过合理使用这些工具，我们可以创建出既美观又实用的网页内容。
记住，好的排版不仅仅是美观，更重要的是提升用户的阅读体验。
</p>
</article>
<!-- 文章标签 -->
<div class="mt-5 pt-4 border-top">
<h5 class="mb-3">标签</h5>
<div>
<span class="badge bg-primary me-2">Bootstrap</span>
<span class="badge bg-secondary me-2">排版</span>
<span class="badge bg-success me-2">CSS</span>
<span class="badge bg-info me-2">前端开发</span>
</div>
</div>
<!-- 作者信息 -->
<div class="mt-5 p-4 bg-light rounded">
<div class="d-flex align-items-center">
<img src="https://via.placeholder.com/80x80" class="rounded-circle me-4" alt="作者头像">
<div>
<h5 class="mb-1">张三</h5>
<p class="text-muted mb-2">前端开发工程师</p>
<p class="mb-0">
专注于现代前端技术，热爱分享技术知识。
拥有5年的前端开发经验，擅长 React、Vue 和 Bootstrap。
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
2. 文档页面
<!-- 技术文档页面 -->
<div class="container-fluid">
<div class="row">
<!-- 侧边栏目录 -->
<nav class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
<div class="position-sticky pt-3">
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
<span>目录</span>
</h6>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#introduction">
介绍
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#installation">
安装
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#usage">
使用方法
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#examples">
示例
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#api">
API 参考
</a>
</li>
</ul>
</div>
</nav>
<!-- 主内容区 -->
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">API 文档</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group me-2">
<button type="button" class="btn btn-sm btn-outline-secondary">分享</button>
<button type="button" class="btn btn-sm btn-outline-secondary">导出</button>
</div>
</div>
</div>
<!-- 介绍部分 -->
<section id="introduction" class="mb-5">
<h2 class="h3 mb-3">介绍</h2>
<p class="lead">
这是一个功能强大的 JavaScript 库，用于创建交互式的用户界面组件。
</p>
<p>
本文档将详细介绍如何安装、配置和使用这个库。
我们提供了完整的 API 参考和实用的示例代码。
</p>
<div class="alert alert-primary" role="alert">
<h4 class="alert-heading">版本信息</h4>
<p>当前文档适用于 v2.0.0 版本。</p>
<hr>
<p class="mb-0">如果你使用的是旧版本，请查看 <a href="#" class="alert-link">历史文档</a>。</p>
</div>
</section>
<!-- 安装部分 -->
<section id="installation" class="mb-5">
<h2 class="h3 mb-3">安装</h2>
<p>你可以通过以下几种方式安装这个库：</p>
<h3 class="h5 mb-3">使用 npm</h3>
<pre class="bg-dark text-light p-3 rounded"><code>npm install awesome-library</code></pre>
<h3 class="h5 mb-3">使用 yarn</h3>
<pre class="bg-dark text-light p-3 rounded"><code>yarn add awesome-library</code></pre>
<h3 class="h5 mb-3">CDN 引入</h3>
<pre class="bg-light p-3 rounded"><code><script src="https://cdn.example.com/awesome-library@2.0.0/dist/awesome-library.min.js"></script></code></pre>
</section>
<!-- 使用方法部分 -->
<section id="usage" class="mb-5">
<h2 class="h3 mb-3">使用方法</h2>
<p>基本使用方法如下：</p>
<h3 class="h5 mb-3">导入库</h3>
<pre class="bg-light p-3 rounded"><code>import AwesomeLibrary from 'awesome-library';
// 或者使用 CommonJS
const AwesomeLibrary = require('awesome-library');</code></pre>
<h3 class="h5 mb-3">创建实例</h3>
<pre class="bg-light p-3 rounded"><code>const instance = new AwesomeLibrary({
container: '#my-container',
theme: 'dark',
animation: true
});</code></pre>
<div class="alert alert-warning" role="alert">
<strong>注意：</strong> 确保在 DOM 加载完成后再创建实例。
</div>
</section>
<!-- API 参考部分 -->
<section id="api" class="mb-5">
<h2 class="h3 mb-3">API 参考</h2>
<h3 class="h4 mb-3">构造函数</h3>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>参数</th>
<th>类型</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>container</code></td>
<td><span class="badge bg-primary">string</span></td>
<td><code>null</code></td>
<td>容器元素的选择器</td>
</tr>
<tr>
<td><code>theme</code></td>
<td><span class="badge bg-primary">string</span></td>
<td><code>'light'</code></td>
<td>主题名称：'light' 或 'dark'</td>
</tr>
<tr>
<td><code>animation</code></td>
<td><span class="badge bg-success">boolean</span></td>
<td><code>true</code></td>
<td>是否启用动画效果</td>
</tr>
</tbody>
</table>
</div>
<h3 class="h4 mb-3">方法</h3>
<div class="mb-4">
<h4 class="h5 mb-2"><code>init()</code></h4>
<p>初始化组件。</p>
<p><strong>返回值：</strong> <span class="badge bg-info">void</span></p>
<h5 class="h6 mb-2">示例</h5>
<pre class="bg-light p-3 rounded"><code>instance.init();</code></pre>
</div>
<div class="mb-4">
<h4 class="h5 mb-2"><code>destroy()</code></h4>
<p>销毁组件并清理事件监听器。</p>
<p><strong>返回值：</strong> <span class="badge bg-info">void</span></p>
<h5 class="h6 mb-2">示例</h5>
<pre class="bg-light p-3 rounded"><code>instance.destroy();</code></pre>
</div>
<div class="mb-4">
<h4 class="h5 mb-2"><code>setTheme(theme)</code></h4>
<p>设置组件主题。</p>
<h5 class="h6 mb-2">参数</h5>
<ul>
<li><code>theme</code> <span class="badge bg-primary">string</span> - 主题名称</li>
</ul>
<p><strong>返回值：</strong> <span class="badge bg-success">boolean</span> - 设置是否成功</p>
<h5 class="h6 mb-2">示例</h5>
<pre class="bg-light p-3 rounded"><code>const success = instance.setTheme('dark');
if (success) {
console.log('主题设置成功');
}</code></pre>
</div>
</section>
</main>
</div>
</div>
3. 博客文章列表
<!-- 博客文章列表页面 -->
<div class="container my-5">
<!-- 页面标题 -->
<div class="row mb-5">
<div class="col-12 text-center">
<h1 class="display-4 fw-bold mb-3">技术博客</h1>
<p class="lead text-muted">
分享前端开发的最新技术和最佳实践
</p>
</div>
</div>
<!-- 文章列表 -->
<div class="row g-4">
<!-- 文章卡片 1 -->
<div class="col-12 col-md-6 col-lg-4">
<article class="card h-100">
<img src="https://via.placeholder.com/400x200" class="card-img-top" alt="文章封面">
<div class="card-body d-flex flex-column">
<div class="mb-2">
<span class="badge bg-primary me-2">JavaScript</span>
<span class="badge bg-secondary">ES6</span>
</div>
<h2 class="card-title h5">
<a href="#" class="text-decoration-none text-dark">
深入理解 JavaScript 异步编程
</a>
</h2>
<p class="card-text text-muted flex-grow-1">
从回调函数到 Promise，再到 async/await，
全面解析 JavaScript 异步编程的发展历程和最佳实践。
</p>
<div class="mt-auto">
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<img src="https://via.placeholder.com/32x32" class="rounded-circle me-2" alt="作者头像">
<small class="text-muted">张三</small>
</div>
<small class="text-muted">2023-12-01</small>
</div>
</div>
</div>
</article>
</div>
<!-- 文章卡片 2 -->
<div class="col-12 col-md-6 col-lg-4">
<article class="card h-100">
<img src="https://via.placeholder.com/400x200" class="card-img-top" alt="文章封面">
<div class="card-body d-flex flex-column">
<div class="mb-2">
<span class="badge bg-success me-2">Vue.js</span>
<span class="badge bg-info">组件</span>
</div>
<h2 class="card-title h5">
<a href="#" class="text-decoration-none text-dark">
Vue 3 组合式 API 完全指南
</a>
</h2>
<p class="card-text text-muted flex-grow-1">
详细介绍 Vue 3 组合式 API 的使用方法，
包括 setup 函数、响应式 API 和生命周期钩子。
</p>
<div class="mt-auto">
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<img src="https://via.placeholder.com/32x32" class="rounded-circle me-2" alt="作者头像">
<small class="text-muted">李四</small>
</div>
<small class="text-muted">2023-11-28</small>
</div>
</div>
</div>
</article>
</div>
<!-- 文章卡片 3 -->
<div class="col-12 col-md-6 col-lg-4">
<article class="card h-100">
<img src="https://via.placeholder.com/400x200" class="card-img-top" alt="文章封面">
<div class="card-body d-flex flex-column">
<div class="mb-2">
<span class="badge bg-warning me-2">CSS</span>
<span class="badge bg-dark">Grid</span>
</div>
<h2 class="card-title h5">
<a href="#" class="text-decoration-none text-dark">
CSS Grid 布局实战技巧
</a>
</h2>
<p class="card-text text-muted flex-grow-1">
通过实际案例学习 CSS Grid 布局，
掌握现代网页布局的强大工具。
</p>
<div class="mt-auto">
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<img src="https://via.placeholder.com/32x32" class="rounded-circle me-2" alt="作者头像">
<small class="text-muted">王五</small>
</div>
<small class="text-muted">2023-11-25</small>
</div>
</div>
</div>
</article>
</div>
<!-- 更多文章... -->
<div class="col-12 col-md-6 col-lg-4">
<article class="card h-100">
<img src="https://via.placeholder.com/400x200" class="card-img-top" alt="文章封面">
<div class="card-body d-flex flex-column">
<div class="mb-2">
<span class="badge bg-danger me-2">React</span>
<span class="badge bg-primary">Hooks</span>
</div>
<h2 class="card-title h5">
<a href="#" class="text-decoration-none text-dark">
React Hooks 最佳实践
</a>
</h2>
<p class="card-text text-muted flex-grow-1">
深入探讨 React Hooks 的使用技巧和常见陷阱，
提升 React 应用的性能和可维护性。
</p>
<div class="mt-auto">
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<img src="https://via.placeholder.com/32x32" class="rounded-circle me-2" alt="作者头像">
<small class="text-muted">赵六</small>
</div>
<small class="text-muted">2023-11-22</small>
</div>
</div>
</div>
</article>
</div>
<div class="col-12 col-md-6 col-lg-4">
<article class="card h-100">
<img src="https://via.placeholder.com/400x200" class="card-img-top" alt="文章封面">
<div class="card-body d-flex flex-column">
<div class="mb-2">
<span class="badge bg-info me-2">TypeScript</span>
<span class="badge bg-secondary">类型</span>
</div>
<h2 class="card-title h5">
<a href="#" class="text-decoration-none text-dark">
TypeScript 高级类型系统
</a>
</h2>
<p class="card-text text-muted flex-grow-1">
掌握 TypeScript 的高级类型特性，
包括泛型、条件类型和映射类型。
</p>
<div class="mt-auto">
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<img src="https://via.placeholder.com/32x32" class="rounded-circle me-2" alt="作者头像">
<small class="text-muted">孙七</small>
</div>
<small class="text-muted">2023-11-20</small>
</div>
</div>
</div>
</article>
</div>
<div class="col-12 col-md-6 col-lg-4">
<article class="card h-100">
<img src="https://via.placeholder.com/400x200" class="card-img-top" alt="文章封面">
<div class="card-body d-flex flex-column">
<div class="mb-2">
<span class="badge bg-success me-2">Node.js</span>
<span class="badge bg-warning">性能</span>
</div>
<h2 class="card-title h5">
<a href="#" class="text-decoration-none text-dark">
Node.js 性能优化实战
</a>
</h2>
<p class="card-text text-muted flex-grow-1">
从内存管理到异步优化，
全面提升 Node.js 应用的性能表现。
</p>
<div class="mt-auto">
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<img src="https://via.placeholder.com/32x32" class="rounded-circle me-2" alt="作者头像">
<small class="text-muted">周八</small>
</div>
<small class="text-muted">2023-11-18</small>
</div>
</div>
</div>
</article>
</div>
</div>
<!-- 分页 -->
<nav aria-label="文章分页" class="mt-5">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<span class="page-link">上一页</span>
</li>
<li class="page-item active">
<span class="page-link">1</span>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">下一页</a>
</li>
</ul>
</nav>
</div>
自定义排版样式
1. 自定义 CSS 变量
/* 自定义排版变量 */
:root {
/* 字体系列 */
--bs-font-sans-serif: "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-font-monospace: "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* 字体大小 */
--bs-font-size-base: 1rem;
--bs-font-size-sm: 0.875rem;
--bs-font-size-lg: 1.25rem;
/* 行高 */
--bs-line-height-base: 1.5;
--bs-line-height-sm: 1.25;
--bs-line-height-lg: 2;
/* 字体粗细 */
--bs-font-weight-lighter: lighter;
--bs-font-weight-light: 300;
--bs-font-weight-normal: 400;
--bs-font-weight-medium: 500;
--bs-font-weight-semibold: 600;
--bs-font-weight-bold: 700;
--bs-font-weight-bolder: bolder;
}
/* 自定义标题样式 */
.custom-heading {
font-family: "Georgia", serif;
font-weight: var(--bs-font-weight-light);
line-height: 1.2;
color: var(--bs-gray-800);
}
/* 自定义段落样式 */
.custom-paragraph {
font-size: 1.125rem;
line-height: 1.7;
color: var(--bs-gray-700);
margin-bottom: 1.5rem;
}
/* 自定义引用样式 */
.custom-blockquote {
border-left: 4px solid var(--bs-primary);
padding-left: 1.5rem;
font-style: italic;
font-size: 1.1rem;
color: var(--bs-gray-600);
}
2. 响应式排版
/* 响应式字体大小 */
.responsive-text {
font-size: clamp(1rem, 2.5vw, 1.5rem);
}
.responsive-heading {
font-size: clamp(1.5rem, 4vw, 3rem);
}
/* 媒体查询排版 */
@media (max-width: 768px) {
.mobile-text {
font-size: 0.9rem;
line-height: 1.4;
}
.mobile-heading {
font-size: 1.5rem;
line-height: 1.3;
}
}
@media (min-width: 1200px) {
.desktop-text {
font-size: 1.125rem;
line-height: 1.6;
}
.desktop-heading {
font-size: 2.5rem;
line-height: 1.2;
}
}
3. 主题化排版
/* 深色主题排版 */
[data-bs-theme="dark"] {
--bs-body-color: #e9ecef;
--bs-body-bg: #212529;
--bs-emphasis-color: #ffffff;
--bs-secondary-color: rgba(233, 236, 239, 0.75);
--bs-tertiary-color: rgba(233, 236, 239, 0.5);
}
[data-bs-theme="dark"] .text-emphasis {
color: var(--bs-emphasis-color) !important;
}
[data-bs-theme="dark"] .text-secondary {
color: var(--bs-secondary-color) !important;
}
[data-bs-theme="dark"] .text-tertiary {
color: var(--bs-tertiary-color) !important;
}
/* 自定义主题色彩 */
.theme-warm {
--bs-primary: #d63384;
--bs-secondary: #fd7e14;
--bs-success: #198754;
--bs-info: #0dcaf0;
--bs-warning: #ffc107;
--bs-danger: #dc3545;
}
.theme-cool {
--bs-primary: #0d6efd;
--bs-secondary: #6f42c1;
--bs-success: #20c997;
--bs-info: #17a2b8;
--bs-warning: #fd7e14;
--bs-danger: #e83e8c;
}
可访问性考虑
1. 颜色对比度
<!-- 确保足够的颜色对比度 -->
<div class="bg-dark text-white p-3">
<h3>深色背景上的白色文字</h3>
<p>确保对比度至少为 4.5:1（普通文本）或 3:1（大文本）</p>
</div>
<div class="bg-light text-dark p-3">
<h3>浅色背景上的深色文字</h3>
<p>这种组合通常具有良好的对比度</p>
</div>
<!-- 避免仅依赖颜色传达信息 -->
<p>
<span class="text-success">
<i class="bi bi-check-circle"></i> 成功
</span>
<span class="text-danger">
<i class="bi bi-x-circle"></i> 错误
</span>
</p>
2. 语义化标记
<!-- 使用正确的语义化标签 -->
<article>
<header>
<h1>文章标题</h1>
<p class="text-muted">发布信息</p>
</header>
<section>
<h2>章节标题</h2>
<p>章节内容...</p>
</section>
<aside>
<h3>相关链接</h3>
<ul>
<li><a href="#">链接 1</a></li>
<li><a href="#">链接 2</a></li>
</ul>
</aside>
<footer>
<p>文章标签和分享选项</p>
</footer>
</article>
<!-- 使用 ARIA 标签增强可访问性 -->
<blockquote cite="https://example.com" role="blockquote">
<p>引用内容</p>
<footer>
<cite>引用来源</cite>
</footer>
</blockquote>
3. 焦点管理
/* 自定义焦点样式 */
.custom-focus:focus {
outline: 2px solid var(--bs-primary);
outline-offset: 2px;
box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}
/* 跳过链接 */
.skip-link {
position: absolute;
top: -40px;
left: 6px;
background: var(--bs-primary);
color: white;
padding: 8px;
text-decoration: none;
z-index: 1000;
}
.skip-link:focus {
top: 6px;
}
练习题
基础练习
标题层次练习
- 创建一个包含完整标题层次（h1-h6）的页面
- 使用 display 类创建大标题
- 添加副标题和引导段落
文本样式练习
- 使用各种文本工具类创建丰富的文本样式
- 实现不同的文本对齐方式
- 应用文本颜色和字体粗细
列表和引用练习
- 创建不同类型的列表（有序、无序、描述）
- 实现美观的引用样式
- 使用内联列表创建导航
进阶练习
文章页面排版
- 创建一个完整的文章页面
- 包含标题、段落、列表、引用、代码等元素
- 实现响应式排版
文档页面设计
- 创建一个技术文档页面
- 包含目录、代码示例、API 参考
- 使用表格展示参数信息
自定义排版系统
- 基于 Bootstrap 创建自定义排版样式
- 实现深色主题支持
- 添加自定义字体和颜色方案
本章总结
通过本章学习，我们全面掌握了：
基础排版：标题系统、段落样式和内联文本元素
文本工具类：对齐、换行、变换、大小、粗细等实用工具
颜色系统：语义化颜色、中性颜色和链接颜色的使用
列表和引用：各种列表样式和美观的引用格式
实际应用：文章页面、文档页面和博客列表的完整实现
自定义和扩展：CSS 变量、响应式排版和主题化
可访问性：颜色对比度、语义化标记和焦点管理
Bootstrap 的排版系统为我们提供了强大的文本处理能力，通过合理使用这些工具，我们可以创建出既美观又实用的文本内容。在下一章中，我们将学习 Bootstrap 的颜色系统和主题定制。
