良好的排版是优秀用户体验的基础。Bootstrap 4 提供了一套完整的排版工具,包括标题、段落、列表、文本样式等,帮助您创建清晰、美观的文本内容。
Bootstrap 4 提供了标准的 HTML 标题样式,从 <h1> 到 <h6>。
<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 类创建副标题:
<h3>
Bootstrap 主标题
<small class="text-muted">副标题文本</small>
</h3>
当需要比普通标题更突出的标题时,可以使用显示标题类 .display-1 到 .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 提供了有序列表、无序列表和无样式列表。
<!-- 无序列表 -->
<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 类移除列表的默认样式:
<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 类创建水平排列的列表:
<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 提供了一系列文本颜色类,用于传达不同的语义含义。
<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>
恭喜!您已经学习了Bootstrap 4排版系统的核心概念和功能。良好的排版是创建优秀用户体验的关键,掌握这些技巧将帮助您创建清晰、美观的文本内容。
继续学习下一章:Bootstrap 4 颜色与工具类