BS5 定制主题
学习通过 Sass 变量和工具定制 Bootstrap 5 主题，创建独特的设计。 · 难度：入门 · +15XP
定制主题简介
Bootstrap 5 允许通过 Sass 变量深度定制主题，包括颜色、字体、间距等。虽然需要编译 Sass，但也可以使用 CSS 变量进行轻量定制。
关键变量
| 变量 | 说明 |
|---|---|
$primary | 主色 |
$font-family-base | 基础字体 |
$enable-rounded | 是否启用圆角 |
代码示例（CSS 覆盖）
<style>
:root {
--bs-primary: #6f42c1;
--bs-success: #20c997;
--bs-font-sans-serif: 'Arial', sans-serif;
}
</style>练习提示
在右侧代码中，通过 :root 变量覆盖 --bs-primary 为紫色，--bs-success 为青色，并修改按钮背景色来测试。