不能直接在 main.ts 引入 Bootstrap CSS/JS 就稳定使用；Bootstrap 5 JS 组件依赖 DOM 初始化，Vue 3 响应式更新不会自动重初始化，需用 bootstrap-vue-next 封装库或手动管理实例生命周期。
直接在 main.ts 里引入 Bootstrap CSS 和 JS 就能用？
不能——至少“能用”不等于“能稳定响应式交互”。Bootstrap 5 的 JS 组件（如 Tooltip、Modal、Dropdown）依赖 DOM 初始化，而 Vue 3 的响应式更新不会自动重初始化这些组件。你写 <button data-bs-toggle="modal" data-bs-target="#myModal">，首次渲染能弹窗；但若该按钮是 v-if 动态插入的，或模态框内容由 ref 动态更新，原生 Bootstrap 就会失效。
实操建议：
- 优先使用
bootstrap-vue-next这类专为 Vue 3 设计的封装库，它把 Bootstrap 组件转为真正的 Vue 组件，支持响应式 props、v-model、生命周期同步 - 如果坚持纯 Bootstrap 5 + Vue 3，必须手动调用
bootstrap.Modal.getOrCreateInstance()或new bootstrap.Tooltip()，并在onMounted/onUpdated中管理实例生命周期 - 务必引入
bootstrap/dist/js/bootstrap.bundle.min.js（含 Popper），不要只引bootstrap.js，否则 Dropdown/Tooltip 会报Popper is not defined
为什么 npm install bootstrap 后，data-bs-* 属性没反应？
常见错误现象：HTML 写对了，CSS 显示正常，但点击下拉菜单没反应、Tooltip 不出现、Collapse 不展开——本质是 JS 没执行或执行时机不对。
原因和对策：
立即学习“前端免费学习笔记（深入）”；
-
import 'bootstrap'必须放在createApp(App).mount('#app')之后，否则 Bootstrap 会尝试操作尚未挂载的 DOM 节点，静默失败 - Vue 单文件组件中，
data-bs-toggle类属性仅在初始渲染时生效；后续通过v-show切换显示状态，不会触发 Bootstrap 重新绑定，得用ref+onMounted手动new bootstrap.Collapse(el) - 检查浏览器控制台是否报错
Cannot find module 'popper.js'—— 这是旧版提示，实际应确认@popperjs/core是否被正确 resolve，可删掉node_modules重装，或改用pnpm避免 hoisting 错乱
使用 bootstrap-vue-next 时，BButton 报类型错误或未定义？
这是典型的模块导入与 TypeScript 类型声明不匹配问题，不是代码写错了，而是环境没对齐。
关键条件：
- 确保项目使用的是
vue@^3.4+typescript@^5.0，低版本可能缺少defineComponent完整泛型支持 - 安装命令必须是
npm install bootstrap-vue-next bootstrap，漏掉bootstrap会导致 SCSS 变量缺失、CSS 类无法解析，TS 类型也会断链 -
main.ts中必须显式调用app.use(createBootstrapVueNext())，不能只 import 不 use——否则组件注册不生效，<BButton>在模板里就是未知标签 - VS Code 若仍标红，重启 TS Server（Ctrl+Shift+P → “TypeScript: Restart TS server”），或检查
tsconfig.json中"types"是否包含"bootstrap-vue-next"
动态更新 Tooltip 文本为啥不生效？
因为 Bootstrap Tooltip 初始化后，只读取一次 data-bs-original-title，之后 Vue 绑定的 :title 改变，只更新 title 属性，不触发改写 data-bs-original-title，更不会通知 Tooltip 实例刷新。
正确做法（不用重写整个 Tooltip）：
- 给元素加
ref，例如<input ref="tooltipEl" :title="tooltipText" /> - 在
onMounted和watch中手动同步：tooltipEl.value.setAttribute('data-bs-original-title', tooltipText) - 再调用
tooltip.getInstance().update()（需先用bootstrap.Tooltip.getOrCreateInstance()获取实例） - 更稳妥的方式：直接用
bootstrap-vue-next的<BTooltip>，它内部已处理好响应式 title 更新，写<BTooltip :title="tooltipText"><span>hover me</span></BTooltip>即可
最易被忽略的一点：别在 data-bs-toggle 类组件上幻想靠纯 HTML 属性 + Vue 响应式就能“开箱即用”，Bootstrap 5 的 JS 是命令式的，Vue 3 是声明式的——中间那层桥接，要么自己写，要么交给 bootstrap-vue-next。
