一、为什么要定制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调试工具查看元素样式）。多尝试不同颜色和字体组合，就能快速打造个性化网站！