Bootstrap5提供了強大的排版工具，讓網頁的文字展示更規範、更美觀。本文將帶你瞭解Bootstrap5中最基礎且常用的排版功能，包括標題層級和文本樣式的設置方法，適合剛開始學習Bootstrap的同學。
一、標題層級：快速設置不同大小的標題¶
Bootstrap5通過一系列預定義的類名，讓你輕鬆創建不同層級的標題樣式，同時兼顧了樣式和語義化的平衡。
1. 基礎標題類（h1-h6）¶
Bootstrap5使用 .h1 到 .h6 類來定義標題樣式，這些類會影響元素的字體大小、粗細和行高，但不會改變元素本身的語義。例如，即使你用 <p> 標籤加上 .h1 類，它會顯示成h1的大小，卻不會像 <h1> 那樣被瀏覽器視爲一級標題（語義化標籤的作用）。
<!-- 用h1標籤和.h1類效果相同 -->
<h1 class="h1">這是h1樣式的標題</h1>
<p class="h2">這是h2樣式的段落（通過.h2類實現）</p>
<p class="h3">h3樣式的文本</p>
<p class="h4">h4樣式的文本</p>
<p class="h5">h5樣式的文本</p>
<p class="h6">h6樣式的文本</p>
效果：h1 最大，字體最粗；h6 最小，字體最細。
2. 標題間距與默認樣式¶
Bootstrap5的標題默認會有間距，避免和正文擁擠：
- h1 到 h6 都默認帶有 margin-bottom: 1rem，確保標題之間有足夠空隙。
- 相鄰標題或標題與正文的間距通過 margin-top 和 margin-bottom 自動調整。
<h1 class="h1">大標題</h1>
<p>這是大標題下方的正文內容，間距由Bootstrap自動處理。</p>
<h2 class="h2">中標題</h2>
<p>這是中標題下方的正文內容。</p>
二、文本樣式：豐富的文本美化方式¶
Bootstrap5提供了大量文本樣式類，可快速調整文本對齊、顏色、粗細、大小寫等。
1. 文本對齊：調整文字左右位置¶
通過以下類控制文本對齊方式（默認左對齊）：
- .text-start：左對齊（默認）
- .text-center：居中對齊
- .text-end：右對齊
- .text-justify：兩端對齊（適合多段文本）
<p class="text-center">這段文字是居中的</p>
<p class="text-end">這段文字靠右顯示</p>
<p class="text-justify">這段文字會兩端對齊，讓內容更整齊（需容器寬度足夠）。</p>
2. 文本顏色：改變文字和背景色¶
- 文字顏色：使用
.text-*類（如.text-primary、.text-success等）。 - 背景顏色：使用
.bg-*類（較少用，通常配合白色文字）。
<p class="text-primary">藍色文本（主要色）</p>
<p class="text-success">綠色文本（成功色）</p>
<p class="text-muted">灰色文本（次要文本，弱化顯示）</p>
<p class="text-danger bg-light">紅色文本（危險色）</p>
<p class="bg-primary text-white">藍色背景白色文字</p>
3. 文本粗細與斜體：突出重要內容¶
- 粗細：
fw-bold（粗體）、fw-normal（常規）、fw-light（細體）。 - 斜體：
fst-italic（斜體）。
<p class="fw-bold">這段文字是粗體</p>
<p class="fst-italic">這段文字是斜體</p>
<p class="fw-light fst-italic">既細體又斜體</p>
4. 文本大小寫：統一文字形式¶
.text-lowercase：全部小寫。.text-uppercase：全部大寫。.text-capitalize：每個單詞首字母大寫。
<p class="text-lowercase">HELLO WORLD → hello world</p>
<p class="text-uppercase">hello world → HELLO WORLD</p>
<p class="text-capitalize">hello world → Hello World</p>
5. 行高與間距：優化可讀性¶
- 行高：
lh-sm（小行高1.25）、lh-base（默認1.5）、lh-lg（大行高2）。 - 間距：通過
.mb-*（margin-bottom）或.mt-*（margin-top）工具類調整。
<p class="lh-sm">小行高（文本更緊湊）</p>
<p class="lh-lg">大行高（文本更寬鬆，適合長段落）</p>
<p class="mb-3">這裏有margin-bottom，與下方段落隔開</p>
<p class="mt-4">這裏有margin-top，與上方段落隔開</p>
6. 特殊文本樣式：引用、列表、刪除線¶
- 引用樣式：用
<blockquote>配合.blockquote類，<footer>配合.blockquote-footer顯示引用來源。 - 列表樣式：
.list-unstyled（無列表符號）、.list-inline（內聯列表，一行顯示）。 - 文本裝飾：
.text-decoration-line-through（刪除線）、.text-decoration-none（去掉下劃線）。
<!-- 引用樣式 -->
<blockquote class="blockquote">
<p>這是一段引用文本，默認帶左側邊框和內邊距。</p>
<footer class="blockquote-footer">引用來源：Bootstrap文檔</footer>
</blockquote>
<!-- 無列表符號 -->
<ul class="list-unstyled">
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ul>
<!-- 內聯列表 -->
<ul class="list-inline">
<li class="list-inline-item">項目1</li>
<li class="list-inline-item">項目2</li>
<li class="list-inline-item">項目3</li>
</ul>
<!-- 刪除線文本 -->
<p class="text-decoration-line-through">這段文字有刪除線</p>
三、使用注意事項¶
- 語義化優先：標題儘量用
<h1>-<h6>標籤（增強SEO和無障礙性），樣式類（.h1-.h6）僅用於美化。 - 類名與標籤區分：不要混淆
.h1類和<h1>標籤，前者是樣式，後者是語義。 - 響應式適配：Bootstrap5類默認響應式，如需特定斷點調整（如僅移動端居中），可加前綴（如
.text-center-sm）。
總結¶
掌握Bootstrap5排版基礎，只需記住核心類名：.h1-.h6（標題）、.text-*（顏色/對齊）、fw-*（粗細）、fst-*（斜體）等。這些工具能快速讓文字更美觀、結構更清晰，後續結合網格系統和組件，可進一步提升頁面效果。