bootstrap 5 中所有 data- 属性必须改用 data-bs- 前缀，否则 js 组件静默失效；方向类改为 -start/-end 以支持 rtl；.g- 类拆分为 .gx- 和 .gy-*；.container-fluid 默认带水平 padding；d-flex 默认启用 flex-wrap: wrap；.col-6 含义变为全断点生效。
data-* 属性全部强制加 bs- 前缀
所有交互类的 data 属性必须改写为 data-bs-*，否则 JS 组件静默失效——点击没反应、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，它也完全不读旧写法。
方向类从 -left/-right 改为 -start/-end
不再用物理方向（left/right），改用逻辑起点/终点，为 RTL（如阿拉伯语）原生支持铺路。在 LTR 页面里 ms-3 看起来和 ml-3 一样，但语义不同、不可互换。
-
float-left→float-start；text-right→text-end -
ml-auto→ms-auto；mr-2→me-2 - 若项目已启用
dir="rtl"，旧ml/mr会错位，新类自动翻转
间距与栅格类拆分：.g-* → .gx-*/.gy-*
.g-3 仍兼容，但推荐显式指定方向；.row-no-gutters 已废弃，必须用 .g-0 或 .gx-0 .gy-0。
-
.g-3同时设水平+垂直 gap；.gx-3仅水平，.gy-4仅垂直 - 嵌套
.row时，.gy-4和子.gy-2是叠加关系，不是覆盖 -
.container-fluid在 v5 默认带padding-left/right: var(--bs-gutter-x)，不加px-0会导致左右多出空白
d-flex 默认启用 flex-wrap: wrap
v4 的 d-flex 默认不换行（flex-nowrap），v5 反过来——这是最常被忽略的“静默破坏”点。工具栏、按钮组横排突然断成两行，大概率就是它在作怪。
- 要还原 v4 行为，必须显式加
flex-nowrap -
d-inline-flex行为未变，仍是内联 + 不换行 -
flex-grow-1等尺寸类不支持响应式前缀：flex-grow-md-1会被浏览器直接忽略（无报错）
真正容易被忽略的是：这些变化不是孤立的样式调整，而是整套布局逻辑重排。比如 .col-6 在 v5 表示“所有断点都占一半”，而在 v4 它只在超小屏生效——类名没变，含义已翻转。迁移时不能只靠搜索替换，得逐层验证 DOM 结构和 JS 交互是否还成立。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
