Bootstrap5變量配置：自定義主題色與組件樣式

在網頁開發中，默認的Bootstrap樣式雖然美觀，但往往需要根據項目需求調整顏色、間距等細節。Bootstrap5提供了強大的變量配置系統，讓我們可以輕鬆自定義主題色和組件樣式，而無需深入修改底層代碼。本文將手把手帶你掌握變量配置的核心方法，適合初學者快速上手。

爲什麼要用變量配置？¶

Bootstrap5的樣式核心基於SCSS（Sass）變量，這些變量統一管理了顏色、間距、邊框、圓角等樣式屬性。通過修改變量，我們可以：
- 快速替換主題色（如將默認藍色改爲品牌紫色）
- 調整組件的默認樣式（如按鈕大小、卡片圓角）
- 保持代碼一致性，避免重複寫樣式

關鍵點：直接使用CDN版本的Bootstrap時，變量配置較難實現。推薦通過安裝Bootstrap的SCSS源碼，在項目中自定義變量。

準備工作：安裝Bootstrap與SCSS環境¶

1. 安裝Bootstrap¶

打開終端，運行以下命令安裝Bootstrap：

npm install bootstrap

2. 創建自定義SCSS文件¶

在項目根目錄新建文件夾（如scss），並在其中創建custom.scss文件（這是我們自定義變量的主文件）。

第一步：修改主題色¶

主題色是網站的視覺核心，Bootstrap默認提供了primary（主色）、secondary（次要色）、success（成功色）等變量。我們先以修改主色爲例：

1. 導入Bootstrap的SCSS¶

在custom.scss中，先導入Bootstrap的核心變量和工具函數（確保變量能被正確覆蓋）：

// 引入Bootstrap的函數和變量文件（必須先導入，否則變量修改無效）
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

// 自定義變量（放在導入後，會覆蓋默認變量）
$primary: #6c5ce7; // 將主色改爲紫色（示例顏色）
$secondary: #00b894; // 次要色改爲綠色
$success: #ff7675; // 成功色改爲紅色

2. 替換默認顏色¶

修改上述變量後，Bootstrap的所有依賴這些變量的組件都會自動更新。例如：
- 主色按鈕：<button class="btn btn-primary">點擊我</button>會變成紫色
- 次要色背景：<div class="bg-secondary">次要區域</div>會變成綠色

3. 擴展主題色（可選）¶

如果需要更多主題色（如警告色warning），可以直接添加變量：

$warning: #ffeaa7; // 警告色改爲黃色

之後在HTML中使用：<button class="btn btn-warning">警告</button>

第二步：自定義組件樣式¶

除了主題色，Bootstrap的按鈕、卡片、導航欄等組件都有獨立的變量控制，以下是常見場景：

1. 按鈕樣式定製¶

按鈕的內邊距、邊框、圓角等可通過變量調整：

// 按鈕變量示例
$btn-padding-y: 0.5rem; // 按鈕上下內邊距（默認1rem）
$btn-font-weight: 600; // 按鈕字體粗細（默認500）
$btn-border-radius: 0.375rem; // 按鈕圓角（默認0.25rem）
$btn-active-shadow: 0 0 0 0.25rem rgba(108, 92, 231, 0.25); // 點擊時陰影

修改後，所有btn類按鈕都會應用新樣式。

2. 卡片樣式定製¶

卡片的背景、邊框、陰影等可調整：

// 卡片變量示例
$card-bg: #f8f9fa; // 卡片背景色（默認白色）
$card-border-radius: 1rem; // 卡片圓角（默認0.25rem）
$card-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); // 卡片陰影（默認無）

使用：<div class="card">...</div>會自動應用新樣式。

3. 導航欄樣式定製¶

導航欄的高度、背景色、文字大小：

// 導航欄變量示例
$navbar-padding-y: 0.75rem; // 導航欄上下內邊距
$navbar-color: #333; // 導航欄文字顏色
$navbar-bg: #fff; // 導航欄背景色

使用：<nav class="navbar">...</nav>

編譯SCSS到CSS¶

修改完custom.scss後，需要將其編譯爲CSS才能生效。推薦使用dart-sass：

1. 安裝編譯工具¶

npm install -g sass

2. 編譯命令¶

在終端運行：

sass scss/custom.scss css/custom.css

這會將custom.scss編譯爲css/custom.css，然後在HTML中引入：

<link rel="stylesheet" href="css/custom.css">

注意事項¶

變量優先級：變量修改必須在導入Bootstrap的SCSS之後，否則會被默認樣式覆蓋。
單位一致性：修改間距、圓角等時，保持單位統一（如rem或px）。
顏色工具：使用在線工具（如Coolors）生成協調的顏色組合。
多變量擴展：如需修改多個組件，可繼續添加新的變量定義。

總結¶

通過Bootstrap5的變量配置，我們可以高效實現主題定製：
- 用$primary等變量改主題色
- 用組件專屬變量改按鈕、卡片等樣式
- 編譯後即可在項目中直接使用

變量配置是Bootstrap擴展性的核心，動手嘗試修改不同變量，很快就能打造出符合需求的個性化頁面！