直接替换 CSS 文件会导致表单验证失效、栅格错位、间距失控等静默故障；必须清理 jQuery、统一替换 data- 属性为 data-bs-* 前缀、重写 JS 初始化逻辑、按需编译 Sass 并修正 DOM 结构。
直接替换 CSS 文件会导致表单验证失效、栅格错位、间距失控等静默故障，不是改几个类名就能跑通的；减少体积不能靠删工具类，得从构建源头控制。
必须先清理 jQuery 和 data- 属性前缀
Bootstrap 5 的 JS 组件完全不识别 data-toggle 或 $().modal()，哪怕你没调用，残留的 jQuery 也会干扰原生组件初始化。
- 执行
npm uninstall jquery popper.js（不是npm rm），再装@popperjs/core - 全局搜索并替换所有
data-toggle→data-bs-toggle、data-dismiss→data-bs-dismiss、data-target→data-bs-target - JS 初始化逻辑必须重写：
$(document).ready(...)改为document.addEventListener('DOMContentLoaded', ...)，所有$('...').tooltip()类调用换成new bootstrap.Tooltip(...)
别全局引入 CSS，按需编译 Sass
Bootstrap 5 的 bootstrap.min.css 包含全部组件和工具类，但多数项目只用其中 30%；体积膨胀主因是未做裁剪，而非框架本身臃肿。
- 删掉
引入，改用自建main.scss，只@import需要的模块，例如：@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/forms"; @import "bootstrap/scss/buttons"; - 禁用不需要的工具类：在
@import "bootstrap/scss/utilities"前定义$utilities: map-remove($utilities, "margin", "padding", "position", "shadows"); - 如果你没用 RTL，删掉
@import "bootstrap/scss/rtl"；如果不用动画，跳过transitions和animations
.form-group 移除后结构必须重写，否则验证失效
.form-group 不是纯样式类，它在 v4 中隐含了 label + input + .invalid-feedback 同级紧邻的 DOM 契约；v5 移除后仅加 mb-3 会导致 JS 找不到反馈元素。
- 正确结构必须是：请输入有效邮箱
-
.invalid-feedback必须紧跟后且同级，不能嵌套在其他 div 里，否则bootstrap.Form实例无法关联 - 旧项目若用 jQuery 动态插入
.form-group，这段逻辑必须重写，否则验证反馈永远不显示
.g-* 和 .row-cols-* 行为收紧，漏断点会引发小屏塌陷
v4 的 .row-cols-2 全断点生效，v5 中它等价于 .row-cols-md-2，xs/sm 下自动退化为单列；.g-3 默认同时作用于水平+垂直间隙，嵌套时容易叠加出双倍空白。
- 所有
.row-cols-*使用处必须补全断点链：.row-cols-1 .row-cols-sm-2 .row-cols-md-3，不能省略.row-cols-1，否则 xs 下.col会按内容宽度撑开 - 只需水平间隙用
.gx-3，只需垂直用.gy-4；避免无差别用.g-3 -
.container-fluid在 v5 中默认带padding-left/right: var(--bs-gutter-x)，最快修复是加px-0，但全局还原需重设--bs-gutter-x: 0，注意这会影响所有.gx-*类
最易被忽略的是 $spacers 变量——如果你自定义过它，必须同步更新整个 map，不能只改 $spacer 单值，否则 mt-5、px-4 等工具类缩放异常，这种问题不会报错，只会让间距在不同设备上随机错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
