Bootstrap未被淘汰,但class堆砌式开发模式已退出中大型项目主流;它退居demo搭建、后台管理页及遗留系统维护等场景,主因是bootstrap.css体积大(>140KB),而Tailwind可按需生成极简CSS。

Bootstrap 还在用,但“传统写法”确实被主流项目淘汰了
不是 Bootstrap 本身死了,而是 class="btn btn-primary btn-lg" 这种靠堆 HTML class 控制样式的开发模式,在 2026 年的中大型前端项目里基本没人当主力方案了。它没消失,只是退到了“快速搭 demo”“后端写管理页”“遗留系统维护”这些特定场景里。
为什么新项目很少选 Bootstrap(尤其是 v5/v6)?
核心矛盾不在功能,而在开发节奏和协作成本:
-
bootstrap.css默认体积大(压缩后仍 >140KB),而一个tailwind.css按需生成后常压到 - 响应式断点写死在 CSS 里(
col-md-6),不如flex flex-col md:flex-row那样可组合、可抽象、可封装成 React/Vue 组件 - 定制主题要改 SCSS 变量 + 重新编译,Tailwind 直接改
tailwind.config.js就生效,连构建都不用等 - 组件交互逻辑(如
Dropdown)仍依赖 DOM 操作和事件委托,和现代框架的响应式状态驱动不匹配,容易出现 re-render 失效或内存泄漏
哪些场景下 Bootstrap 仍是合理选择?
别硬扛,该用就用,关键是别用错地方:
- 后端同学独立开发内部工具页:引入 CDN + 一段
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">,5 分钟出表单,比配 Vite + Tailwind + PostCSS 快十倍 - 需要 IE11 兼容(虽已极少见):Bootstrap 5 仍提供完整 polyfill 支持,而大多数现代 UI 库(Ant Design、Mantine)早已放弃
- 已有大量 Bootstrap 样式的老项目:强行迁移到 Tailwind 会导致样式断裂、回归测试爆炸,不如用
bootstrap-icons+ 原生 JS 封装组件逐步解耦
想继续用 Bootstrap,但避免“被吐槽土”?
关键不是换库,是换用法:
- 禁用所有 JS 插件(
bootstrap.bundle.js),只用 CSS —— 现代框架自己管交互,Bootstrap JS 容易和useState或ref冲突 - 用 SCSS 源码而非 min.css,
@import "functions"; @import "variables"; @import "mixins";后只@include真正需要的栅格和工具类 - 把
container/row/col替换成语义化标签 + CSS Grid/Flex 自定义布局,保留 Bootstrap 的断点变量($grid-breakpoints)但扔掉它的 DOM 结构绑架 - 图标别用
bootstrap-icons的 class 方式,改用 SVG symbol 引用或@heroicons/react,避免 class 泛滥
真正卡住升级的,往往不是技术债,而是团队对“改了会不会崩”的预期管理。Bootstrap 不是泥巴,是还没拆掉的脚手架——拆之前,先确认哪根杆子真在承重。


















