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的<router-view></router-view>内部直接写class="btn btn-outline-secondary"这类类名，无需 wrapper 组件 - 避免在
mounted()里手动调new bootstrap.Modal(...)，优先用v-if控制显隐，让 Vue 管理生命周期
纯 HTML + Bootstrap 5 实现轻量 SPA 的限制
适合静态内容页切换（比如产品介绍页、文档页），没有数据绑定和状态同步，但能避开构建工具。
- 必须用
history.pushState()+window.addEventListener('popstate', ...)，不能只靠<a href="#about"></a>锚点跳转——那不算 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() -
<b-nav></b-nav>的active-nav-item-class默认不生效，需配合<router-link></router-link>的active-class手动同步 -
<b-modal></b-modal>的hide-footer和ok-only不能同时用，否则确认按钮消失——这是已知 bug，得用footer-html替代 - SSR 场景下，
bootstrap-vue-3的<b-tooltip></b-tooltip>会在服务端报window is not defined，需用client-only包裹或改用原生title属性降级
真正卡住人的往往不是“怎么加 class”，而是 JS 插件与框架生命周期的错位，以及对 data-bs-* 属性和原生 API 的混用边界没理清。Bootstrap 的 class 层很稳，但它的 JS 部分一旦脱离 jQuery 时代，就得自己扛初始化时机和销毁逻辑。
