bootstrap 5 升级需全面重构：data- 属性必须加 bs- 前缀，.form-group 被移除需重写 dom 结构，.row-cols- 和 .g-* 行为收紧须补全断点，.container-fluid 默认带 padding，.col-6 含义由仅 xs 生效变为全断点生效。
直接替换 bootstrap.min.css 文件会导致表单验证失效、栅格错位、间距失控等静默故障，不是改几个类名就能跑通的。
data-* 属性必须全部加 bs- 前缀
所有交互组件的 data- 属性不加 bs- 就会静默失效：点击没反应、modal 打不开、alert 关不掉，控制台也不报错。
-
data-toggle="modal"→ 必须改成data-bs-toggle="modal" -
data-dismiss="alert"→ 改为data-bs-dismiss="alert" -
data-target="#myTab"→ 改为data-bs-target="#myTab"
Bootstrap 5 的 JS 只识别 data-bs-*，哪怕你项目里还留着 jQuery，它也完全不读旧写法。
.form-group 被移除，结构必须重写
.form-group 不是“换类名”问题，而是 DOM 结构契约被打破：v4 中它隐含了 label + input + .invalid-feedback 同级紧邻的语义；v5 移除后，仅加 mb-3 会导致验证反馈定位错乱、小屏伪类不触发、.form-text 偏离底部。
- 正确结构：
<div class="mb-3"> <label>邮箱</label><input class="form-control"><div class="invalid-feedback">请输入有效邮箱</div> </div> -
.invalid-feedback必须紧跟input后，且同级；否则 JS 不会把它关联到控件上 - 若旧项目用 jQuery 动态插入
.form-group，这段逻辑必须重写
.row-cols-* 和 .g-* 行为收紧，断点必须补全
v4 的 .row-cols-2 全断点生效，v5 中它等价于 .row-cols-md-2，xs/sm 下自动退化为单列——这不是 bug，是行为收紧。嵌套时 .g-3 和 .gy-2 是叠加关系，不是覆盖，容易产生意外空白。
- 所有使用处必须显式补全断点链：
.row-cols-1 .row-cols-sm-2 .row-cols-md-2 - 不能漏
.row-cols-1：否则 xs 下.col会按内容宽度撑开，不是预期的 100% 宽 -
.g-3同时作用于水平+垂直间隙；如只需水平 gap，用.gx-3；只需垂直，用.gy-4
.container-fluid 默认带 padding，$spacers 必须整体重定义
v5 给 .container-fluid 默认加了 padding-left/right: var(--bs-gutter-x)，这是栅格间隙抽成 CSS 变量的结果。v4 是纯 width: 100%，无 padding。
- 最快修复：
<div class="container-fluid px-0"> <li>全局还原需在 <code>:root里重设--bs-gutter-x: 0，但会影响所有.gx-*类行为 - 若你自定义了 Sass 变量
$spacers，必须同步更新整个 map，不能只改$spacer单值，否则mt-5、px-4等工具类缩放异常
最常被忽略的是：.col-6 在 v5 表示“所有断点都占一半”，而在 v4 它只在超小屏生效——类名没变，含义已翻转；迁移时得逐层验证 DOM 结构和 JS 交互是否还成立。
