直接改 bootstrap.min.css 不可行，因其压缩无结构、无变量、升级即覆盖；唯一纯 css 方式是新建 custom.css 并确保在 bootstrap.min.css 后加载，否则规则失效。
直接改 bootstrap.min.css 不可行
你无法安全地编辑 bootstrap.min.css 文件本身来定制 UI：它被压缩、无结构、无变量、无依赖关系标识。哪怕只改一个颜色，也得手动搜索所有 #0d6efd 并判断上下文是否该替换；更麻烦的是，按钮悬停、禁用、焦点等状态样式散落在不同规则块里，漏掉一处就会导致视觉不一致。而且下次升级 Bootstrap，整个文件被覆盖，所有手工修改全丢。
纯 CSS 覆盖必须按优先级顺序加载
唯一可行的纯 CSS 方式，是写一份独立的 custom.css，并在 HTML 中确保它 严格排在 bootstrap.min.css 之后加载：
<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"><link href="css/custom.css" rel="stylesheet">
否则你的规则会被 Bootstrap 的 !important 或更具体的选择器压制。常见错误包括：
- 把
custom.css放在bootstrap.min.css前面——完全无效 - 用
<style></style>写在末尾但没加!important——部分规则被覆盖（如.btn的 padding） - 覆盖断点相关类（如
.d-md-none）时，没重写所有响应式层级（@media (min-width: 768px)等）——只在某尺寸生效
哪些定制能靠纯 CSS 完成，哪些不能
能做的：
- 重定义组件外观：比如把
.btn-primary背景色改成#5d8aa8，圆角设为6px - 调整间距类行为：重写
.p-3的padding值，或让.m-auto在 flex 容器中表现不同 - 禁用特定工具类：用
.text-muted { display: none !important; }（不推荐，但技术上可行）
做不到的：
- 删掉未使用的 CSS 规则（如你根本不用
.carousel，但它的 12KB 样式仍随bootstrap.min.css加载） - 修改栅格列数（
$grid-columns: 12是 Sass 编译期变量，CSS 运行时不可变） - 动态切换主题色（
var(--bs-primary)可以覆盖，但所有基于它的派生色（如--bs-primary-rgb）不会自动更新）
真正要“完整定制 UI”，绕不开 Sass 编译
所谓“完整”，意味着统一控制颜色体系、断点阈值、字体栈、阴影深度、组件尺寸比例……这些全部由 Sass 变量驱动。纯 CSS 只能打补丁，不能重构骨架。例如，你想把所有 border-radius 从 .25rem 改成 .125rem，Bootstrap 有 27 处显式声明和混入调用，你得逐个找、逐个覆写；而 Sass 中只需改一行 $border-radius: .125rem，全链路生效。
如果你的构建环境真不支持 Sass（比如纯静态托管 + CDN），那“完整定制”本身就是伪命题——你只能接受 Bootstrap 的默认皮肤，或接受大量冗余 CSS 和维护成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
