Bootstrap模板定制核心在于控制样式来源层级和编译链路：独立CSS覆盖仅适于局部微调；Sass变量重定义需严格遵循导入顺序并同步更新关联变量；CSS变量适用于动态主题切换但不兼容IE11；官方构建器适合快速出包但缺乏灵活性且升级需重做。
Bootstrap模板不是“改HTML结构”就能定制的，核心是控制样式来源层级和编译链路。直接在HTML里加style或覆盖.btn类，短期能见效，但很快会遇到.text-primary还是蓝、hover色没变、深色模式失效等问题。
用独立CSS文件覆盖最简单，但只适合局部微调
适用于：改一两个按钮圆角、调个卡片阴影、临时压住某个组件的默认边距。
- 新建
my-override.css，确保它在HTML中排在bootstrap.min.css之后加载 - 写规则时尽量加具体选择器，比如
.my-card .card-header比单纯.card-header更安全 - 避免滥用
!important——它会让后续调试变成猜谜，尤其当你引入第三方插件时 - 注意响应式断点：改
.btn在md下有效，不代表sm或lg也生效，得检查对应媒体查询是否被覆盖
改Sass变量才是真·全局定制，但顺序错一步就全白改
适用于：统一主题色、字体族、圆角尺寸、间距标尺等基础设计语言。
- 必须在
@import "bootstrap/scss/variables"之前定义$primary，否则变量不会被重写 - 只改
$primary不够，$theme-colors也要同步更新，否则.bg-navy这类工具类不会生成 -
$primary-rgb需手动配对设置，否则rgba($primary-rgb, .5)会报错或回退到默认值 - 用Dart Sass编译（
npx sass --version确认），Node Sass已废弃，不支持Bootstrap 5.3+的新函数
用CSS变量（Bootstrap 5+）适合动态切换，但别硬盖属性
适用于：支持深色模式、用户主题切换、运行时配色调整。
- 在
:root里重设--bs-btn-primary-bg，不要去覆盖.btn-primary { background: ... } - 深色模式要配
@media (prefers-color-scheme: dark)块，且里面变量名必须完全一致 - CSS变量对IE无效，如果项目还要兼容IE11，这条路走不通
- 部分组件（如
modal-backdrop）仍依赖Sass生成的硬编码值，变量改了它可能不变
官方定制构建器适合快速出包，但升级时得重来
适用于：项目初期定稿、交付给非前端人员的轻量系统、不想搭构建环境的场景。
- 访问
https://getbootstrap.com/docs/5.3/customize/（Bootstrap 5.3），勾选需要的组件，调变量，下载 - 它本质是预编译好的CSS+JS，不带源码，你无法后续单独改一个
tooltip箭头大小 - Bootstrap升级到5.4后，这个包不会自动更新，必须重新进构建器操作
- 构建器基于Less，而Bootstrap 5主干已迁移到Sass，某些新特性（如CSS容器查询支持）它不包含
真正容易被忽略的是：你改的到底是谁在用的样式。CDN引入的bootstrap.min.css、npm安装的node_modules/bootstrap/dist/css/、还是你自己sass编译出来的？路径不对，所有变量和覆盖都只是幻觉。
