Bootstrap - 文字：初學者指南

您好，有抱負的網頁開發者們！我很興奮能成為您進入Bootstrap文字樣式世界的導遊。作為一個教了多年計算機科學的人，我可以告訴您，掌握文字操作就像在數字畫布上用文字作畫。那麼，讓我們一起潛入水中，讓您的網頁看起來棒極了！

文字對齊

您首先要學習的是如何對齊文字。Bootstrap 提供了一套類別，您可以將其應用於您的 HTML 過元素。

<p class="text-start">左對齊文字。</p>
<p class="text-center">居中對齊文字。</p>
<p class="text-end">右對齊文字。</p>

在這個例子中，我們使用了三個不同的類別：

• text-start：將文字對齊到左邊（在大多數情況下是默認值）
• text-center：將文字居中
• text-end：將文字對齊到右邊

記住，對齊就像在房間裡擺放家具。您希望它看起來平衡且賞心悦目！

文字折行與溢出

有時候，您可能會有文字長度超出其容器。Bootstrap 提供了類別來優雅地處理這種情況。

<div class="badge bg-primary text-wrap" style="width: 6rem;">
這段文字應該要折行。
</div>

<div class="text-nowrap bg-light" style="width: 8rem;">
這段文字應該要溢出。
</div>

在這裡，我們使用了：

• text-wrap：允許長文字折行到下一行
• text-nowrap：防止文字折行，導致其溢出容器

將 text-wrap 想像成一條舒適的毛毯將您包裹，而 text-nowrap 則像是試圖穿上一件小一號的衣物！

詞彙斷行

當處理長詞或網址時，您可能需要將其折行以防止溢出。Bootstrap 會為您提供服務：

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

text-break 類別允許長詞折行並折到下一行。這就像是給您的文字允許在過長時休息一會！

文字轉換

想要從屋顶上大喊或是輕聲細語？文字轉換類別可以幫助您設定語調：

<p class="text-lowercase">小寫文字。</p>
<p class="text-uppercase">大寫文字。</p>
<p class="text-capitalize">首字母大寫的文字。</p>

• text-lowercase：將所有字母轉換為小寫
• text-uppercase：將所有字母轉換為大寫
• text-capitalize：將每個單詞的第一個字母大寫

這就像為您的文字設定了音量控制！

字體大小

Bootstrap 提供了一系列字體大小類別，幫助您強調或降低文字的重要性：

<p class="fs-1">字體大小 1（最大）</p>
<p class="fs-2">字體大小 2</p>
<p class="fs-3">字體大小 3</p>
<p class="fs-4">字體大小 4</p>
<p class="fs-5">字體大小 5</p>
<p class="fs-6">字體大小 6（最小）</p>

這些類別從 fs-1（最大）到 fs-6（最小）。這就像為您的文字有了不同尺寸的畫筆！

字體粗細與斜體

有時候您需要為文字添加強調。Bootstrap 讓這件事變得容易：

<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>
<p class="fst-italic">斜體文字。</p>
<p class="fst-normal">正常字體樣式的文字</p>

這些類別讓您可以調整文字的粗細和樣式。這就像讓您的文字進行鍛煉或是讓它們放鬆！

行高

調整行高可以大大提高可讀性。Bootstrap 為此提供了一個簡單的類別：

<p class="lh-1">這是一段長段落，用來展示元素行高如何受到我們工具類別的影響。注意這段文字的行高與前一段不同。</p>
<p class="lh-sm">這是一段長段落，用來展示元素行高如何受到我們工具類別的影響。注意這段文字的行高與前一段不同。</p>
<p class="lh-base">這是一段長段落，用來展示元素行高如何受到我們工具類別的影響。注意這段文字的行高與前一段不同。</p>
<p class="lh-lg">這是一段長段落，用來展示元素行高如何受到我們工具類別的影響。注意這段文字的行高與前一段不同。</p>

這些類別調整文字行間的間距。這就像調整書本中的間距，使其更容易閱讀！

等寬字體

為了顯示代碼或其他技術內容，您可能想要使用等寬字體：

<p class="font-monospace">這是等寬字體</p>

font-monospace 類別將文字設定為等寬字體，其中每個字符佔據相同的水平空間。這對於代碼片段或當您需要精確對齊時非常完美！

重置顏色

有時候，您可能需要將文字顏色重置為默認：

<p class="text-muted">
淡化文字，帶有 <a href="#" class="text-reset">重置鏈接</a>。
</p>

text-reset 類別移除任何文字顏色，將其恢復為默認。這就像為您的文字顏色按下了重置按鈕！

文字裝飾

最後，讓我們來討論文字裝飾：

<p class="text-decoration-underline">這段文字下面有一條線。</p>
<p class="text-decoration-line-through">這段文字中間有一條線。</p>
<a href="#" class="text-decoration-none">這個鏈接去掉了默認的文字裝飾</a>

這些類別讓您添加或刪除底線和刪除線。這就像為您的文字作品添加最後的點綴！

這裡是一個總結我們所涵蓋的所有與文字相關的類別的表格：

分類	類別
對齊	text-start, text-center, text-end
折行	text-wrap, text-nowrap
詞彙斷行	text-break
轉換	text-lowercase, text-uppercase, text-capitalize
字體大小	fs-1, fs-2, fs-3, fs-4, fs-5, fs-6
字體粗細	fw-bold, fw-bolder, fw-normal, fw-light, fw-lighter
字體樣式	fst-italic, fst-normal
行高	lh-1, lh-sm, lh-base, lh-lg
等寬字體	font-monospace
顏色重置	text-reset
裝飾	text-decoration-underline, text-decoration-line-through, text-decoration-none

那就這樣了！您現在已經掌握了使用Bootstrap樣式化文字的知識。記住，熟能生巧，所以不要害怕在您的项目中嘗試這些類別。祝您編程愉快，願您的文字總是看起來令人驚艷！

Credits: Image by storyset