标题样式
Bootstrap 5 提供了标准的HTML标题样式，从 <h1> 到 <h6>。
h1. Bootstrap 标题
h2. Bootstrap 标题
h3. Bootstrap 标题
h4. Bootstrap 标题
h5. Bootstrap 标题
h6. Bootstrap 标题
您也可以使用 .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>自定义标题
引导文本
使用 .lead 类使段落突出显示。
这是一个引导文本段落。它通过更大的字体大小和轻微的字重来突出显示。
这是一个普通段落。引导文本在视觉上更突出，适合用于引言或重要内容。
<p class="lead">
这是一个引导文本段落。它通过更大的字体大小和轻微的字重来突出显示。
</p>显示标题
当需要更大、更轻的标题样式时，可以使用显示标题。
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>内联文本元素
Bootstrap 5 提供了多种内联文本元素的样式。
您可以使用标记标签 高亮显示文本。
此行文本被视为已删除的文本。
此行文本被视为不再准确。
此行文本被视为添加到文档中。
此行文本将呈现为下划线。
此行文本被视为小号文本。
此行文本呈现为粗体。
此行文本呈现为斜体。
<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 初始缩略语
<section> 内联代码
按 ctrl + , 打开设置
这是一个示例输出
y = mx + b
文本对齐
使用文本对齐类轻松重新对齐文本。
左对齐文本。
居中对齐文本。
右对齐文本。
<p class="text-start">左对齐文本。</p>
<p class="text-center">居中对齐文本。</p>
<p class="text-end">右对齐文本。</p>响应式文本对齐类允许根据屏幕尺寸对齐文本。
在小屏幕及更大屏幕上左对齐
在中等屏幕及更大屏幕上左对齐
在大屏幕及更大屏幕上左对齐
在超大屏幕及更大屏幕上左对齐
<p class="text-sm-start">在小屏幕及更大屏幕上左对齐</p>
<p class="text-md-start">在中等屏幕及更大屏幕上左对齐</p>
<p class="text-lg-start">在大屏幕及更大屏幕上左对齐</p>
<p class="text-xl-start">在超大屏幕及更大屏幕上左对齐</p>文本变换
使用文本变换类更改文本的大小写。
小写文本。
大写文本。
首字母大写文本。
<p class="text-lowercase">小写文本。</p>
<p class="text-uppercase">大写文本。</p>
<p class="text-capitalize">首字母大写文本。</p>使用字体粗细和斜体类更改文本样式。
加粗文本
更粗文本 (相对于父元素)
半粗体文本
正常粗细文本
细体文本
更细文本 (相对于父元素)
斜体文本
正常样式文本 (非斜体)
<p class="fw-bold">加粗文本</p>
<p class="fw-bolder">更粗文本 (相对于父元素)</p>
<p class="fw-normal">正常粗细文本</p>
<p class="fst-italic">斜体文本</p>
<p class="fst-normal">正常样式文本 (非斜体)</p>文本颜色
使用颜色工具类为文本设置主题颜色。
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50
<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 bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>链接颜色
您可以使用 .text-* 类为链接设置颜色。
列表
无序列表
- 列表项 1
- 列表项 2
- 嵌套列表项 1
- 嵌套列表项 2
- 列表项 3
有序列表
- 列表项 1
- 列表项 2
- 嵌套列表项 1
- 嵌套列表项 2
- 列表项 3
无样式列表
使用 .list-unstyled 移除默认列表样式。
- 列表项 1
- 列表项 2
- 嵌套列表项 1
- 嵌套列表项 2
- 列表项 3
<ul class="list-unstyled">
<li>列表项 1</li>
<li>列表项 2
<ul>
<li>嵌套列表项 1</li>
<li>嵌套列表项 2</li>
</ul>
</li>
<li>列表项 3</li>
</ul>内联列表
使用 .list-inline 和 .list-inline-item 创建水平列表。
- 列表项 1
- 列表项 2
- 列表项 3
文本装饰
使用文本装饰类更改文本装饰。
<p class="text-decoration-underline">带下划线的文本。</p>
<p class="text-decoration-line-through">带删除线的文本。</p>
<a href="#" class="text-decoration-none">无下划线的链接。</a>使用文本换行和溢出类控制文本行为。
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<div class="badge bg-primary text-wrap" style="width: 6rem;">
此文本将换行。
</div>
<div class="text-nowrap bg-light border" style="width: 8rem;">
此文本将溢出父元素。
</div>
<div class="row">
<div class="col-4 text-truncate">
这是一段很长的文本，将被截断显示。
</div>
</div>
<p class="text-break">
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
</p>字体大小
使用 .fs-* 类快速更改字体大小。
.fs-1 文本
.fs-2 文本
.fs-3 文本
.fs-4 文本
.fs-5 文本
.fs-6 文本
<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>文字排版最佳实践
保持可读性
- 使用合适的字体大小确保文本易于阅读
- 确保文本颜色与背景有足够的对比度
- 避免过度使用大写字母，影响阅读流畅性
一致性原则
- 在整个网站中保持一致的排版风格
- 建立明确的文本层次结构
- 使用相同的字体粗细和颜色表示相同的重要性
响应式考虑
- 在小屏幕上适当调整字体大小
- 使用响应式对齐类适应不同屏幕
- 确保文本在不同设备上都能良好显示
语义化使用
- 根据内容含义选择合适的HTML元素
- 使用标题类表示内容层次而非仅为了样式
- 确保辅助技术能正确解读文本结构