一、爲什麼要定製Bootstrap主題？¶
Bootstrap5是一個功能強大的前端框架，能幫我們快速搭建響應式網站。但默認的顏色和字體可能無法滿足個性化需求（比如品牌色、特定字體風格）。通過簡單的CSS變量修改，我們就能讓網站更具獨特性，同時保持Bootstrap的響應式優勢。
二、準備工作：引入Bootstrap5¶
在開始定製前，需要先在項目中引入Bootstrap5的CSS和JS（如果需要交互組件）。推薦用CDN方式快速引入：
<!-- 引入Bootstrap5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- （可選）引入Bootstrap5 JS（用於下拉菜單、模態框等交互） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
注意：如果只需要靜態樣式（無交互），可以只引入CSS。
三、核心原理：CSS變量讓定製更簡單¶
Bootstrap5的所有樣式（顏色、字體、間距等）都通過CSS變量定義，例如--bs-primary（主色）、--bs-font-sans-serif（默認字體）等。只要修改這些變量的值，就能自動覆蓋默認樣式，且所有Bootstrap工具類（如bg-primary、text-primary）會同步生效。
四、快速修改顏色樣式¶
Bootstrap5的顏色系統基於幾個核心變量，修改它們就能全局改變主題色。
1. 全局主色與輔助色¶
- 主色（Primary）：默認用於按鈕、鏈接等關鍵元素，變量是
--bs-primary。 - 輔助色（Secondary）：用於次要元素，變量是
--bs-secondary。 - 背景色（Background）：頁面背景，變量是
--bs-body-bg。 - 文本色（Text）：主要文本，變量是
--bs-body-color。
示例：將主色改爲藍色（#4285f4），輔助色改爲橙色（#ff7a00）：
/* 自定義CSS（需放在Bootstrap之後） */
:root {
--bs-primary: #4285f4; /* 主色（藍色） */
--bs-secondary: #ff7a00; /* 輔助色（橙色） */
--bs-body-bg: #f8f9fa; /* 背景色（淺灰） */
--bs-body-color: #333; /* 文本色（深灰） */
}
效果：所有使用bg-primary、text-primary的元素（如按鈕、卡片背景）都會自動變爲藍色，無需逐個修改。
2. 工具類與顏色覆蓋¶
Bootstrap的顏色工具類（如bg-success、text-warning）也基於上述變量，修改變量後自動生效。例如：
<!-- 按鈕會自動使用修改後的主色 -->
<button class="btn btn-primary">主要按鈕</button>
<!-- 文本會自動使用修改後的輔助色 -->
<p class="text-secondary">次要文本</p>
五、修改字體樣式¶
字體樣式同樣通過CSS變量控制，包括字體族、大小、行高、字重等。
1. 字體族（Font Family）¶
- 無襯線字體：默認是系統自帶字體（
system-ui），變量--bs-font-sans-serif。 - 等寬字體：用於代碼塊，變量
--bs-font-monospace。
示例：將字體改爲Arial（或Google字體）：
:root {
--bs-font-sans-serif: "Arial", sans-serif; /* 無襯線字體改爲Arial */
--bs-font-monospace: "Courier New", monospace; /* 等寬字體改爲Courier New */
}
進階：若想使用Google字體（如Inter），只需引入Google字體鏈接，再修改變量：
<!-- 引入Google字體Inter -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">
<style>
:root {
--bs-font-sans-serif: 'Inter', sans-serif; /* 使用Google字體 */
}
</style>
2. 字體大小與行高¶
- 基礎字體大小：變量
--bs-font-size-base（默認1rem，即16px）。 - 行高：變量
--bs-line-height-base（默認1.5）。
示例：增大基礎字體到18px，行高到1.6：
:root {
--bs-font-size-base: 1.125rem; /* 18px */
--bs-line-height-base: 1.6; /* 行高1.6 */
}
六、完整實踐步驟¶
- 引入Bootstrap與自定義CSS：
<head>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 自定義CSS（必須放在Bootstrap之後，才能覆蓋默認樣式） -->
<link rel="stylesheet" href="custom.css">
</head>
- 在
custom.css中修改變量：
/* custom.css */
:root {
/* 顏色 */
--bs-primary: #2563eb; /* 主色：深藍色 */
--bs-secondary: #f97316; /* 輔助色：橙色 */
--bs-body-bg: #f0f9ff; /* 背景色：淺藍 */
/* 字體 */
--bs-font-sans-serif: 'Roboto', sans-serif; /* 使用Google字體Roboto */
--bs-font-size-base: 1rem; /* 基礎字體大小16px */
}
- HTML中使用樣式：
<body>
<!-- 按鈕使用主色 -->
<button class="btn btn-primary">點擊我</button>
<!-- 文本使用輔助色 -->
<p class="text-secondary">這是一段輔助色文本</p>
<!-- 使用自定義字體的標題 -->
<h1 class="fw-bold">標題字體示例</h1>
</body>
七、總結¶
通過CSS變量修改Bootstrap5的顏色和字體是最快捷的主題定製方式。核心步驟：
1. 引入Bootstrap5 CSS。
2. 在自定義CSS中通過:root定義變量覆蓋默認值。
3. 利用Bootstrap工具類（如bg-primary、text-primary）驗證效果。
提示：修改變量時，記得檢查是否與原有工具類衝突（可通過瀏覽器F12調試工具查看元素樣式）。多嘗試不同顏色和字體組合，就能快速打造個性化網站！