Bootstrap 5与4是行为逻辑不同的两套系统：data-属性必须改为data-bs-前缀，否则JS组件静默失效；.col-6含义变为全断点生效；d-flex默认flex-wrap:wrap；.container-fluid默认带水平padding；方向类改用-start/-end；JS调用须改用new bootstrap.XX()实例化。
Bootstrap 5 和 4 不是“升级补丁”，而是两套行为逻辑不同的系统——选错版本，轻则样式错乱、交互失灵，重则整页布局崩塌、JS 组件静默失效。
data- 属性必须加 bs- 前缀才能工作
Bootstrap 5 的 JS 组件只识别 data-bs-*，旧写法如 data-toggle、data-dismiss、data-target 全部失效，且控制台不报错，点击没反应就是它在作怪。
-
data-toggle="modal"→ 必须改成data-bs-toggle="modal" -
data-dismiss="alert"→ 改为data-bs-dismiss="alert"，漏写就关不掉提示框 -
data-target="#myTab"→ 改为data-bs-target="#myTab"，否则 Tab 切换卡死
.col-6 含义翻转：从“仅 xs”变成“全断点生效”
v4 中 .col-6 等价于 .col-xs-6，只在超小屏起作用；v5 中它表示“所有尺寸下都占 6 列”，漏写响应式类会导致手机端列宽异常（比如内容撑开、换行错乱）。
- 原来 v4 写法：
.col-md-6 .col-lg-4→ v5 必须补上.col-12：.col-12 .col-md-6 .col-lg-4 - 漏写
.col-*类，该列在移动端会退化为width: auto，由内容撑开，不是满宽 -
.col（无数字）仍等分，但用的是flex: 1 1 0，长文本不换行时可能横向溢出
JS 调用方式彻底重构：$().modal() 直接报错
Bootstrap 5 移除 jQuery 依赖，所有组件必须用原生实例调用，$ 已不再是函数，$().modal('show') 会抛 TypeError: $ is not a function。
- v4 写法：
$('#myModal').modal('show') - v5 写法：
new bootstrap.Modal(document.getElementById('myModal')).show() -
Dropdown、Toast、Tooltip同理，全部要new bootstrap.XX()实例再调方法 - 即使项目其他地方还用 jQuery（如 DataTables），也不能靠
jQuery.noConflict()让 Bootstrap 5 回退兼容——它的 JS 文件根本不读$或jQuery全局变量
默认行为变更容易被忽略：比如 d-flex 默认换行
v4 的 d-flex 默认 flex-nowrap，v5 反过来默认 flex-wrap: wrap。这个“静默变化”会让工具栏、按钮组、导航条突然断成两行，排查时极难定位。
- 还原 v4 行为：显式加
flex-nowrap -
.container-fluid在 v5 默认带左右padding（值为var(--bs-gutter-x)），不加px-0就会多出空白边距 - 方向类统一改用
-start/-end（如ms-auto替代ml-auto），不是为了“更酷”，而是为 RTL 支持铺路；LTR 页面里效果看似一样，但类名不兼容，不能混用
最麻烦的不是某一行代码改不改，而是这些变化彼此耦合：比如改了 data-bs-* 却忘了同步更新 JS 初始化方式，或补了 .col-12 却没处理 .container-fluid 的 padding，结果改一处、崩三处。迁移前务必先通读 HTML 结构 + JS 初始化 + 响应式类三层，别只搜替换 data-。
