Bootstrap 5是底层重写而非简单升级，必须清除jQuery和popper.js依赖、将data-toggle改为data-bs-toggle、移除.form-group并重构表单结构、补全.row-cols-*断点、改用Dart Sass且更新SCSS变量。
bootstrap.Modal 不再依赖 $，data-toggle 必须改成 data-bs-toggle，.form-group 被移除——这不是“升级”，而是框架底层运行逻辑的重写。如果你还在用 Bootstrap 4，就等于继续维护一套已停止更新、不兼容现代构建链路、且 JS 组件随时可能因 jQuery 冲突静默失效的旧系统。
jQuery 依赖残留会让所有 JS 组件静默失效
哪怕你项目里只引入了 jquery 但一行 $() 都没写，只要 bootstrap.js 加载前全局存在 window.$，Bootstrap 5 就会跳过原生初始化，modal 打不开、dropdown 点不动、toast 不弹出，控制台还不会报错。
- 执行
npm uninstall jquery popper.js（不是npm rm，后者不删package-lock.json） - 安装新版 Popper：
npm install @popperjs/core - 全局搜索
$(，把所有$(selector).modal('show')替换为new bootstrap.Modal(el).show() - 检查
$(document).ready()是否全部换成document.addEventListener('DOMContentLoaded', ...)
.row-cols-* 在移动端默认失效，必须显式补全断点
v4 中 .row-cols-2 默认所有尺寸生效；v5 中它只在 xs 断点起效，sm 及以上退化成单列——你测试时可能只看了桌面端，手机上已经错乱了。
- 所有
.row-cols-*使用处必须补全断点：.row-cols-1 .row-cols-sm-2 .row-cols-md-3 -
.col-auto配合.w-100换行时，v5 中可能多出空隙，需加flex-shrink-0或实机验证渲染效果 -
.row默认display: flex，若子列含position: absolute或图片没设max-width: 100%，会破坏等高拉伸
.form-group 不能全局替换成 mb-3
.form-group 不只是间距容器，它隐含 label+control 语义包裹、验证反馈定位、响应式对齐逻辑。直接替换会导致小屏错位、:valid/:invalid 不触发、form-text 偏移。
- 表单控件外层改用
<div class="mb-3">包裹，但label和input.form-control必须同级 - 验证反馈需显式加
invalid-feedback或valid-feedback类，且必须紧跟在form-control后 - JS 动态设校验状态时，仅调
setCustomValidity('')不够，必须同步调el.reportValidity()
Dart Sass 和变量系统不兼容，自定义主题容易编译失败
Libsass 已被弃用，Bootstrap 5 强制使用 Dart Sass；$grid-breakpoints 默认值变更（如 sm: 576px），自定义变量若沿用 v4 的 $spacers 或 $font-size-base 计算逻辑，大概率编译报错或样式偏移。
- 执行
npm install sass --save-dev替换构建工具中的 Libsass - 检查所有自定义 SCSS 变量是否基于 v5 文档重新声明，尤其注意
$enable-negative-margins、$border-radius等开关项默认值变化 -
.container-fluid在 v5 中默认带padding，要还原 v4 视觉需手动加.px-0
