Bootstrap本身不能直接构建SPA，它不提供路由、状态管理或视图切换能力；需搭配Vue/React等框架或手动用History API+fetch实现，仅负责样式和基础交互组件。

Bootstrap 本身不能直接构建单页面应用（SPA），它不提供路由、组件状态管理或视图切换能力。你要做 SPA，必须搭配前端框架（如 Vue/React）或手动用 History API + fetch 实现，Bootstrap 只负责样式和基础交互组件。

用 Vue + Bootstrap 5 搭建 SPA 的关键配置

这是目前最主流、可维护性最强的方式：Vue 管逻辑和路由，Bootstrap 5 提供 class 和 JS 插件（如 modal、dropdown）。

• 安装时别漏掉 @popperjs/core：npm install bootstrap @popperjs/core，否则 dropdown、tooltip 会失效
• 在 main.js 中按顺序导入：import 'bootstrap/dist/css/bootstrap.min.css' → import 'bootstrap'（不是 bootstrap/dist/js/bootstrap.min.js，后者不含 Popper）
• vue-router 的 内部直接写 class="btn btn-outline-secondary" 这类类名，无需 wrapper 组件
• 避免在 mounted() 里手动调 new bootstrap.Modal(...)，优先用 v-if 控制显隐，让 Vue 管理生命周期

纯 HTML + Bootstrap 5 实现轻量 SPA 的限制

适合静态内容页切换（比如产品介绍页、文档页），没有数据绑定和状态同步，但能避开构建工具。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 必须用 history.pushState() + window.addEventListener('popstate', ...)，不能只靠 锚点跳转——那不算 SPA，只是滚动
• fetch() 加载的 HTML 片段里，data-bs-toggle="modal" 类不会自动初始化；得在插入后手动调 bootstrap.Modal.getOrCreateInstance(element)
• 所有 JS 插件（collapse、tab）都依赖 DOM 存在，动态插入的内容需重新初始化，否则点击无反应
• 不支持服务端渲染（SSR）或 SEO 友好，爬虫看到的只是初始 HTML

BootstrapVue3 在 Vue 3 项目中的坑

如果你选封装库而非原生 Bootstrap class，bootstrap-vue-3 是当前唯一活跃维护的选项（bootstrap-vue 已停更）。

• 注册插件必须在 createApp(App).use(BootstrapVue3) 之后，且不能晚于 .mount()
• 的 active-nav-item-class 默认不生效，需配合 的 active-class 手动同步
• 的 hide-footer 和 ok-only 不能同时用，否则确认按钮消失——这是已知 bug，得用 footer-html 替代
• SSR 场景下，bootstrap-vue-3 的 会在服务端报 window is not defined，需用 client-only 包裹或改用原生 title 属性降级

真正卡住人的往往不是“怎么加 class”，而是 JS 插件与框架生命周期的错位，以及对 data-bs-* 属性和原生 API 的混用边界没理清。Bootstrap 的 class 层很稳，但它的 JS 部分一旦脱离 jQuery 时代，就得自己扛初始化时机和销毁逻辑。