bootstrap 5未被淘汰，但默认全量css因体积大（>140kb）、无法tree-shake、定制需重编译scss，与现代构建流程、原子化样式及组件化开发存在三重不匹配。
Bootstrap 5 没有被“淘汰”，但它的默认 CSS 行为（尤其是未定制的完整版 bootstrap.min.css）在现代 CSS 项目中常被主动替换，核心原因是：它和现代构建流程、样式控制粒度、体积敏感场景存在三重不匹配。
为什么直接引入 bootstrap.min.css 会拖慢首屏？
未经裁剪的 bootstrap.min.css（v5.3+）压缩后仍 >140KB，且含大量未使用的工具类（如 ms-0 到 ms-5、text-start 到 text-wrap）、断点冗余规则（col-md-6 + col-lg-4 + col-xl-3 全量生成）、以及整套组件基础样式（哪怕你只用 card 和 btn）。现代项目普遍要求 CSS in JS 或原子化方案（如 Tailwind），而 Bootstrap 的“全量交付”模式与之冲突。
- 构建时无法 Tree-shake：CSS 是字符串，打包器无法识别哪些 class 实际被用到
- CDN 引入即加载全部：哪怕页面只渲染一个按钮，也要下载整套栅格、表单、工具类
- 自定义主题必须重编译 SCSS：改个主色就得跑一遍构建，不如
tailwind.config.js里改theme.colors.primary立刻生效
为什么开发者宁愿手写 flex/grid 也不用 .row/.col？
Bootstrap 5 的栅格系统本质仍是基于 flex 的抽象层，但它的语义约束（必须严格 row → col → content）和响应式类名（col-md-6）在组件化开发中成了负担。尤其当你要封装一个可复用的卡片组件时，col 类会强行把布局逻辑耦合进 HTML 结构，破坏封装性。
-
.row自带负边距，若父容器有overflow: hidden，会导致子项横向滚动条意外出现 -
.col默认flex: 1 0 0%，但内容超长时若没设word-break: break-word，会撑破容器 - 想用 CSS Grid 布局？
.row的display: flex会和display: grid冲突，必须额外加 wrapper 或重置 display - 现代框架（React/Vue）倾向用
className={clsx("grid grid-cols-1 md:grid-cols-2")}直接写逻辑，而非塞一堆col-12 col-md-6
为什么 data-bs-toggle 组件在 SPA 中容易失效？
Bootstrap 5 的 JS 组件（Modal、Dropdown、Offcanvas）依赖 DOM 就绪后手动初始化，且内部使用原生事件监听（如 click + data-bs-toggle），这和现代框架的生命周期、状态驱动模型天然不兼容。
- React 中动态渲染的按钮，
data-bs-toggle="modal"不会自动绑定事件——因为 Bootstrap 初始化只在DOMContentLoaded执行一次 - Vue 里用
v-if控制弹窗显示，new bootstrap.Modal()创建实例后，DOM 被销毁，但实例未销毁，导致内存泄漏 - 组件内调用
modal.show()后，若父组件 re-render，modal实例可能丢失对新 DOM 节点的引用，关闭失败 - 更隐蔽的问题：
Tooltip依赖document.createElement('div').attachShadow，而某些 SSR 渲染环境（如 Next.js App Router）下attachShadow不可用，直接静默降级
真正难替换的不是 Bootstrap，而是旧协作习惯
最常被忽略的一点是：技术选型本身不难决策，难的是团队对“class 堆砌”的路径依赖。比如有人坚持用 card border rounded p-4 shadow-sm，却拒绝拆成 card（结构） + border（视觉） + p-4（间距）的组合逻辑，本质上还是在用 Bootstrap 当“样式速查表”，而非工程化工具。这种惯性比 CSS 文件大小或 JS 兼容性更难打破。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
