Bootstrap 类名耦合紧致，修改样式易引发全局影响；应优先使用 SASS 变量重载而非硬覆盖；避免额外 class 微调；v5 已移除 jQuery 强依赖但部分插件仍需；栅格嵌套过深易失灵；自定义构建体积大且 tree-shaking 有限。
Bootstrap 的 CSS 类名耦合太紧，改样式前先想清楚要不要动它
用 Bootstrap 快，是因为它把 btn、card、col-md-6 这类类名直接绑死了行为和视觉。你改一个 btn-primary 的背景色，可能顺带影响所有带这个类的按钮，甚至波及到 JS 插件的判断逻辑（比如某些组件靠 btn 类触发初始化）。
常见错误现象：!important 滥用、覆盖样式越写越多、换主题时发现 80% 的 CSS 是为绕过 Bootstrap 写的。
- 真要定制，优先走官方 SASS 变量重载（
$primary、$border-radius），而不是在 CSS 里硬盖 - 避免给组件加额外 class 来“微调”，比如
<button class="btn btn-primary my-btn-fix">—— 这等于埋了个未来必须全局搜索替换的雷 - 如果项目需要频繁改外观，Bootstrap 不是省事，是延后成本：前期快，后期改一个圆角，得查三处源码、两处 JS、一处文档
Bootstrap 5 默认不带 jQuery，但部分插件仍依赖它
从 v5 开始，Bootstrap 官方移除了对 jQuery 的强制依赖，modal、dropdown 等都用原生 JS 重写了。但现实是：很多老项目、第三方封装、甚至部分社区插件（比如某些日期选择器或表格扩展）仍悄悄 require $。
使用场景：升级到 Bootstrap 5 后，$('#myModal').modal('show') 报 TypeError: $ is not a function，或者模态框点不开、下拉菜单不响应。
- 检查控制台是否报
jQuery is not defined；如果有，不是 Bootstrap 问题，是你引入顺序或模块加载逻辑漏了 jQuery - 如果你没主动用 jQuery，就别引入它 —— Bootstrap 5 的 JS API 全是
bootstrap.Modal.getOrCreateInstance()这种写法，更干净 - 注意 CDN 引入的完整版（
bootstrap.bundle.min.js）含 Popper，但不含 jQuery；单独引bootstrap.min.js还得自己配 Popper
栅格系统在复杂布局中容易“套娃失灵”
container → row → col 这套结构看着简单，但嵌套三层以上、又混用 col-auto 和 col-6 时，宽度计算会变不可预测，尤其在 flex 与 float 混用的老版本（v4）里。
常见错误现象：子 col 不占满父 row、响应断点失效、col-sm-12 col-md-6 在小屏下反而只占一半宽。
- 别在
col里再套container——container自带 padding，会破坏栅格基线 - 用
row-cols-*替代多层col嵌套做等分布局（比如row row-cols-2 row-cols-md-4） - v5 的
g-3（gap）比 v4 的mx-n2+px-2更可靠，但 Safari 旧版对gap支持差，需测 iOS 14.5 以下设备
自定义构建体积大，tree-shaking 效果有限
哪怕只用了 Alert 和 Toast，全量引入 bootstrap.min.js 仍有 ~20KB（gzip 后），因为它的模块导出方式不是 ESM 原生风格，Webpack 或 Vite 的静态分析很难精准剔除未用代码。
性能影响：首屏 JS 加载慢一点不明显，但对 Lighthouse 的 “Reduce unused JavaScript” 项直接扣分；更麻烦的是，SASS 编译时若没关掉未用组件，bootstrap.scss 里默认 import 的所有工具类（text-truncate、visually-hidden 等）全打进 CSS。
- 用 SCSS 时，注释掉不需要的
@import行（比如删掉@import "mixins/breakpoints"上面的@import "components/tooltip"） - JS 端改用按需导入：
import { Toast } from 'bootstrap'，但确认你的打包器支持具名导出解析（Vite 默认行，Webpack 需配experiments.topLevelAwait: true） - 别信“只引入 CSS 文件就能省 JS”——很多工具类（如
position-sticky）依赖 JS 补丁来兼容旧浏览器
真正卡住人的地方往往不是“会不会用”，而是改着改着发现：某个 data-bs-toggle 属性在 shadow DOM 里不生效，或者 col 在 display: contents 容器里直接消失——这些边界情况文档很少提，得翻源码里的 getComputedStyle 调用点才能定位。
