Bootstrap 5 彻底移除 jQuery 依赖，所有组件重写为原生 JavaScript，因此 $ is not a function 错误源于残留的 jQuery 调用（如 $('#myModal').modal()），必须改用 new bootstrap.Modal() 等原生 API 初始化。
Bootstrap 5 不需要引入 jQuery，不是“省掉一个库”那么简单，而是整个 JS 层彻底重写后的自然结果——所有组件（Modal、Dropdown、Tooltip）都基于原生 DOM API + CustomEvent + ES6+ class 实现，jQuery 已无任何调用入口。
为什么 $ is not a function 错误高频出现
这不是配置问题，是代码里还留着 jQuery 风格的调用痕迹。Bootstrap 5 的 JS 文件（哪怕你手动引入了 jquery.min.js）完全不读取 $ 或 jQuery 全局变量。
-
$('#myModal').modal('show')→ 直接报TypeError: $ is not a function -
$('.dropdown').dropdown()→ 报ReferenceError: $ is not defined - 即使页面中其他插件用了 jQuery，Bootstrap 5 也绝不会跟它交互——它只认
bootstrap.Modal这类构造器
data-bs-toggle 失效但控制台没报错，怎么回事
这是静默失效，最危险的一类问题：HTML 里写了 data-bs-toggle="modal"，但点击毫无反应，控制台干净得像没写 JS 一样。
- 根本原因：
bootstrap.bundle.min.js没加载完，或你的初始化脚本执行得太早（比如放在<head>顶部） - 检查点：
bootstrap全局对象是否存在？在浏览器控制台输typeof bootstrap，返回"object"才算就绪 - 别依赖
defer：CDN 加载下，defer不能 100% 保证执行顺序，推荐把脚本放</body>前，或显式监听load事件
手动初始化 Modal 时为什么传 querySelectorAll 会报错
bootstrap.Modal 构造器只接受单个 Element，传 NodeList 会直接崩：
立即学习“前端免费学习笔记（深入）”；
const modals = document.querySelectorAll('.modal');
new bootstrap.Modal(modals); // ❌ TypeError: Cannot read property 'ownerDocument' of undefined
- 正确写法：必须循环或取单个元素
new bootstrap.Modal(modals[0]) - 批量初始化建议封装工具函数，例如：
modals.forEach(el => new bootstrap.Modal(el)) - 别用
document.querySelector('.modal').classList.add('show')模拟弹窗——这绕过了 Bootstrap 的状态管理，关闭逻辑、事件触发、动画都会出问题
CSS 变量和原生 JS 是怎么协同提升灵活性的
移除 jQuery 后，Bootstrap 5 把样式控制权交还给 CSS，JS 只管行为逻辑。比如 --bs-modal-zindex 这类 CSS 变量可直接覆盖，无需改 JS；动画也从 jQuery 的 .fadeIn() 切换为纯 CSS transition + transform。
- 好处是：主题切换只需改一组变量，不用动 JS；动画性能更好（GPU 加速），且能被
prefers-reduced-motion自动适配 - 代价是：你不能再靠
$.animate()自定义展开速度——要改动画，得覆盖.collapse的 CSS 类，或监听shown.bs.collapse事件后手动操作 - Popper.js v2 的定位参数也变了：
boundary→boundaryElement，漏更新会导致 tooltip 偏移，而且这个错误不报红，只“看起来不对”
最容易被忽略的是：Bootstrap 5 的“自动初始化”只发生在页面首次加载时。动态插入的 DOM（比如 AJAX 加载的模态框内容），data-bs-toggle 属性不会自动生效，必须手动调用 new bootstrap.Modal() —— 这一点和 v4 完全不同，也是升级后功能突然消失的常见原因。
