Bootstrap 5 移除 jQuery 是彻底重写交互逻辑后的性能必然结果，带来首屏更快、事件响应更可控、内存占用更低、与 CSS 变量协同更自然；常见错误如“bootstrap is not defined”多因执行时机不当，“data-bs-toggle”失效常因未升级属性或误用 NodeList，CSS 动画需手动补全且须保留 .modal.fade 类并配合 CSS 变量。
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，会导致模态框关不掉、下拉菜单收不回
querySelectorAll 返回 NodeList，不能直接传给 bootstrap.Modal 构造器
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 动画必须手动补全，fade 类不是摆设
Bootstrap 5 主动移除了所有默认过渡逻辑。它不再为 .dropdown-menu 或 .modal.fade 提供 transition 声明，也不再依赖 jQuery 的 fadeIn/slideDown。
- 想加淡入+下滑效果，得自己补 CSS：
visibility控制显隐（display: none无法过渡），配合opacity和transform - 监听
.dropdown-menu.show类变化来触发动画，而不是直接给.dropdown-menu加transition -
.modal.fade这个 class 必须保留，它是 backdrop 和 dialog 动画同步的前提；删了它，animate.css类加了也不同步
最常被忽略的是：CSS 变量和 JS 初始化必须协同——比如通过 getComputedStyle 读取 --bs-modal-fade-transform 来动态设置动画参数，否则你写的 transition 会和框架内置的变量值脱节。
