Bootstrap 5 的 JavaScript 组件不再调用 $ 或 jQuery,因其彻底移除 jQuery 依赖,全部重写为原生 JS 实现;bootstrap.bundle.min.js 仅含 Bootstrap 和 Popper,与 jQuery 无关;旧版 jQuery 写法必须全部替换为 new bootstrap.Component() 形式。

Bootstrap 5 的 JavaScript 组件为什么不再调用 $ 或 jQuery
因为 Bootstrap 5 彻底移除了 jQuery 作为运行时依赖,所有组件(如 Modal、Tooltip、Dropdown)都重写为原生 JavaScript 实现。这不是“可选”,而是强制——你引入 bootstrap.bundle.min.js 后,里面已不包含任何 jQuery 兼容层。
常见错误现象:Uncaught ReferenceError: $ is not defined 或 TypeError: $(...).modal is not a function,基本都是误用了旧版写法,或残留了 jQuery 初始化代码。
- 使用场景:只要你在项目中没手动引入 jQuery,又写了
$('#myModal').modal('show'),就必然报错 - 参数差异:旧版用字符串命令(
'show'),新版统一用构造函数 + 实例方法,例如new bootstrap.Modal(document.getElementById('myModal')).show() - 性能影响:移除 jQuery 后,JS 包体积减少约 80 KB(gzip 前),首屏 JS 解析更快;但部分 DOM 操作(如批量事件委托)需自行补足
为什么 bootstrap.bundle.min.js 里还带 Popper?它和 jQuery 有关系吗
没有关系。Popper 是独立的定位引擎,负责 tooltip、dropdown 等组件的自动位置计算;而 jQuery 是通用 DOM 操作库。Bootstrap 4 就已依赖 Popper,5 只是延续这一设计,并借机把 jQuery 一并剔除。
容易踩的坑:有人看到 bundle 文件名带 “bundle”,误以为它“打包了 jQuery”——其实 bootstrap.bundle.min.js = Bootstrap JS + Popper,不含 jQuery;若你额外引入了 jQuery,纯属冗余。
- 如果你用的是
bootstrap.min.js(非 bundle 版),则必须单独引入 Popper,否则 tooltip 会定位失败甚至报ReferenceError: Popper is not defined - CDN 引入时务必核对路径,例如 jsDelivr 上正确链接是:
https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js,不是.../js/bootstrap.min.js后再加 jQuery
旧项目升级到 Bootstrap 5 时,哪些 jQuery 写法必须改
所有以 $ 开头的链式调用都失效。Bootstrap 5 不提供任何 jQuery 插件接口,也不做兼容适配。
典型错误现象:导航栏下拉菜单点不动、tooltip 鼠标悬停无反应、轮播图卡死——大概率是初始化逻辑还卡在 jQuery 语法里,DOM 已加载,但 Bootstrap 的 JS 实例根本没建起来。
-
$(document).ready(...)→ 改用document.addEventListener('DOMContentLoaded', ...) -
$('.tooltip').tooltip()→ 改为遍历节点并逐个初始化:[...document.querySelectorAll('.tooltip')].forEach(el => new bootstrap.Tooltip(el)) -
$('#myAlert').alert('close')→ 改为new bootstrap.Alert(document.getElementById('myAlert')).close()
如果项目里已有 jQuery,Bootstrap 5 还能共存吗
能共存,但不会互相调用。jQuery 不会触发 Bootstrap 组件,Bootstrap 也不会读取 jQuery 对象。二者只是“和平共处”,不是“协同工作”。
真正麻烦的是维护成本:你得同时维护两套 DOM 操作风格,容易混淆;更关键的是,某些插件(比如老版本的 DataTables 或 Select2)仍强依赖 jQuery,它们和 Bootstrap 5 的组件交互时,可能因事件绑定机制不同(jQuery 事件代理 vs 原生 addEventListener)导致监听丢失。
- 建议策略:新功能一律用原生 Bootstrap API;存量 jQuery 代码逐步迁移,别为了“共存”而保留无用的
<script src="jquery.js"></script> - 调试重点:检查浏览器控制台是否出现
Bootstrap's JavaScript requires Popper类错误——这说明你用了非 bundle 版本,却忘了引入 Popper,和 jQuery 完全无关
.dropdown-menu 必须直接嵌套在 .dropdown 内,否则即使 JS 初始化成功,CSS 层级也会断掉——这种问题和 jQuery 无关,但常被归咎于“升级后不兼容”。


















