Bootstrap 5 支持运行时 CSS 变量重写，改主题无需构建；而 Bootstrap 4 依赖 Sass 编译链，改变量必须重编译，且工具类耦合高、RTL 和响应式支持弱，迁移时需注意断点逻辑、JS API 和类名变更等兼容细节。
Bootstrap 4 的定制依赖 Sass 编译链，改个颜色就得重编译
Bootstrap 4 用的是 Sass（LibSass），所有主题变量都写在 _variables.scss 里，比如 $primary、$spacer。你改了变量值，必须走完整构建流程：改变量 → 重新 sass 编译 → 输出 CSS → 替换线上文件。没有构建环境？那就只能手动覆盖类，或者硬写 !important。
常见错误现象：
直接在 HTML 里改 style="background: #5d4037"，结果被 Bootstrap 的 .btn-primary 里带 !important 的 background 覆盖掉；或者改完变量却忘了运行 npm run build，页面样式纹丝不动。
- 变量不是全局生效的——比如改了
$body-bg，但.card的背景色还走自己的$card-bg，得一个个查依赖链 - 间距单位靠
$spacer单变量驱动，但$spacersmap 是基于它算出来的，单独改$spacer不同步更新$spacers，就会出现mt-4实际是 2rem 而不是预期的 2.5rem - 深色模式要自己手写媒体查询 + 全量变量重定义，没现成钩子
Bootstrap 5 支持运行时 CSS 变量重写，改主题不用动构建
Bootstrap 5 把关键样式参数全暴露为 CSS 自定义属性，比如 --bs-primary、--bs-gutter-x、--bs-border-radius。你不需要碰 Sass，只要在 :root 或某个容器里改这些变量，所有用到它们的组件（.btn、.card、栅格间距）会自动响应。
实操建议：
想一键切深色主题？加一段媒体查询就行：
@media (prefers-color-scheme: dark) { :root { --bs-primary: #0d6efd; --bs-bg: #212529; } } 想局部换色？给某个 section 加 style="--bs-primary: #e63946;"，里面所有 .btn-primary 就立刻变红。
立即学习“前端免费学习笔记（深入）”；
- 别直接覆盖
.btn-primary的background——它内部用的是var(--bs-primary)，硬写 background 会被变量和!important双重压制 -
--bs-gutter-x影响所有.gx-*类，包括嵌套的.row，改一个值就全局生效 - 断点宽度也暴露为
--bs-breakpoint-xs等变量，你在原生@media里可以直接引用，不用翻文档查像素值
Bootstrap 4 的工具类耦合度高，定制时容易连锁失效
Bootstrap 4 的 .col-md-6 内部绑定了 flex 布局逻辑，宽度计算依赖父级 .row 的 display: flex 和负 margin。你想把列放进 display: grid 容器？不行，.col 会塌掉——因为它的 flex: 0 0 50% 在 grid 下不生效。
同样，.ml-3 是“物理左距”，在 RTL 页面里不会自动翻转；而 .ms-3（v5）是“起始边距”，浏览器会根据 dir="rtl" 自动映射到右。v4 里你要支持 RTL，得额外写一套 .mr-3[dir="rtl"] 规则，维护成本翻倍。
-
.form-group被移除后，v4 项目靠它撑开垂直间距，升级 v5 时若只删 class 不补mb-3，表单控件就挤在一起 - v4 的
.btn圆角靠$border-radius变量，但.card圆角用的是独立的$card-border-radius，想统一得改两处 - 间距类如
mt-5在 v4 中数值固定（默认 3rem），但在 v5 中是calc(var(--bs-spacer) * 5)，可被根变量动态缩放
迁移时最容易被忽略的兼容细节
从 v4 升到 v5，最痛的不是功能缺失，而是“看起来一样，实际行为不同”。比如 .col-6 在 v4 表示“仅 xs 断点生效”，在 v5 表示“所有断点都占 6 列”——漏写 .col-md-6，最小屏下就不是满宽而是内容自适应宽度。
还有 JS 层面：data-dismiss="alert" 必须改成 data-bs-dismiss="alert"，少写 bs- 前缀，关闭按钮就静默失效；$(el).modal('show') 得换成 new bootstrap.Modal(el).show()，否则控制台报 $ is not a function 但 modal 就是打不开。
- v5 的
.g-3类只作用于.row直接子元素的 padding，不是靠负 margin 模拟间隙，所以嵌套.row时外层.gy-4+ 内层.gy-2= 总垂直间距 6rem，v4 里是覆盖关系 - v4 的
.card-block在 v5 中必须换成.card-body，且后者默认无 padding，得手动加p-3 - 如果你项目用了自定义 Sass 变量覆盖，v5 升级后务必检查
$spacersmap 是否重定义——只改$spacer不够，mt-4可能突然变小或消失
