内容排版

排版 Typography

标题

<h1>h1 标题</h1>
<h2>h2 标题</h2>
<h3>h3 标题</h3>

<!-- 使用类控制样式 -->
<p class="h1">用 p 标签显示 h1 样式</p>

<!-- 标题辅助类 -->
<h1 class="display-1">大号标题</h1>
<h1 class="display-6">小号大标题</h1>
<h2 class="lead">引导段落</h2>

行内文本样式

<p>你可以使用 <mark>标记</mark> 高亮文字。</p>
<p><del>删除线</del> 和 <ins>插入文本</ins></p>
<p><strong>加粗</strong> 和 <em>斜体</em></p>
<p><small>小号文字</small></p>
<p><code>内联代码</code></p>
<p><kbd>Ctrl + C</kbd> 键盘快捷键</p>

引用 Blockquote

<figure>
    <blockquote class="blockquote">
        <p>行胜于言。</p>
    </blockquote>
    <figcaption class="blockquote-footer">
        清华大学校风
    </figcaption>
</figure>

列表

<!-- 无样式列表 -->
<ul class="list-unstyled">
    <li>项目一</li>
    <li>项目二</li>
</ul>

<!-- 行内列表 -->
<ul class="list-inline">
    <li class="list-inline-item">关于</li>
    <li class="list-inline-item">联系</li>
</ul>

图片 Images

<!-- 响应式图片 -->
<img src="..." class="img-fluid" alt="响应式图片">

<!-- 缩略图样式 -->
<img src="..." class="img-thumbnail" alt="缩略图">

<!-- 图片对齐 -->
<img src="..." class="rounded float-start" alt="左浮动">
<img src="..." class="rounded float-end" alt="右浮动">

<!-- 图片替代文字 -->
<figure class="figure">
    <img src="..." class="figure-img img-fluid rounded" alt="...">
    <figcaption class="figure-caption">图片说明文字</figcaption>
</figure>

表格 Tables

<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">姓名</th>
            <th scope="col">分数</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>张三</td>
            <td>95</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>李四</td>
            <td>88</td>
        </tr>
    </tbody>
</table>

表格修饰类：

<table class="table table-striped">     <!-- 条纹 -->
<table class="table table-bordered">    <!-- 边框 -->
<table class="table table-hover">      <!-- 悬停高亮 -->
<table class="table table-sm">         <!-- 紧凑 -->
<table class="table table-dark">       <!-- 深色 -->

表格更多选项

结合使用多个表格类，以及响应式表格容器：

<!-- 条纹 + 悬停 + 边框 + 深色 -->
<table class="table table-striped table-hover table-bordered table-dark">
    ...
</table>

<!-- 表格行颜色 -->
<table class="table">
    <tr class="table-primary"><td>主要行</td></tr>
    <tr class="table-success"><td>成功行</td></tr>
    <tr class="table-danger"><td>危险行</td></tr>
    <tr class="table-warning"><td>警告行</td></tr>
    <tr class="table-info"><td>信息行</td></tr>
</table>

<!-- 响应式表格（水平滚动） -->
<div class="table-responsive">
    <table class="table">
        <!-- 内容较宽时自动产生水平滚动条 -->
    </table>
</div>

图片与图形 Figures

响应式图片

<!-- img-fluid 保证图片不超过父容器宽度 -->
<img src="..." class="img-fluid" alt="响应式图片">

<!-- 缩略图样式 -->
<img src="..." class="img-thumbnail" alt="缩略图">

<!-- 图片对齐 -->
<img src="..." class="rounded float-start" alt="左浮动">
<img src="..." class="rounded float-end" alt="右浮动">

<!-- 图片替代文字 -->
<figure class="figure">
    <img src="..." class="figure-img img-fluid rounded" alt="...">
    <figcaption class="figure-caption">图片说明文字</figcaption>
</figure>

对齐与浮动

<!-- 图片使用 flexbox 居中 -->
<div class="d-flex justify-content-center">
    <img src="..." class="img-fluid" alt="居中图片">
</div>

<!-- 使用 text-center 居中行内图片 -->
<p class="text-center">
    <img src="..." alt="居中行内图片">
</p>

代码样式

Bootstrap 为不同代码元素提供了精细的样式：

<p><code>内联代码</code> 适合在段落中引用</p>

<p>按 <kbd>Ctrl + S</kbd> 保存文件</p>

<p><var>变量名</var> 使用 var 元素显示</p>

<p><samp>程序输出示例</samp> 使用 samp 元素</p>

<!-- 代码块 -->
<pre><code>function hello() {
    console.log("Hello Bootstrap!");
}
</code></pre>

描述列表

<dl class="row">
    <dt class="col-sm-3">术语 1</dt>
    <dd class="col-sm-9">定义描述内容，使用网格布局并排显示</dd>

    <dt class="col-sm-3 text-truncate">较长的术语会被截断</dt>
    <dd class="col-sm-9">通过 text-truncate 类可以控制术语宽度</dd>
</dl>

引用更多选项

<!-- 居中引用 -->
<figure class="text-center">
    <blockquote class="blockquote">
        <p>知识就是力量。</p>
    </blockquote>
    <figcaption class="blockquote-footer">
        弗朗西斯·培根
    </figcaption>
</figure>

<!-- 右对齐引用 -->
<figure class="text-end">
    <blockquote class="blockquote">
        <p>简洁是终极的精致。</p>
    </blockquote>
</figure>

最佳实践

• 使用 class="lead" 突出文章的首段或主题段落
• 使用 display-1 到 display-6 创建视觉突出的页面标题
• 使用 .table-responsive 包裹宽表格，防止在小屏幕上溢出
• 为所有 <img> 添加描述性的 alt 属性，提升可访问性
• 使用 .img-fluid 让图片自适应容器宽度

常见问题