Bootstrap未被淘汰，而是因现代项目需求变化被选择性使用：删bootstrap.min.css是为减重避冗余，弃JS插件是因与框架生命周期冲突，中后台仍用5.3.3版是因等保合规与IE11兼容等现实约束。
Bootstrap 没被淘汰，但确实在部分场景里被主动绕开——不是它变弱了，而是开发者面对的问题变了。
现代项目里 bootstrap.min.css 为什么常被删掉
不是讨厌它，是发现它带来的“确定性”反而成了负担：
- 纯静态页或轻量 SPA（如 Vite + React 小后台）引入整套
bootstrap.min.css，gzip 后仍超 200KB，其中 70% 的类名（如.text-lowercase、.shadow-sm）根本没用到 - 当项目已用 CSS-in-JS 或 Tailwind，再叠一层 Bootstrap 的低特异性规则，调试时经常出现「我改了
$primary，但按钮边框还是蓝的」——其实是第三方组件库内部硬编码了border-color: #0d6efd -
container默认的padding: 0 1.5rem会和body的 margin 折叠，导致首屏内容上移 1px，在 iOS Safari 下触发 viewport 错位，排查时容易误判为 JS 逻辑问题
data-bs-toggle="modal" 在 Vue/React 项目里为何越来越少见
Bootstrap 的 JS 插件依赖 DOM 属性自动初始化，这和现代框架的生命周期管理天然冲突：
HISUI 前端框架开发指南（IRIS版）
下载
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
- Vue 组件内动态渲染
<button data-bs-toggle="modal" data-bs-target="#foo"></button>，但#foo模态框在v-if条件下未挂载时，Bootstrap 会静默失败，控制台不报错，只卡在「点不动」 - React 中用
useEffect手动 new Modal(...)，但bootstrap.bundle.min.js里的 Popper 是全局单例，多个 Modal 实例共享同一份boundary配置，导致一个弹窗设了boundary: 'window'，另一个就跟着失效 - 真正要用 Modal 交互逻辑时，90% 的需求其实是「打开后加载数据」或「关闭前校验表单」，Bootstrap 的纯声明式 API 没法插钩子，最后还得封装一层 wrapper 组件，白搭
为什么中后台还在用 bootstrap@5.3.3 而不是换新框架
不是守旧，是权衡过交付风险后的选择：
立即学习“前端免费学习笔记（深入）”；
- 政企项目上线前要过等保测评，
bootstrap@5.3.3的 XSS 防御策略（如sanitize默认开启、data-bs-*属性白名单）有完整审计报告；而自研组件或新框架的 HTML 插入逻辑得重新走一遍渗透测试 - 老系统要兼容 IE11（虽已弃用，但某省医保平台 2026 年仍在用），
bootstrap@5.3的 CSS 仍保留-ms-前缀降级，@layer或:has()写法直接不可用 - 接手外包遗留系统时，看到
.table-striped + .table-hover就知道这是标准表格，不用翻 JS 查状态管理逻辑；换成class="table table-striped hover:bg-gray-50"，得先确认是 Tailwind 还是自定义 utility class
真正被放弃的不是 Bootstrap，而是「无脑全量引入」的习惯。现在更常见的做法是：只取 scss/bootstrap-grid.scss 和几个变量，或者用 bootstrap-icons 单独引入 SVG 图标——用它的确定性，避开它的冗余性。
