在網頁設計中，文本樣式是傳遞信息、提升可讀性的關鍵。Bootstrap5提供了一系列簡潔的類，讓我們無需寫複雜的CSS就能輕鬆控制文本的對齊方式、粗細和行高。本文將手把手帶你掌握這些基礎文本樣式的用法，適合初學者快速上手。
一、文本對齊（Text Alignment）¶
文本對齊決定了文字在頁面中的水平位置，Bootstrap5通過簡單的類名就能實現左對齊、居中對齊、右對齊，甚至根據屏幕大小（手機、平板、電腦）靈活調整。
1. 基礎對齊方式¶
- 左對齊：
.text-start（默認通常也是左對齊，但顯式使用更清晰） - 居中對齊：
.text-center（最常用，讓文本在容器中水平居中） - 右對齊：
.text-end（較少用，但在某些場景如導航菜單中可能需要）
示例：
<!-- 左對齊 -->
<p class="text-start bg-light p-3">這行文字左對齊，在容器左側開始顯示。</p>
<!-- 居中對齊 -->
<p class="text-center bg-light p-3">這行文字居中對齊，所有內容在容器中間。</p>
<!-- 右對齊 -->
<p class="text-end bg-light p-3">這行文字右對齊，在容器右側結束顯示。</p>
效果：三個段落分別顯示左、中、右對齊，背景色和內邊距僅爲了方便觀察。
2. 響應式對齊（按屏幕尺寸調整）¶
Bootstrap5支持斷點對齊，即不同屏幕寬度下顯示不同對齊方式。斷點包括：
- sm：小屏幕（手機橫屏，≥576px）
- md：中等屏幕（平板，≥768px）
- lg：大屏幕（電腦，≥992px）
- xl：超大屏幕（≥1200px）
語法：text-<斷點>-<對齊方式>，例如 .text-md-center 表示“在中等屏幕及以上居中對齊”。
示例：
<!-- 小屏幕（手機）左對齊，大屏幕（電腦）居中對齊 -->
<p class="text-sm-start text-lg-center bg-light p-3">
手機上左對齊，電腦上居中對齊，響應式切換！
</p>
效果：在手機上文字靠左，切換到電腦或平板後自動居中。
二、文本粗細（Text Weight）¶
文本粗細（即字體的“胖瘦”）影響文字的視覺層級，Bootstrap5通過.font-weight-*類快速控制。
1. 常用粗細類¶
- 粗體：
.font-weight-bold（最常用，如標題、強調內容） - 常規：
.font-weight-normal（默認字體粗細，可省略，但顯式設置更清晰） - 細體：
.font-weight-light（較細的字體，適合次要內容） - 更粗/更細：
.font-weight-bolder（比父元素更粗）、.font-weight-lighter（比父元素更細）
示例：
<!-- 粗體標題 -->
<h1 class="font-weight-bold">這是粗體標題</h1>
<!-- 常規正文 -->
<p class="font-weight-normal">這是常規粗細的正文，默認就是這個效果。</p>
<!-- 細體文本 -->
<p class="font-weight-light">這是細體文本，適合次要信息。</p>
<!-- 更粗（父元素常規時） -->
<p class="font-weight-bolder">這行文字比父元素更粗</p>
三、行高設置（Line Height）¶
行高是指文本行之間的垂直距離，合適的行高能提升可讀性。Bootstrap5通過.line-height-*類提供預設行高選項。
1. 常用行高類¶
- 默認行高：
.line-height-base（通常爲1.5，適合正文） - 緊湊行高：
.line-height-sm（較小行高，適合短文本或導航） - 寬鬆行高：
.line-height-lg（較大行高，適合長篇閱讀或強調內容）
示例：
<!-- 默認行高（1.5） -->
<p class="line-height-base bg-light p-3">
這是默認行高的文本，每行之間距離適中，適合大多數正文。
</p>
<!-- 寬鬆行高（1.8） -->
<p class="line-height-lg bg-light p-3">
這是寬鬆行高的文本，行與行之間距離更大，閱讀體驗更好。
</p>
四、綜合示例：把所有樣式串起來¶
以下是一個完整的HTML片段，展示文本對齊、粗細、行高的綜合應用：
<!DOCTYPE html>
<html>
<head>
<!-- 引入Bootstrap5 CSS（需先加載，這裏省略CDN鏈接） -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">
<!-- 居中標題（粗體） -->
<h2 class="text-center font-weight-bold mb-4">這是綜合示例標題</h2>
<!-- 小屏幕左對齊，大屏幕右對齊的副標題 -->
<h5 class="text-sm-start text-lg-end font-weight-light mb-3">副標題：響應式對齊</h5>
<!-- 正文：默認行高，部分粗體 -->
<p class="mb-3">
這是一段普通正文，默認行高和常規粗細。
<span class="font-weight-bold">這裏是粗體強調內容</span>，需要突出顯示。
</p>
<!-- 寬鬆行高的段落 -->
<p class="line-height-lg bg-light p-3">
這是寬鬆行高的文本，通過.line-height-lg類設置，行與行之間距離更大，
適合長篇內容閱讀，比如文章正文。
</p>
</body>
</html>
總結¶
Bootstrap5的文本樣式通過簡單的類名就能實現對齊、粗細和行高的精準控制，無需手動寫CSS。關鍵是記住：
- 對齊用.text-*（基礎+響應式）；
- 粗細用.font-weight-*（粗體、常規、細體）；
- 行高用.line-height-*（默認、緊湊、寬鬆）。
多練習組合這些類，就能快速打造出清晰易讀的文本排版效果！