Bootstrap5 文字排版

以下是关于 Bootstrap 5 文字排版（Typography） 的详细指南，包含目录、内部锚链接、出站链接和参考资料。我将从基本概念、使用方法到高级功能逐一讲解，帮助您快速掌握 Bootstrap 5 中的文字排版工具。

Bootstrap 5 文字排版（Typography）指南

什么是 Typography

Typography 是 Bootstrap 5 提供的一套工具，用于控制文本的样式和排版。它通过类增强 HTML 元素的显示效果，包括标题、段落、列表、对齐方式等，旨在提供一致且美观的文字布局。

出站链接：查看 Bootstrap 5 Typography 官方文档。

基本使用

HTML 结构

Typography 通过在 HTML 标签上添加类实现，无需额外 CSS。

基本示例

以下是一个简单的文字排版示例：

<h1>一级标题</h1>
<p class="lead">这是一个突出显示的段落。</p>

<h1>：默认标题样式。
.lead：突出段落样式。

高级用法

标题样式

Bootstrap 支持 <h1> 到 <h6>，并提供类（如 .h1 到 .h6）模拟标题样式。

示例代码：

<h1>一级标题</h1>
<h2>二级标题</h2>
<p class="h3">这是一个段落，使用 h3 样式</p>

显示标题

使用 .display-* 类创建更大、更显眼的标题。

示例代码：

<h1 class="display-1">Display 1</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-6">Display 6</h1>

.display-1 到 .display-6：从最大到较小。

段落样式

通过 .lead 突出段落，或使用其他类调整样式。

示例代码：

<p class="lead">这是一个突出段落。</p>
<p class="text-muted">这是一个淡化段落。</p>

.text-muted：淡化文字颜色。

文本对齐

使用 .text-* 类调整对齐方式。

示例代码：

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

支持响应式变体，如 .text-md-center（中屏及以上居中）。

文本大小与粗细

通过工具类控制字体大小和粗细。

示例代码：

<p class="fs-1">字体大小 1</p>
<p class="fs-6">字体大小 6</p>
<p class="fw-bold">粗体</p>
<p class="fw-light">细体</p>

.fs-1 到 .fs-6：字体大小从大到小。
.fw-bold、.fw-light：调整字体粗细。

文本颜色

使用 .text-* 类设置颜色。

示例代码：

<p class="text-primary">主要颜色</p>
<p class="text-success">成功颜色</p>
<p class="text-danger">危险颜色</p>

支持所有主题颜色（如 primary、success）。

列表样式

调整列表的外观。

示例代码：

<ul class="list-unstyled">
  <li>无样式列表项 1</li>
  <li>无样式列表项 2</li>
</ul>

<ul class="list-inline">
  <li class="list-inline-item">内联项 1</li>
  <li class="list-inline-item">内联项 2</li>
</ul>

.list-unstyled：移除默认列表样式。
.list-inline 和 .list-inline-item：水平排列列表项。

自定义样式

通过 CSS 调整文字排版。

示例代码：

<style>
  .custom-text {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ff5733;
    text-transform: uppercase;
  }
</style>

<h2 class="custom-text">自定义标题</h2>
<p class="custom-text">自定义段落</p>

text-transform：控制大小写。

注意事项

依赖性：Typography 不需 JavaScript，仅依赖 CSS。
可访问性：确保标题层级语义正确（如 <h1> 用于主标题）。
对比度：文字颜色与背景需有足够对比度。
响应式：使用响应式类（如 .text-md-center）确保跨设备一致性。

参考资料

以下是与 Bootstrap 5 Typography 相关的外部资源：

总结

Bootstrap 5 的 Typography 提供了一套强大的工具类，用于控制标题、段落、列表和文本样式。通过简单的类和自定义 CSS，您可以轻松实现美观且一致的文字排版。如果您有具体问题或场景，请随时告诉我！