bootstrap 5.3+ 通过在 上设置 data-bs-theme="dark" 或 "light" 实现主题切换，依赖 css 变量重计算，需配合 localstorage 持久化、prefers-color-scheme 初始化及手动调用 bootstrap.theme.update() 刷新样式。
Bootstrap 没有过时，2024–2026 年它仍是中大型项目、政企系统、快速原型和内部工具的主流选择——尤其当团队需要「稳定交付」而非「前沿实验」时。
data-bs-theme 是 Bootstrap 5.3 主题切换的关键开关
Bootstrap 不再靠 JS 切换 class 或手动加载 CSS 文件来实现暗色模式。data-bs-theme="dark" 直接挂载在 或任意容器上，就能触发整套 CSS 变量重计算。
这背后依赖的是 Bootstrap 5.3 全面重构的 CSS 变量体系（如 --bs-primary、--bs-body-bg），所有组件样式都基于这些变量推导，无需重写 CSS。
- 必须确保 HTML 根节点或父容器设置了该属性，否则暗色模式不会生效
- 不要混用
class="bg-dark text-white"和data-bs-theme="dark"：前者是静态覆盖，后者是变量驱动，冲突时后者优先但可能被覆盖 - 暗色模式下表单控件、日期选择器在 WebKit（Safari）中的渲染问题已在 5.3.3+ 版本修复，低于此版本需手动 patch
bootstrap-sass 仍被大量遗留项目依赖，但新项目应避免
虽然官方已停止维护 bootstrap-sass（2022 年起转向纯 CSS + Sass 源码发布），但很多 Rails、旧版 Angular 或 Gulp 构建项目仍在用它。它的核心问题是：
- 依赖过时的 Sass 语法（
@import而非@use），与 Dart Sass 2.0+ 不兼容 - 变量覆盖逻辑脆弱：必须在
@import "bootstrap"前定义所有$xxx !default变量，顺序错一位就失效 - JavaScript 插件绑定方式与原生 Bootstrap 5 的 ESM 导入不一致，容易引发
Modal is not a constructor类错误
新项目直接用官方 npm 包 bootstrap（含 scss/ 源码目录和 ESM js/dist/），配合现代构建工具（Vite、Webpack 5+）更稳妥。
nav-underline 这类新变体类暴露了 Bootstrap 的演进逻辑
nav-underline 不是凭空加的功能，而是 Bootstrap 在克制扩展性与保持语义之间找平衡的结果：它没新增组件，只加了一个修饰类，复用现有 .nav 结构和 JS 行为。
- 所有新变体类（如
progress-bar-striped、btn-outline-success）都遵循同一规则：不改变 DOM 结构，只改样式流 - 它们依赖预编译的断点变量（
$grid-breakpoints），所以你不能用col-xxs-6这种不存在的类名——Bootstrap 的响应式类只到xxl（1400px） - 如果你需要自定义断点，必须修改
_variables.scss并重新编译，不能靠 utility 类临时拼凑
真正容易被忽略的，是 Bootstrap 对「无障碍默认值」的持续收紧。比如 5.3 中 progress 组件强制要求 role="progressbar" 和 aria-valuenow，漏掉会导致 Lighthouse 评分直降。这不是可选项，是框架级约束——它意味着你不能再把 Bootstrap 当成“写完就能上线”的快捷键，而要真正理解它每行 HTML 背后的语义契约。
