bootstrap 5 彻底移除 jquery 依赖，所有组件重写为原生 js，popper 升级至 v2，栅格、间距、flex 工具类逻辑变更，组件 api 和 html 结构不兼容 v4，sass 强制使用 dart sass 且变量命名调整。
jQuery 依赖被彻底移除
Bootstrap 5 不再内置任何 jQuery 调用，所有 JS 组件（Modal、Dropdown、Toast 等）全部重写为原生 JavaScript。这意味着你以前写的 $(selector).modal('show') 会直接报错：TypeError: $ is not a function。
- 必须把所有
$(...)写法替换成原生 DOM 操作或 Bootstrap 的 ES 模块 API，例如：new bootstrap.Modal(document.getElementById('myModal')).show() - 如果你项目中还混用 jQuery（比如其他插件依赖它），可以保留 jQuery，但 Bootstrap 自身不再需要它——别再把它当作 Bootstrap 运行前提
- Popper.js 也从 v1 升级到 v2，如果手动调用
Popper.createPopper()，参数签名已变，需检查placement、modifiers等字段是否适配
栅格类和间距工具大幅简化
Bootstrap 5 把响应式前缀逻辑收口，.col-md-4 这类写法依然可用，但默认断点行为变了：现在 .col-6 表示“在所有尺寸下占一半”，而不再是“仅在超小屏生效”；同时废弃了 .col-xs-*（v4 中已弃用，v5 彻底删除）。
-
form-group类被移除，改用间距工具替代，例如mb-3替代原来的包裹容器 - 间距单位统一基于
rem，且默认$spacer = 1rem，如果你覆盖了 Sass 变量但没同步更新$spacersmap，会导致mt-5、px-4等类失效或缩放异常 - Flex 工具类更激进：
d-flex默认启用flex-wrap: wrap，而 v4 是nowrap；如需禁用换行，得显式加flex-nowrap
组件 API 和 HTML 结构不向后兼容
很多常用组件的初始化方式、data 属性、甚至必要 HTML 结构都变了。不是“换个类名就行”，而是底层交互逻辑重构了。
-
alert组件移除了data-dismiss="alert"，改用data-bs-dismiss="alert"—— 少写bs-前缀就无法关闭 -
button触发 modal 时，data-target="#id"必须改为data-bs-target="#id"；否则控制台静默失败，modal 就是打不开 -
card内部结构微调：.card-block被.card-body完全取代，且.card-header不再自动加背景色，需手动加bg-light或自定义 - 表单验证样式逻辑下沉到
:valid/:invalid伪类，依赖浏览器原生约束；若用 JS 动态设置setCustomValidity，必须配合reportValidity()才能触发.is-valid类
Sass 编译和定制链路断裂风险高
v5 强制使用 Dart Sass（不再支持 LibSass），且变量/函数命名批量调整，直接 @import "bootstrap/scss/bootstrap" 并覆盖变量可能编译失败。
- 旧版自定义变量如
$enable-gradients仍存在，但$icon-font-name等已被移除（图标不再内置）；若项目里还引用bootstrap-icons的字体路径，需单独安装并配置 -
theme-colorsmap 默认值变了，primary从#007bff改为#0d6efd；如果你靠 CSS 选择器硬写颜色（如.btn-primary { background: #007bff }），视觉会突然偏蓝 - 构建脚本若仍用
node-sass，会报Invalid CSS after "...e: $font-family": expected "{", was ";"—— 必须切到sass（Dart Sass）包，并更新package.json中的 script
bs-、Sass 变量名拼错半个字母、或者以为 mb-3 还像以前那样只在某断点生效——结果在手机上间距炸开。动手前先 grep 全局的 data- 和 $，比盲目替换快得多。
