Bootstrap 排版 #

Bootstrap 提供了一套完整的排版系统，包括标题、段落、列表、文本样式等，帮助你创建美观、一致的文本内容。

全局设置 #

基础字体 #

Bootstrap 使用以下默认字体设置：

scss

$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, 
  "Helvetica Neue", Arial, "Noto Sans", sans-serif, 
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", 
  "Noto Color Emoji";
$font-size-base: 1rem; // 16px
$line-height-base: 1.5;
$body-color: #212529;

全局样式 #

Bootstrap 对全局进行了以下设置：

<body> 设置了 font-family、font-size、line-height 和 color
使用 $body-bg 设置背景色（默认为 #fff）
使用 CSS 自定义属性（CSS 变量）管理样式

标题 #

HTML 标题标签 #

Bootstrap 定义了从 <h1> 到 <h6> 的标题样式：

html

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

标题	字体大小
h1	2.5rem (40px)
h2	2rem (32px)
h3	1.75rem (28px)
h4	1.5rem (24px)
h5	1.25rem (20px)
h6	1rem (16px)

`.h*` 类 #

使用 .h1 到 .h6 类可以让其他元素呈现标题样式：

html

<p class="h1">段落呈现为一级标题样式</p>
<p class="h2">段落呈现为二级标题样式</p>

自定义标题 #

副标题 #

使用 <small> 或 .small 类创建副标题：

html

<h1>主标题 <small class="text-muted">副标题</small></h1>
<h2>主标题 <small class="text-muted">副标题</small></h2>

标题工具类 #

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>

类名	字体大小
`.display-1`	5rem (80px)
`.display-2`	4.5rem (72px)
`.display-3`	4rem (64px)
`.display-4`	3.5rem (56px)
`.display-5`	3rem (48px)
`.display-6`	2.5rem (40px)

段落 #

基本段落 #

html

<p>这是一个标准的段落。Bootstrap 设置了合理的行高和边距，使文本更易阅读。</p>

引导段落 #

使用 .lead 类突出显示段落：

html

<p class="lead">
  这是一个引导段落，用于突出显示重要内容。字体更大、更轻，适合作为文章的开篇。
</p>

内联文本元素 #

html

<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>

文本样式类 #

html

<!-- 文本装饰 -->
<p class="text-decoration-none">无装饰文本</p>
<p class="text-decoration-underline">下划线文本</p>
<p class="text-decoration-line-through">删除线文本</p>

<!-- 文本大小写 -->
<p class="text-lowercase">LOWERCASE TEXT</p>
<p class="text-uppercase">uppercase text</p>
<p class="text-capitalize">capitalized text</p>

<!-- 字体粗细 -->
<p class="fw-bold">加粗文本</p>
<p class="fw-bolder">更粗文本</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>

文本对齐 #

水平对齐 #

html

<p class="text-start">左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-end">右对齐文本</p>

响应式对齐 #

html

<p class="text-start text-md-center text-lg-end">
  在手机上左对齐，平板居中，桌面右对齐
</p>

断点	类名
全部	`.text-start` `.text-center` `.text-end`
sm	`.text-sm-start` `.text-sm-center` `.text-sm-end`
md	`.text-md-start` `.text-md-center` `.text-md-end`
lg	`.text-lg-start` `.text-lg-center` `.text-lg-end`
xl	`.text-xl-start` `.text-xl-center` `.text-xl-end`
xxl	`.text-xxl-start` `.text-xxl-center` `.text-xxl-end`

文本换行 #

html

<!-- 强制换行 -->
<p class="text-wrap">这段文本会自动换行，即使内容很长也会正常显示。</p>

<!-- 禁止换行 -->
<p class="text-nowrap">这段文本不会换行，会一直延伸到容器之外。</p>

<!-- 文本截断 -->
<p class="text-truncate" style="max-width: 200px;">
  这是一段很长的文本，会被截断并显示省略号。
</p>

文字方向 #

html

<p class="text-break">
  这是一段非常长的单词或URL，会被强制断行：https://www.example.com/very/long/path/to/somewhere
</p>

列表 #

无序列表 #

html

<ul>
  <li>列表项一</li>
  <li>列表项二</li>
  <li>列表项三</li>
</ul>

有序列表 #

html

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

无样式列表 #

使用 .list-unstyled 移除默认样式：

html

<ul class="list-unstyled">
  <li>无样式的列表项</li>
  <li>没有项目符号</li>
  <li>没有左边距</li>
</ul>

内联列表 #

使用 .list-inline 创建水平列表：

html

<ul class="list-inline">
  <li class="list-inline-item">首页</li>
  <li class="list-inline-item">产品</li>
  <li class="list-inline-item">关于</li>
  <li class="list-inline-item">联系</li>
</ul>

定义列表 #

html

<dl>
  <dt>术语一</dt>
  <dd>术语一的详细描述。</dd>
  <dt>术语二</dt>
  <dd>术语二的详细描述。</dd>
</dl>

水平定义列表：

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">术语二的详细描述。</dd>
</dl>

引用 #

基本引用 #

html

<blockquote class="blockquote">
  <p>这是一段引用文本，用于展示他人的话语或重要内容。</p>
</blockquote>

引用来源 #

html

<blockquote class="blockquote">
  <p>这是一段引用文本。</p>
  <footer class="blockquote-footer">
    引用来源 <cite title="来源标题">作者名</cite>
  </footer>
</blockquote>

对齐方式 #

html

<!-- 左对齐（默认） -->
<blockquote class="blockquote">
  <p>左对齐的引用文本。</p>
</blockquote>

<!-- 居中对齐 -->
<blockquote class="blockquote text-center">
  <p>居中对齐的引用文本。</p>
</blockquote>

<!-- 右对齐 -->
<blockquote class="blockquote text-end">
  <p>右对齐的引用文本。</p>
</blockquote>

代码 #

内联代码 #

使用 <code> 标签：

html

<p>使用 <code>&lt;code&gt;</code> 标签显示内联代码。</p>

代码块 #

使用 <pre> 标签：

html

<pre><code>&lt;p&gt;这是一段代码示例&lt;/p&gt;
&lt;div class="container"&gt;
  内容
&lt;/div&gt;</code></pre>

变量 #

使用 <var> 标签：

html

<p>变量 <var>y</var> 等于 <var>x</var> 加 <var>z</var>。</p>

用户输入 #

使用 <kbd> 标签：

html

<p>按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制内容。</p>

样本输出 #

使用 <samp> 标签：

html

<p>程序输出：<samp>Hello, World!</samp></p>

图片 #

响应式图片 #

使用 .img-fluid 类让图片自适应：

html

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

图片缩略图 #

使用 .img-thumbnail 类：

html

<img src="image.jpg" class="img-thumbnail" alt="缩略图">

图片对齐 #

html

<div class="clearfix">
  <img src="image.jpg" class="rounded float-start" alt="左浮动图片">
  <img src="image.jpg" class="rounded float-end" alt="右浮动图片">
</div>

<!-- 居中图片 -->
<img src="image.jpg" class="rounded mx-auto d-block" alt="居中图片">

图片形状 #

html

<img src="image.jpg" class="rounded" alt="圆角图片">
<img src="image.jpg" class="rounded-circle" alt="圆形图片">
<img src="image.jpg" class="img-thumbnail" alt="缩略图">

表格 #

基本表格 #

html

<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>zhangsan@example.com</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>李四</td>
      <td>lisi@example.com</td>
    </tr>
  </tbody>
</table>

表格样式 #

html

<!-- 条纹表格 -->
<table class="table table-striped">...</table>

<!-- 带边框表格 -->
<table class="table table-bordered">...</table>

<!-- 无边框表格 -->
<table class="table table-borderless">...</table>

<!-- 悬停效果 -->
<table class="table table-hover">...</table>

<!-- 紧凑表格 -->
<table class="table table-sm">...</table>

表格颜色 #

html

<!-- 表格背景色 -->
<table class="table table-primary">...</table>
<table class="table table-secondary">...</table>
<table class="table table-success">...</table>
<table class="table table-danger">...</table>
<table class="table table-warning">...</table>
<table class="table table-info">...</table>

<!-- 行颜色 -->
<tr class="table-primary">...</tr>
<tr class="table-success">...</tr>

<!-- 单元格颜色 -->
<td class="table-danger">...</td>

响应式表格 #

html

<div class="table-responsive">
  <table class="table">...</table>
</div>

响应式断点：

html

<div class="table-responsive-sm">...</div>
<div class="table-responsive-md">...</div>
<div class="table-responsive-lg">...</div>
<div class="table-responsive-xl">...</div>
<div class="table-responsive-xxl">...</div>

图形 #

Figure #

html

<figure class="figure">
  <img src="image.jpg" class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">图片说明文字。</figcaption>
</figure>

Figure 对齐 #

html

<figure class="figure">
  <img src="image.jpg" class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-end">右对齐的说明文字。</figcaption>
</figure>

字体大小 #

相对字体大小 #

html

<p class="fs-1">.fs-1 字体大小</p>
<p class="fs-2">.fs-2 字体大小</p>
<p class="fs-3">.fs-3 字体大小</p>
<p class="fs-4">.fs-4 字体大小</p>
<p class="fs-5">.fs-5 字体大小</p>
<p class="fs-6">.fs-6 字体大小</p>

类名	字体大小
`.fs-1`	2.5rem (40px)
`.fs-2`	2rem (32px)
`.fs-3`	1.75rem (28px)
`.fs-4`	1.5rem (24px)
`.fs-5`	1.25rem (20px)
`.fs-6`	1rem (16px)

行高 #

html

<p class="lh-1">行高为 1，较紧凑。适合标题等短文本。</p>
<p class="lh-sm">行高较小，适合一般文本。</p>
<p class="lh-base">默认行高，适合大多数情况。</p>
<p class="lh-lg">行高较大，适合长段落阅读。</p>

字间距 #

html

<p class="lh-1">行高为 1，较紧凑。适合标题等短文本。</p>
<p class="lh-sm">行高较小，适合一般文本。</p>
<p class="lh-base">默认行高，适合大多数情况。</p>
<p class="lh-lg">行高较大，适合长段落阅读。</p>

单词间距 #

html

<p class="word-spacing-normal">正常单词间距</p>
<p class="word-spacing-1">单词间距 0.25rem</p>
<p class="word-spacing-2">单词间距 0.5rem</p>

实战案例 #

文章排版 #

html

<article>
  <h1 class="display-4 mb-4">文章标题</h1>
  <p class="lead">
    这是文章的引导段落，用于吸引读者的注意力。
  </p>
  <p>
    正文内容，可以使用各种排版元素来丰富文章的表现形式。
  </p>
  <h2>小节标题</h2>
  <p>小节内容...</p>
  <blockquote class="blockquote my-4">
    <p>引用内容，用于强调重要观点。</p>
    <footer class="blockquote-footer">引用来源</footer>
  </blockquote>
  <h3>列表展示</h3>
  <ul>
    <li>列表项一</li>
    <li>列表项二</li>
    <li>列表项三</li>
  </ul>
</article>

产品描述 #

html

<div class="product-description">
  <h2 class="h4 mb-3">产品特点</h2>
  <ul class="list-unstyled">
    <li class="mb-2">
      <strong>高质量材料</strong>
      <p class="text-muted mb-0">采用优质原材料，确保产品耐用性。</p>
    </li>
    <li class="mb-2">
      <strong>精美设计</strong>
      <p class="text-muted mb-0">简约现代的设计风格，适合各种场景。</p>
    </li>
  </ul>
</div>

代码展示 #

html

<div class="code-example">
  <h5 class="mb-3">示例代码</h5>
  <pre class="bg-light p-3 rounded"><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
    &lt;div class="col"&gt;列内容&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>

最佳实践 #

1. 语义化标签 #

html

<!-- 推荐 -->
<article>
  <h1>标题</h1>
  <p>段落</p>
</article>

<!-- 不推荐 -->
<div class="article">
  <div class="h1">标题</div>
  <div>段落</div>
</div>

2. 合理的层级 #

html

<!-- 推荐：层级清晰 -->
<h1>主标题</h1>
<h2>章节标题</h2>
<h3>小节标题</h3>

<!-- 不推荐：跳级 -->
<h1>主标题</h1>
<h3>跳过了 h2</h3>

3. 适当的行高 #

html

<!-- 长段落使用较大行高 -->
<p class="lh-lg">这是一段较长的文本内容，使用较大的行高可以提高阅读体验...</p>

<!-- 短文本使用紧凑行高 -->
<h1 class="lh-1">短标题</h1>

下一步 #

现在你已经掌握了 Bootstrap 的排版系统，接下来学习颜色系统，了解如何使用颜色美化页面！

Bootstrap 排版 #

全局设置 #

基础字体 #

全局样式 #

标题 #

HTML 标题标签 #

.h* 类 #

自定义标题 #

副标题 #

标题工具类 #

段落 #

基本段落 #

引导段落 #

内联文本元素 #

文本样式类 #

文本对齐 #

水平对齐 #

响应式对齐 #

文本换行 #

文字方向 #

列表 #

无序列表 #

有序列表 #

无样式列表 #

内联列表 #

定义列表 #

引用 #

基本引用 #

引用来源 #

对齐方式 #

代码 #

内联代码 #

代码块 #

变量 #

用户输入 #

样本输出 #

图片 #

响应式图片 #

图片缩略图 #

图片对齐 #

图片形状 #

表格 #

基本表格 #

表格样式 #

表格颜色 #

响应式表格 #

图形 #

Figure #

Figure 对齐 #

字体大小 #

相对字体大小 #

行高 #

字间距 #

单词间距 #

实战案例 #

文章排版 #

产品描述 #

代码展示 #

最佳实践 #

1. 语义化标签 #

2. 合理的层级 #

3. 适当的行高 #

下一步 #

`.h*` 类 #