bootstrap中的文本类有哪些

# Bootstrap中的文本类有哪些

Bootstrap作为最流行的前端框架之一，提供了丰富的文本样式类（Utility Classes），能够快速实现文本排版、对齐、颜色等常见效果。本文将系统介绍Bootstrap 5中的文本相关工具类，帮助开发者高效控制文本样式。

---

## 一、文本对齐类
控制文本的水平对齐方式：

```html
<p class="text-start">左对齐（默认）</p>
<p class="text-center">居中对齐</p>
<p class="text-end">右对齐</p>
<p class="text-justify">两端对齐</p>

响应式变体（适配不同屏幕尺寸）：

<p class="text-sm-center">小屏居中</p>
<p class="text-md-end">中屏右对齐</p>
<p class="text-lg-start">大屏左对齐</p>

二、文本装饰与变换

1. 文本装饰

<p class="text-decoration-underline">下划线文本</p>
<p class="text-decoration-line-through">删除线文本</p>
<p class="text-decoration-none">移除链接下划线</p>

2. 字母大小写转换

<p class="text-lowercase">LOWERCASE TEXT</p>
<p class="text-uppercase">uppercase text</p>
<p class="text-capitalize">capitalized text</p>

三、文本颜色类

Bootstrap提供语义化颜色和标准调色板：

1. 主题颜色

<p class="text-primary">主要蓝色</p>
<p class="text-success">成功绿色</p>
<p class="text-danger">危险红色</p>
<p class="text-warning">警告黄色</p>
<p class="text-info">信息青色</p>
<p class="text-light bg-dark">浅色文本（需深背景）</p>
<p class="text-dark">深色文本</p>
<p class="text-muted">减弱文本</p>

2. 透明度控制

<p class="text-black-50">黑色50%透明</p>
<p class="text-white-50 bg-dark">白色50%透明</p>

四、字体样式类

1. 字体粗细

<p class="fw-bold">加粗文本</p>
<p class="fw-bolder">更粗文本（相对父元素）</p>
<p class="fw-normal">常规粗细</p>
<p class="fw-light">细体</p>
<p class="fw-lighter">更细体</p>

2. 字体风格

<p class="fst-italic">斜体</p>
<p class="fst-normal">正常非斜体</p>

五、文本溢出处理

<div class="text-truncate" style="max-width: 200px;">
  超长文本会被截断并显示省略号...
</div>

六、字体大小类

Bootstrap 5提供相对字体大小（基于rem）：

<p class="fs-1">fs-1 (2.5rem)</p>
<p class="fs-2">fs-2 (2rem)</p>
<p class="fs-3">fs-3 (1.75rem)</p>
<p class="fs-4">fs-4 (1.5rem)</p>
<p class="fs-5">fs-5 (1.25rem)</p>
<p class="fs-6">fs-6 (1rem)</p>

响应式变体：

<p class="fs-md-3">中屏时1.75rem</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>

八、文字换行与断词

<div class="text-wrap" style="width: 50px;">
  允许换行的长文本
</div>

<div class="text-nowrap" style="width: 50px;">
  禁止换行的文本（出现滚动条）
</div>

<p class="text-break">防止长单词/URL破坏布局：Pneumonoultramicroscopicsilicovolcanoconiosis</p>

九、其他实用类

1. 文本重置

<p class="text-reset">继承父元素颜色（常用于按钮内的链接）</p>

2. 文本选择颜色

<p class="user-select-all">点击选中全部文本</p>
<p class="user-select-none">禁止文本选中</p>

最佳实践建议

1. 响应式优先：始终优先使用响应式文本类（如.text-md-center）
2. 语义化颜色：优先使用text-primary等语义化类而非具体颜色值
3. 可访问性：确保文本颜色与背景有足够对比度（WCAG标准）
4. 性能优化：避免过度使用.fs-*类，考虑直接定义CSS变量

通过合理组合这些文本工具类，开发者可以无需编写自定义CSS即可实现专业的排版效果，显著提升开发效率。 “`