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提供相對字體大?。ɑ?code>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即可實現專業的排版效果，顯著提升開發效率。 “`