内容与排版

掌握Bootstrap的文本样式、图像和表格

全站首页 频道首页

Bootstrap内容与排版概述

Bootstrap提供了一套完整的排版系统，包括标题、段落、列表、表格和图像等内容的样式控制。

设计原则： Bootstrap的排版系统基于现代设计原则，提供清晰的视觉层次和良好的可读性。

排版系统的重要性

良好的排版不仅影响网站的美观度，还直接关系到用户体验和内容可读性。Bootstrap的排版系统基于以下原则：

  • 层次分明 - 通过不同的标题级别建立清晰的视觉层次
  • 响应式 - 在不同屏幕尺寸下保持可读性
  • 一致性 - 在整个网站中保持一致的字体和间距
  • 可访问性 - 确保内容对所有用户都可访问

标题与段落

HTML标题

Bootstrap对所有HTML标题（h1到h6）进行了样式重置。

h1. Bootstrap 标题

h2. Bootstrap 标题

h3. Bootstrap 标题

h4. Bootstrap 标题

h5. Bootstrap 标题
h6. Bootstrap 标题
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>

标题类

使用.h1到.h6类可以让非标题元素看起来像标题。

h1. Bootstrap 标题

h2. Bootstrap 标题

h3. Bootstrap 标题

h4. Bootstrap 标题

h5. Bootstrap 标题

h6. Bootstrap 标题

标题类代码 
<p class="h1">h1. Bootstrap 标题</p>
<p class="h2">h2. Bootstrap 标题</p>
<p class="h3">h3. Bootstrap 标题</p>
<p class="h4">h4. Bootstrap 标题</p>
<p class="h5">h5. Bootstrap 标题</p>
<p class="h6">h6. Bootstrap 标题</p>

显示标题

使用.display-1到.display-6类可以创建更大的标题样式。

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

显示标题代码 
<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>

段落样式

Bootstrap提供了几种特殊的段落样式。

这是一个普通段落。

这是一个引导段落，用于突出显示重要内容。

这是一个被弱化的段落。

段落样式代码 
<p>这是一个普通段落。</p>
<p class="lead">这是一个引导段落，用于突出显示重要内容。</p>
<p class="text-muted">这是一个被弱化的段落。</p>

内联文本元素

文本标记

你可以使用标记来高亮文本。

此行文本被视为已删除。

此行文本被视为不再准确。

此行文本被视为添加到文档中。

此行文本将呈现为下划线。

此行文本被视为细印刷。

此行文本呈现为粗体。

此行文本呈现为斜体。

内联文本元素代码 
<p>你可以使用<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>

缩写

attr

HTML

缩写代码 
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

引用

设计不仅仅是外观，设计是如何运作。

史蒂夫·乔布斯
引用代码 
<blockquote class="blockquote">
    <p>设计不仅仅是外观，设计是如何运作。</p>
    <footer class="blockquote-footer">史蒂夫·乔布斯</footer>
</blockquote>

列表

无序列表

  • 列表项 1
  • 列表项 2
  • 列表项 3
    • 嵌套列表项 1
    • 嵌套列表项 2
无序列表代码 
<ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3
        <ul>
            <li>嵌套列表项 1</li>
            <li>嵌套列表项 2</li>
        </ul>
    </li>
</ul>

有序列表

  1. 列表项 1
  2. 列表项 2
  3. 列表项 3
有序列表代码 
<ol>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
</ol>

无样式列表

  • 列表项 1
  • 列表项 2
  • 列表项 3
    • 嵌套列表项 1
    • 嵌套列表项 2
无样式列表代码 
<ul class="list-unstyled">
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3
        <ul>
            <li>嵌套列表项 1</li>
            <li>嵌套列表项 2</li>
        </ul>
    </li>
</ul>

内联列表

  • 列表项 1
  • 列表项 2
  • 列表项 3
内联列表代码 
<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>

图像

响应式图像

响应式图像示例
响应式图像代码 
<img src="..." class="img-fluid" alt="响应式图像">

图像缩略图

图像缩略图示例
图像缩略图代码 
<img src="..." class="img-thumbnail" alt="图像缩略图">

表格

基本表格

# 姓名 邮箱 角色
1 张三 zhangsan@example.com 管理员
2 李四 lisi@example.com 编辑
3 王五 wangwu@example.com 用户
基本表格代码 
<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">姓名</th>
            <th scope="col">邮箱</th>
            <th scope="col">角色</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>张三</td>
            <td>zhangsan@example.com</td>
            <td>管理员</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>李四</td>
            <td>lisi@example.com</td>
            <td>编辑</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>王五</td>
            <td>wangwu@example.com</td>
            <td>用户</td>
        </tr>
    </tbody>
</table>

条纹表格

# 姓名 邮箱 角色
1 张三 zhangsan@example.com 管理员
2 李四 lisi@example.com 编辑
3 王五 wangwu@example.com 用户
条纹表格代码 
<table class="table table-striped">
    ...表格内容...
</table>

带边框表格

# 姓名 邮箱 角色
1 张三 zhangsan@example.com 管理员
2 李四 lisi@example.com 编辑
3 王五 wangwu@example.com 用户
带边框表格代码 
<table class="table table-bordered">
    ...表格内容...
</table>

悬停表格

# 姓名 邮箱 角色
1 张三 zhangsan@example.com 管理员
2 李四 lisi@example.com 编辑
3 王五 wangwu@example.com 用户
悬停表格代码 
<table class="table table-hover">
    ...表格内容...
</table>

代码

内联代码

例如，<section>应该被包裹为内联。

内联代码 
<p>例如，<code>&lt;section&gt;</code>应该被包裹为内联。</p>

代码块

<p>示例文本...</p>
<p>另一行示例文本...</p>
代码块 
<pre><code>&lt;p&gt;示例文本...&lt;/p&gt;
&lt;p&gt;另一行示例文本...&lt;/p&gt;</code></pre>

Bootstrap排版最佳实践

语义化标签使用

使用正确的HTML语义化标签不仅有助于SEO，还能提高可访问性：

  • 使用<h1>到<h6>建立清晰的文档结构
  • 使用<p>标签包裹段落文本
  • 使用<blockquote>标记引用内容
  • 使用<code>和<pre>展示代码
  • 使用<abbr>标记缩写词

响应式排版技巧

Bootstrap提供了多种响应式排版工具：

  • 使用.text-sm-center等类控制文本在不同断点的对齐方式
  • 使用.display-*类创建响应式标题
  • 使用.lead类突出重要段落
  • 使用.text-truncate处理长文本溢出

可访问性考虑

确保内容对所有用户都可访问：

  • 为所有图像提供alt属性
  • 为表格添加scope属性
  • 使用语义化标签而非仅依赖样式类
  • 确保颜色对比度符合WCAG标准

实践练习

创建内容丰富的页面

尝试创建一个包含各种内容元素的页面：

内容练习 
<!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.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-5">
        <h1 class="display-4 text-center">Bootstrap内容示例</h1>
        <p class="lead text-center">这是一个展示Bootstrap内容与排版的页面</p>
        
        <div class="row mt-5">
            <div class="col-md-6">
                <h2>文本样式</h2>
                <p>这是一个<mark>高亮</mark>的文本示例。</p>
                <p><strong>粗体文本</strong>和<em>斜体文本</em>。</p>
                
                <h3>列表</h3>
                <ul class="list-unstyled">
                    <li>列表项 1</li>
                    <li>列表项 2</li>
                    <li>列表项 3</li>
                </ul>
            </div>
            
            <div class="col-md-6">
                <h2>表格</h2>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>产品</th>
                            <th>价格</th>
                            <th>库存</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>产品 A</td>
                            <td>¥100</td>
                            <td>10</td>
                        </tr>
                        <tr>
                            <td>产品 B</td>
                            <td>¥200</td>
                            <td>5</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

下一步学习

现在你已经了解了Bootstrap的内容与排版系统，下一步可以学习：

1

网格系统

掌握Bootstrap强大的网格布局

继续学习
2

组件系统

学习使用丰富的UI组件

继续学习
3

工具类

掌握Bootstrap强大的工具类系统

继续学习