Bootstrap5弃用jQuery，性能提升全解析

Bootstrap 5 彻底告别 jQuery，不仅精简了体积，更通过原生 DOM API 和 ES6+ 类重构交互逻辑，带来了显著的性能提升——首屏加载更快、事件响应更精准、内存占用更低，并与现代 CSS 变量无缝协同；但这一升级也要求开发者彻底转变使用习惯：必须确保 bootstrap.bundle.min.js 正确加载并等待 DOM 就绪后手动初始化组件，严格使用 data-bs-* 属性而非旧版 data-*，避免 NodeList 直接传入构造函数，并注意 Popper.js 2 的边界限制和 CSS 变量的动态控制细节——稍有疏忽，就会遭遇“bootstrap is not defined”、模态框静默失效或浮层被裁剪等典型问题。

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 时代完全无关，却是原生集成后必须手动对齐的新约束。

今天关于《Bootstrap5弃用jQuery，性能提升全解析》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！