Bootstrap4 文字排版

排版系统的重要性

良好的排版是优秀用户体验的基础。Bootstrap 4 提供了一套完整的排版工具,包括标题、段落、列表、文本样式等,帮助您创建清晰、美观的文本内容。

标题样式

Bootstrap 4 提供了标准的 HTML 标题样式,从 <h1><h6>

基本标题

h1. Bootstrap 标题

h2. Bootstrap 标题

h3. Bootstrap 标题

h4. Bootstrap 标题

h5. Bootstrap 标题
h6. Bootstrap 标题
<h1>h1. Bootstrap 标题</h1>
<h2>h2. Bootstrap 标题</h2>
<h3>h3. Bootstrap 标题</h3>
<h4>h4. Bootstrap 标题</h4>
<h5>h5. Bootstrap 标题</h5>
<h6>h6. Bootstrap 标题</h6>
副标题

使用 .text-muted 类创建副标题:

Bootstrap 主标题 副标题文本

<h3>
  Bootstrap 主标题
  <small class="text-muted">副标题文本</small>
</h3>
显示标题

当需要比普通标题更突出的标题时,可以使用显示标题类 .display-1.display-4

Display 1

Display 2

Display 3

Display 4

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

段落和文本样式

Bootstrap 4 提供了多种文本样式类,用于增强文本的可读性和视觉效果。

段落样式

这是一个引导段落,使用 .lead 类使其在段落中脱颖而出。

这是一个普通段落。Bootstrap 4 的默认字体大小为 1rem(通常是 16px),行高为 1.5。

加粗文本。

正常权重文本。

轻权重文本。

斜体文本。

<p class="lead">
  这是一个引导段落,使用 .lead 类使其在段落中脱颖而出。
</p>
<p>这是一个普通段落。</p>
<p class="font-weight-bold">加粗文本。</p>
<p class="font-weight-normal">正常权重文本。</p>
<p class="font-weight-light">轻权重文本。</p>
<p class="font-italic">斜体文本。</p>
文本转换

小写文本 (Lowercased Text)。

大写文本 (Uppercased Text)。

首字母大写文本 (capitalized text)。

<p class="text-lowercase">小写文本 (Lowercased Text)。</p>
<p class="text-uppercase">大写文本 (Uppercased Text)。</p>
<p class="text-capitalize">首字母大写文本 (capitalized text)。</p>
文本装饰

这段文本有下划线。

这段文本有删除线。

这个链接没有下划线。
<p class="text-decoration-underline">这段文本有下划线。</p>
<p class="text-decoration-line-through">这段文本有删除线。</p>
<a href="#" class="text-decoration-none">这个链接没有下划线。</a>

列表样式

Bootstrap 4 提供了有序列表、无序列表和无样式列表。

基本列表
无序列表
  • 列表项 1
  • 列表项 2
  • 列表项 3
  • 列表项 4
有序列表
  1. 列表项 1
  2. 列表项 2
  3. 列表项 3
  4. 列表项 4
<!-- 无序列表 -->
<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
  <li>列表项 4</li>
</ul>

<!-- 有序列表 -->
<ol>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
  <li>列表项 4</li>
</ol>
无样式列表

使用 .list-unstyled 类移除列表的默认样式:

  • 列表项 1
  • 列表项 2
  • 列表项 3
    • 嵌套列表项 1
    • 嵌套列表项 2
  • 列表项 4
<ul class="list-unstyled">
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3
    <ul>
      <li>嵌套列表项 1</li>
      <li>嵌套列表项 2</li>
    </ul>
  </li>
  <li>列表项 4</li>
</ul>
内联列表

使用 .list-inline.list-inline-item 类创建水平排列的列表:

  • 列表项 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>

文本对齐

Bootstrap 4 提供了多种文本对齐类,用于控制文本的水平对齐方式。

对齐方式

左对齐文本 (默认)

居中对齐文本

右对齐文本

<p class="text-left">左对齐文本 (默认)</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">右对齐文本</p>
响应式文本对齐

Bootstrap 4 还提供了响应式文本对齐类,可以在不同屏幕尺寸下应用不同的对齐方式:

<p class="text-sm-left">在小屏幕及以上左对齐</p>
<p class="text-md-center">在中等屏幕及以上居中对齐</p>
<p class="text-lg-right">在大屏幕及以上右对齐</p>
<p class="text-xl-center">在超大屏幕及以上居中对齐</p>

文本颜色

Bootstrap 4 提供了一系列文本颜色类,用于传达不同的语义含义。

语义文本颜色
.text-primary - 主要文本
.text-secondary - 次要文本
.text-success - 成功文本
.text-danger - 危险文本
.text-warning - 警告文本
.text-info - 信息文本
.text-light - 浅色文本(需要深色背景)
.text-dark - 深色文本
.text-muted - 减弱文本
.text-white - 白色文本(需要深色背景)
<p class="text-primary">.text-primary - 主要文本</p>
<p class="text-secondary">.text-secondary - 次要文本</p>
<p class="text-success">.text-success - 成功文本</p>
<p class="text-danger">.text-danger - 危险文本</p>
<p class="text-warning">.text-warning - 警告文本</p>
<p class="text-info">.text-info - 信息文本</p>
<p class="text-light bg-dark">.text-light - 浅色文本</p>
<p class="text-dark">.text-dark - 深色文本</p>
<p class="text-muted">.text-muted - 减弱文本</p>
<p class="text-white bg-dark">.text-white - 白色文本</p>

文本换行和溢出

Bootstrap 4 提供了控制文本换行和溢出的工具类。

文本换行和溢出

.text-wrap - 正常换行(默认)

这是一段很长的文本,会正常换行显示。

.text-nowrap - 防止文本换行

这是一段很长的文本,不会换行显示。

.text-truncate - 文本溢出时显示省略号

这是一段很长的文本,溢出时会显示省略号。
<!-- 正常换行 -->
<div class="text-wrap" style="width: 150px;">
  这是一段很长的文本,会正常换行显示。
</div>

<!-- 防止换行 -->
<div class="text-nowrap" style="width: 150px;">
  这是一段很长的文本,不会换行显示。
</div>

<!-- 文本溢出省略 -->
<div class="text-truncate" style="width: 150px;">
  这是一段很长的文本,溢出时会显示省略号。
</div>

最佳实践

排版使用建议
  • 使用语义化的 HTML 标签(如 h1-h6 表示标题)
  • 保持一致的标题层次结构
  • 使用 .lead 类突出重要段落
  • 合理使用文本颜色传达语义含义
  • 在移动设备上考虑文本对齐和换行
  • 使用响应式文本对齐类优化不同屏幕的显示效果
  • 避免过度使用文本样式,保持页面整洁

掌握排版系统!

恭喜!您已经学习了Bootstrap 4排版系统的核心概念和功能。良好的排版是创建优秀用户体验的关键,掌握这些技巧将帮助您创建清晰、美观的文本内容。

继续学习下一章:Bootstrap 4 颜色与工具类