Bootstrap 5 已移除 jQuery 依赖，转向现代 CSS（Grid、Flexbox、CSS 变量），仍是管理面板与内部工具较为稳妥的选择。
用途
- 快速原型与 MVP：借助预置组件与工具类快速搭建响应式页面。
- 管理门户与后台仪表盘：在没有专职设计团队的情况下构建整洁、可访问的用户界面。
- 响应式网格布局：使用移动优先的 12 列 Flexbox 与 CSS Grid 布局系统。
- 基于 Sass 的设计系统定制：覆盖主题变量、配色方案与断点。
主要能力
- 响应式 12 列网格与 Flexbox 工具类：移动优先的布局容器，可随视口自适应。
- 组件：卡片、按钮、导航栏、模态框、Toast 等交互组件。
- Sass 设计令牌定制：在编译 Bootstrap 前覆盖变量，例如 $primary、$secondary、$success、$enable-rounded、$border-radius、$enable-shadows，再 @import "bootstrap/scss/bootstrap"。
- 原生 JavaScript 组件初始化：可按需导入单个组件模块，例如 import Modal from "bootstrap/js/dist/modal"、import Toast from "bootstrap/js/dist/toast"，并以编程方式控制模态框与 Toast。
使用方式
快速上手：在页面 head 中引入 CDN 样式表 https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css，并使用 container、row、col-md-6、card、btn 等类名组织内容。
网格与 Flexbox 示例：使用 container-fluid、row g-4 align-items-center 与 col-12 col-md-6 col-lg-4 构建响应式卡片列，配合 d-flex flex-column justify-content-between 控制内部布局。
Sass 定制：先声明变量覆盖，再导入 Bootstrap 源码。
JavaScript 初始化：通过 new Modal(modalEl, { backdrop: "static", keyboard: false }) 与 new Toast(toastEl, { delay: 4000 }) 创建实例，并在事件回调中调用 hide() 与 show()。
常见模式：响应式 Flexbox 导航栏配合折叠按钮，使用 navbar、navbar-expand-lg、navbar-toggler、data-bs-toggle="collapse"、data-bs-target="#navMenu" 等结构实现移动端汉堡菜单与桌面端展开。
适用场景
- 快速原型与 MVP 页面布局。
- 管理后台、内部工具与后台仪表盘界面。
- 需要移动优先响应式网格的站点。
- 需要基于 Sass 覆盖主题变量、配色与断点的设计系统定制。
限制与注意事项
- 不要使用 !important 覆盖 Bootstrap 样式，应使用 Sass 变量或 CSS 优先级。
- Bootstrap 5+ 不应再引入 jQuery，所有插件使用原生 DOM API。
- 避免硬编码像素宽度，应使用工具类（如 w-100、max-w-100）与响应式网格。
- 建议从源码 Sass 编译以剔除未使用组件、减小 CSS 体积，并按需导入单个 JavaScript 组件模块。
- 建议使用 Bootstrap CSS 变量（如 var(--bs-primary)）实现运行时主题切换与暗色模式。
- 交互按钮与模态框应确保正确的 ARIA 属性（aria-expanded、aria-label）。
常见问题排查
- 下拉菜单、模态框或折叠组件点击无反应：未引入 Bootstrap JavaScript 包（bootstrap.bundle.min.js），需在 </body> 前添加脚本。
- 移动端列不换行：使用了固定 .col-6 而未加响应式前缀，应改用 col-12 col-md-6 col-lg-4。
- 自定义 CSS 被 Bootstrap 覆盖：自定义样式表在 head 中先于 Bootstrap CSS 引入，应将自定义 CSS 放在 Bootstrap CSS 链接之后。
参考资料：GetBootstrap。