以下是原文翻译成繁體中文的版本：

# Bootstrap - 顏色與背景

你好，有志於網頁開發的夥伴們！今天，我們將深入Bootstrap的色彩與背景工具的世界。作為你們親切的鄰居電腦老師，我非常興奮能夠引導你們走過這段旅程。讓我們用風格來為網頁上色吧！

## Bootstrap顏色介紹

在我們開始在各處噴灑顏色之前，讓我們先了解Bootstrap為我們提供了什麼。Bootstrap帶有一組預設的顏色，我們可以在網站中隨時使用。這些顏色不僅僅是好看的，它們設計成既一致又易於訪問。

### Bootstrap顏色調色板

這裡是Bootstrap默認顏色的表格：

| 顏色名稱 | 類別前綴 | 說明 |
|-----------|-----------|------|
| 主要 | .text-primary, .bg-primary | 主要品牌顏色，通常是藍色 |
| 次要 | .text-secondary, .bg-secondary | 补充顏色，通常是灰色 |
| 成功 | .text-success, .bg-success | 表示成功，通常是绿色 |
| 危險 | .text-danger, .bg-danger | 表示危險或錯誤，通常是紅色 |
| 警告 | .text-warning, .bg-warning | 表示警告，通常是黃色 |
| 資訊 | .text-info, .bg-info | 資訊性，通常是淺藍色 |
| 亮色 | .text-light, .bg-light | 亮顏色，接近白色 |
| 暗色 | .text-dark, .bg-dark | 暗顏色，接近黑色 |

## 文字顏色

讓我們從改變文字顏色開始。這就像在HTML元素中添加一個類那麼簡單。

```html
<p class="text-primary">這段文字是主要顏色。</p>
<p class="text-secondary">這段文字是次要顏色。</p>
<p class="text-success">成功！這段文字是绿色。</p>
<p class="text-danger">危險！這段文字是紅色。</p>

在這個例子中，我們使用text-*類來改變段落文字的顏色。星號(*)被我們調色板中的顏色名稱所替換。

背景顏色

現在，讓我們為我們的背景添加一些顏色。我們使用bg-*類來實現這一點。

<div class="bg-primary text-white p-3">主要背景</div>
<div class="bg-secondary text-white p-3">次要背景</div>
<div class="bg-success text-white p-3">成功背景</div>
<div class="bg-danger text-white p-3">危險背景</div>

在這裡，我們使用bg-*來設置背景顏色，並使用text-white來確保在較暗的背景上文字是可見的。p-3類為更好的可見性添加了一些內邊距。

結合文字和背景顏色

你可以混合和匹配文字和背景顏色來創造吸引人的組合：

<div class="bg-warning text-dark p-3">警告背景與深色文字</div>
<div class="bg-info text-white p-3">資訊背景與白色文字</div>

記住，保持文字和背景顏色之間的良好對比是很重要的，以確保可讀性！

使用組件

Bootstrap的顏色工具不僅適用於基本元素；它們與Bootstrap組件無縫配合使用。讓我們看一些例子。

按鈕

按鈕是為界面添加顏色的好方法：

<button class="btn btn-primary">主要按鈕</button>
<button class="btn btn-success">成功按鈕</button>
<button class="btn btn-danger">危險按鈕</button>

btn類給我們基本的按鈕樣式，而btn-*應用我們的色彩方案。

提醒

提醒是另一個顏色在其中扮演重要角色的組件：

<div class="alert alert-success" role="alert">
  這是一個成功提醒——查看一下！
</div>
<div class="alert alert-danger" role="alert">
  這是一個危險提醒——小心！
</div>

alert類提供基本的提醒樣式，而alert-*應用我們的色彩方案。

自定義顏色

雖然Bootstrap的默認顏色非常好，但有時你需要一些更獨特的东西。你可以通過使用CSS變量輕鬆自定義Bootstrap的色彩調色板。

:root {
  --bs-primary: #007bff;
  --bs-secondary: #6c757d;
  --bs-success: #28a745;
  --bs-info: #17a2b8;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #343a40;
}

通過修改這些變量，你可以改變整個Bootstrap動力的網站的色彩方案！

渐变

對於那些想要添加更多花哨效果的人，Bootstrap還支持渐变。以下是如何使用它們：

<div class="bg-gradient-primary text-white p-3">主要渐变</div>
<div class="bg-gradient-success text-white p-3">成功渐变</div>

bg-gradient-*類為你的背景應用一個微妙的渐变效果。

結論

好了，各位！我們已經通過Bootstrap的色彩和背景工具完成了這次探索。記住，顏色不僅僅是好看的，它們還傳達意義和情感。明智地使用它們來引導用戶並創建有美學、直觀的界面。

在我們結束之前，這裡有一個網頁設計的幽默：為什麼網頁設計師去治療？他們有太多的未解決問題！?

繼續嘗試這些色彩工具，很快你就能創造出充滿活力、引人注目的網站，它們不僅外表好看，而且能有效地與用戶溝通。快樂編程，願你的設計永遠充滿色彩！

Credits: Image by storyset