Bootstrap 5 文字排版指南
小白也能看懂的排版知识大全
1. 标题样式
基础Bootstrap 提供了从 .h1 到 .h6 的标题类，你可以直接使用HTML标签或通过类名应用样式。
h1. 一级标题
h2. 二级标题
h3. 三级标题
h4. 四级标题
h5. 五级标题
h6. 六级标题
<p class="h1">
<h2>二级标题</h2>
<h3 class=”text-danger”>红色三级标题</h3>
<p class=”h4″>看起来像四级标题的段落</p>
2. 段落和强调
基础Bootstrap 对段落文本进行了优化，使其更易阅读。
这是一个普通段落。Bootstrap 默认设置段落字体大小为1rem（约16px），行高为1.5，确保良好的可读性。
这是使用 .lead 类的段落，用于突出显示重要内容，字体稍大，颜色稍浅。
加粗文本 使用 <strong> 或 <b>
斜体文本 使用 <em> 或 <i>
<p class=”lead”>突出显示的段落</p>
<p><strong>加粗文本</strong></p>
<p><em>斜体文本</em></p>
3. 列表样式
基础Bootstrap 提供了有序列表、无序列表和无样式列表。
无序列表
- 列表项 1
- 列表项 2
- 列表项 3
- 嵌套列表 1
- 嵌套列表 2
有序列表
- 第一项
- 第二项
- 第三项
无样式列表
- 没有项目符号
- 更简洁的列表
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
</ul>
<!– 有序列表 –>
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
<!– 无样式列表 –>
<ul class=”list-unstyled”>
<li>没有项目符号</li>
</ul>
4. 文本对齐
实用使用对齐类可以轻松控制文本的对齐方式。
左对齐文本 (默认)
居中文本
右对齐文本
小屏幕以上居中
中屏幕以上右对齐
<p class=”text-center”>居中对齐</p>
<p class=”text-end”>右对齐</p>
<p class=”text-sm-center”>小屏幕以上居中</p>
<p class=”text-md-end”>中屏幕以上右对齐</p>
5. 文本转换
实用使用文本转换类可以改变文本的大小写形式。
将文本转换为小写 (LOWERCASE TEXT)
将文本转换为大写 (uppercase text)
将每个单词的首字母大写 (capitalized text)
<p class=”text-uppercase”>大写文本</p>
<p class=”text-capitalize”>首字母大写的文本</p>
6. 字体粗细和斜体
实用控制字体的粗细和斜体样式。
加粗文本
更粗的文本 (相对于父元素)
正常粗细文本
细体文本
更细的文本 (相对于父元素)
斜体文本
非斜体文本
<p class=”fw-bolder”>更粗的文本</p>
<p class=”fw-light”>细体文本</p>
<p class=”fst-italic”>斜体文本</p>
7. 文本颜色
实用Bootstrap 提供了一系列语义化的颜色类来设置文本颜色。
主要文本 – .text-primary
次要文本 – .text-secondary
成功文本 – .text-success
危险文本 – .text-danger
警告文本 – .text-warning
信息文本 – .text-info
深色文本 – .text-dark
减弱文本 – .text-muted
text- 替换为 bg-。
<p class=”text-success”>成功文本</p>
<p class=”text-danger”>危险文本</p>
<p class=”text-muted”>减弱文本</p>
8. 显示标题
高级当需要比普通标题更大的标题时，可以使用显示标题。
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
<h1 class=”display-3″>超大标题3</h1>
<h1 class=”display-6″>超大标题6</h1>
9. 引用文本
高级用于展示引用内容或突出显示特殊文本块。
知识就是力量，但更重要的是运用知识的技能。
居中显示的引用文本。
<p>引用内容</p>
<footer class=”blockquote-footer”>引用来源</footer>
</blockquote>
<!– 居中引用 –>
<blockquote class=”blockquote text-center”>
<p>居中显示的引用</p>
</blockquote>
10. 行内文本元素
高级Bootstrap 为常见的行内文本元素提供了样式。
使用 <mark> 元素可以 高亮显示文本
使用 <del> 元素可以表示 被删除的文本
使用 <s> 元素可以表示 不再相关的文本
使用 <ins> 元素可以表示 新添加的文本
使用 <u> 元素可以 给文本添加下划线
使用 <small> 元素可以 显示小号文本
使用 <abbr> 元素可以显示 缩写
使用 <code> 元素可以显示 代码片段
使用 <kbd> 元素可以显示 键盘按键
<p>删除 <del>不需要的文本</del></p>
<p>添加 <ins>新内容</ins></p>
<p>缩写 <abbr title=”超文本标记语言”>HTML</abbr></p>
<p>代码 <code>print(‘Hello’)</code></p>
<p>按键 <kbd>Ctrl + S</kbd></p>
11. 文本截断
高级当文本超出容器宽度时，使用文本截断功能添加省略号。
这是一段内联元素的长文本，同样可以应用截断效果。
<div class=”text-truncate” style=”max-width: 200px;”>
长文本内容…
</div>
<!– 内联元素截断 –>
<span class=”d-inline-block text-truncate” style=”max-width: 150px;”>
长文本内容…
</span>
Bootstrap 5 文字排版要点总结
- 使用
.h1到.h6类或标准标题标签创建标题 .lead类使段落更突出- 使用
.text-[start|center|end]控制文本对齐 - 用
.text-[lowercase|uppercase|capitalize]改变文本大小写 - 使用
.fw-[bold|bolder|light|lighter]控制字体粗细
- 语义化颜色类
.text-[primary|success|danger...] .display-1到.display-6创建超大标题.blockquote用于引用文本- 行内元素如
<mark>、<code>等有专门样式 .text-truncate添加文本截断省略号
记住：Bootstrap 的文字排版系统是响应式的，在不同设备上都能良好显示！