Bootstrap 5 彻底移除 jQuery 依赖，所有组件基于原生 DOM API 实现；必须使用 data-bs-* 属性、bootstrap.bundle.min.js，并在 DOM 就绪后手动初始化组件。
Bootstrap 5 不再需要 jQuery —— 这可不是一个“可选项”，而是底层架构彻底重写后的必然结果。所有核心组件，无论是模态框、下拉菜单还是工具提示，如今都完全基于原生的 DOM API 和 CustomEvent 构建。这意味着，如果你再引入 jQuery，不仅毫无用处，反而会白白占用内存，拖慢页面的首次解析速度。
data-toggle 失效？只认 data-bs-toggle
如果你的控制台一片安静，但下拉菜单死活点不开，模态框也弹不出来，那么问题大概率出在属性名上。Bootstrap 5 的 Ja vaScript 已经彻底“不认识” data-toggle 了，它只响应带有 bs 命名空间前缀的新版本。
- 必须进行一次全局的搜索替换：
data-toggle→data-bs-toggle，data-target→data-bs-target，data-dismiss→data-bs-dismiss。 - 哪怕只漏掉一个
data-trigger，都可能导致Popover组件初始化失败。 - 检查元素时看到旧的属性名还在，千万别被迷惑；Bootstrap 5 的 JS 根本不会去读取它们。
Uncaught ReferenceError: bootstrap is not defined 怎么办
这个错误在手动调用 bootstrap.Modal.getInstance() 时出现得尤其频繁。根本原因往往不是文件没引入，而是代码执行的时机不对。
bootstrap.bundle.min.js必须在你的调用代码之前完成加载和执行，否则全局的bootstrap对象根本不存在。- 初始化代码绝不能写在
标签里，也不能放在 script 标签的顶部；必须包裹在DOMContentLoaded事件中，或者直接放在标签的底部。 - 使用 CDN 时，不要过度依赖
defer属性而忽略执行顺序的校验；更推荐的做法是显式添加type="module"，或者使用load事件进行监听。
为什么 Modal.show() 会报 TypeError: $ is not a function
这简直是 jQuery 时代遗留代码的“典型病状”。Bootstrap 5 已经彻底废弃了 $().modal('show') 这类链式调用语法，也不再向外暴露 $ 这个全局变量。
立即学习“前端免费学习笔记（深入）”；
- 正确的做法是：先用
document.querySelector这类原生方法获取 DOM 元素，再将其传递给bootstrap.Modal的构造函数。 - 来看个例子：
const myModal = new bootstrap.Modal(document.getElementById('myModal'));
myModal.show(); - 如果项目里遗留了大量 jQuery 选择器代码，建议封装一层适配函数来过渡，但千万别试图去“模拟” jQuery 的行为——那样做，性能和代码的可维护性都会大打折扣。
- 顺带一提，Popper.js 升级到 v2 后，配置项也变了，比如
boundary改成了boundaryElement，不更新的话会导致定位出现偏移。
移动端 touchstart 为什么没反应
Bootstrap 5 默认不监听 touchstart 事件，它只响应标准的 click 和现代的 pointerdown 事件。这不是一个 Bug，而是框架有意的设计取舍：它将复杂的触摸交互逻辑交还给开发者自己处理，以避免浏览器模拟点击行为所带来的各种兼容性陷阱。
- 在 iOS Safari 上，简单的点击操作仍然能触发
click事件（浏览器会自动映射），但对于长按、滑动等复杂手势，你需要自行监听touchend等事件，并手动调用组件的toggle()方法。 - 示例（让下拉菜单支持轻点触发）：
const el = document.querySelector('[data-bs-toggle="dropdown"]');
el.addEventListener('touchend', e => {
e.preventDefault();
bootstrap.Dropdown.getInstance(el)?.toggle();
}); - 务必记得加上
e.preventDefault()，否则在设置了overflow: auto的滚动区域内，可能会意外触发页面滚动，或者导致菜单提前关闭。 - 如果真的需要支持复杂的滑动手势（比如轮播图滑动），那就得绕过 Bootstrap 的默认机制，直接操作 DOM 或者引入专门的手势库了。
最后，也是最容易被忽略的一点：Bootstrap 5 的组件初始化不再是“声明即生效”的魔法。即便你写好了 data-bs-toggle 属性，如果对应的 Ja vaScript 文件尚未加载完成，或者 DOM 树还没有准备就绪，所有交互都会静默失效——它不像 jQuery 那样可以通过事件委托来兜底，而是严格依赖于代码的执行时序和属性规范的完整性。
