bootstrap 5 彻底移除 jquery 依赖，基于原生 dom api 和 es6+ 类实现组件交互；必须使用 data-bs-* 属性、bootstrap.bundle.min.js，并在 dom 就绪后手动初始化实例。
Bootstrap 5 移除 jQuery 不是“省点体积”的权宜之计，而是彻底重写交互逻辑后的性能必然结果；它带来的不只是首屏快几十毫秒，更是事件响应更可控、内存占用更低、与现代 CSS 变量协同更自然。
bootstrap is not defined 错误的真正原因不是没引文件
这个错误几乎总是执行时机问题，而非路径或 CDN 失效。Bootstrap 5 的 bootstrap 全局对象只在 bootstrap.bundle.min.js 执行完毕后才存在。
-
bootstrap.bundle.min.js必须在调用bootstrap.Modal前完成加载和执行 - 把初始化代码写在
顶部或未包裹DOMContentLoaded里，100% 触发该错误 - 用 CDN 时别只加
defer就以为安全——某些浏览器下 script 加载与执行顺序仍有不确定性，推荐显式监听load事件或直接放前
data-bs-toggle 属性失效？先确认是否还在用 jQuery 风格写法
属性名升级只是表象，本质是 Bootstrap 5 的 JS 不再解析 data-toggle，也不再监听 click 后自动调用 $().modal() —— 它只做一件事：发现 data-bs-toggle="modal"，然后调用 new bootstrap.Modal() 实例化并 .show()。
- 如果手动写了
document.getElementById('myModal').click()，但没提前初始化组件，不会弹窗（v4 会自动补） - 如果 HTML 里写了
data-bs-toggle="modal"，但 JS 没加载或报错，点击完全静默，控制台也不提示 - 全局搜索替换时漏掉
data-bs-target或data-bs-dismiss，会导致模态框关不掉、下拉菜单收不回
原生 JS 初始化 Modal 时为什么不能用 querySelectorAll 批量操作
querySelectorAll 返回 NodeList，而 bootstrap.Modal 构造器只接受单个 Element。直接传 NodeList 会报 TypeError: Cannot read property 'ownerDocument' of undefined。
- 正确写法是循环遍历：
document.querySelectorAll('[data-bs-toggle="modal"]').forEach(el => new bootstrap.Modal(el)) - 如果需要统一控制（比如全部关闭），得自己维护实例引用数组，
bootstrap.Modal.getInstance(el)是唯一安全获取已有实例的方式 - 别用
document.querySelector('.modal').classList.add('show')强行模拟——这绕过所有生命周期钩子，后续调用.hide()会失效
CSS 变量如何配合原生 JS 动态改主题而不重载
Bootstrap 5 的 Sass 变量已映射为 :root 级 CSS 自定义属性（如 --bs-primary），JS 可直接读写，无需操作 class 或 style 属性。
- 读取当前主色：
getComputedStyle(document.documentElement).getPropertyValue('--bs-primary') - 动态切暗色模式：
document.documentElement.style.setProperty('--bs-primary', '#0d6efd') - 注意：CSS 变量变更后，依赖它的组件（如按钮 hover 色、Toast 边框）会自动响应，但 Modal 背景遮罩层（
.modal-backdrop）颜色需额外覆盖，它不继承--bs-primary
最易被忽略的是：Modal、Tooltip 这类浮层组件的定位由 Popper.js v2 控制，而它的 boundaryElement 参数默认是 document.body；如果你把整个页面包在某个带 overflow: hidden 的容器里，又没显式传 boundaryElement，浮层就会被裁剪——这和 jQuery 时代完全无关，却是原生集成后必须手动对齐的新约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
