文本对齐
| 类名 | 效果 |
|---|
.text-start | 左对齐 |
.text-center | 居中 |
.text-end | 右对齐 |
.text-justify | 两端对齐 |
<p class="text-start">左对齐</p>
<p class="text-center">居中</p>
<p class="text-end">右对齐</p>
<p class="text-sm-center">小屏及以上居中</p>
文本换行与溢出
| 类名 | 效果 |
|---|
.text-wrap | 正常换行(默认) |
.text-nowrap | 禁止换行 |
.text-truncate | 单行截断(显示省略号) |
.text-break | 强制换行(防止长单词溢出) |
<div class="text-nowrap" style="width:100px">不会换行的长文本内容</div>
<div class="text-truncate" style="width:150px">超出部分显示省略号的长文本</div>
大小写转换
<p class="text-lowercase">全部小写</p>
<p class="text-uppercase">全部大写</p>
<p class="text-capitalize">首字母大写</p>
字重与斜体
| 类名 | 字重 |
|---|
.fw-bold | 700(粗体) |
.fw-bolder | bolder(相对更粗) |
.fw-semibold | 600(半粗) |
.fw-normal | 400(正常) |
.fw-light | 300(细体) |
.fw-lighter | lighter(相对更细) |
.fst-italic | 斜体 |
.fst-normal | 正常样式 |
文字装饰
<p class="text-decoration-underline">下划线</p>
<p class="text-decoration-line-through">删除线</p>
<p class="text-decoration-none">无装饰(常用于链接)</p>
字体大小
使用 .fs-1 到 .fs-6 快速设置字体大小:
| 类名 | 大小 |
|---|
.fs-1 | 2.5rem (40px) |
.fs-2 | 2rem (32px) |
.fs-3 | 1.75rem (28px) |
.fs-4 | 1.5rem (24px) |
.fs-5 | 1.25rem (20px) |
.fs-6 | 1rem (16px) |
<p class="fs-1 fw-bold">超大标题</p>
<p class="fs-4 text-secondary">中等副标题</p>
<p class="fs-6 text-muted">小号注释文本</p>
行高
<p class="lh-1">行高 1(紧密)</p>
<p class="lh-sm">行高 1.25</p>
<p class="lh-base">行高 1.5(默认)</p>
<p class="lh-lg">行高 2(宽松)</p>
等宽字体
<p class="font-monospace">等宽字体文本,适合代码展示</p>