最安全的Bootstrap定制方式是用独立CSS文件覆盖默认样式，其次为Sass变量重定义，最高级是扩展映射表；须注意加载顺序、优先级和变量依赖关系。
直接改 bootstrap.css 文件是最省事的入门做法，但后续升级时所有改动都会被覆盖——这不是自定义，是埋雷。
用独立CSS文件覆盖默认样式
这是最安全、最易调试的起步方式，适合快速调整按钮颜色、间距或隐藏某个组件的默认边框。
- 确保你的自定义CSS文件在HTML中 位于
bootstrap.min.css之后加载，否则规则不生效 - 选择器优先级要足够：比如想改所有
.btn-primary的背景色，别只写.btn-primary { background: red; }，而应加上更具体的上下文（如body .btn-primary）或用!important（仅限临时调试） - 避免用过于宽泛的选择器（如
button或* {}），否则容易意外影响其他组件行为
通过Sass变量重定义主题色和基础参数
如果你用的是 Bootstrap 源码（bootstrap/scss/ 目录），这才是真正可控的定制起点。所有颜色、断点、字体、圆角都由变量控制，改一处，全局响应。
- 新建一个
_custom.scss，在@import "bootstrap/scss/functions";之后、@import "bootstrap/scss/variables";之前定义变量，例如：$primary: #2d7865;<br>$font-family-sans-serif: "Inter", -apple-system, sans-serif;
- 必须按顺序导入：functions → 自定义变量 → variables → mixins → bootstrap 其余部分，否则变量不会被识别
- 某些值（如
$enable-shadows）是布尔型，设为false可批量关闭阴影，比逐个覆盖更干净
扩展Sass映射表（maps）来增删断点或颜色
当内置的 $theme-colors 或 $grid-breakpoints 不够用时，靠 map-merge 扩展才是正解，而不是硬编码新类名。
- 添加新主题色：
$theme-colors: map-merge($theme-colors, (<br> "teal": #008080,<br> "charcoal": #333<br>));
- 新增断点后，
.col-xl-3这类工具类会自动编译出来，无需手动写媒体查询 - 注意：修改
$grid-breakpoints后，必须同步调整$container-max-widths，否则容器宽度不会随断点变化
真正难的不是“怎么加一行样式”，而是判断该用哪一层介入：小修小补用覆盖CSS；换整套视觉风格用Sass变量；要支持多主题或动态主题切换，就得深入映射表与混入逻辑——后者一旦写错，编译失败或样式错乱很难一眼定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
