通过jsDelivr CDN给Bootstrap页面添加JS失效，请问哪里出错了？

问题排查&解决方案 #

1. 属性命名适配Bootstrap版本 #

Bootstrap 5.x版本已经弃用了data-*前缀的触发属性，全部替换为data-bs-*前缀：

• 原来的data-toggle改为data-bs-toggle
• 原来的data-target改为data-bs-target
• 原来的data-dismiss改为data-bs-dismiss
  如果你直接复制了Bootstrap 4的示例代码，属性不匹配就会导致JS功能完全无法触发。

2. JS引入顺序校验 #

如果确认使用的是Bootstrap 4版本，检查JS引入顺序是否符合要求：

• 必须先引入jQuery，再引入popper.js，最后引入Bootstrap JS文件
• 禁止颠倒顺序，否则Bootstrap JS无法正确挂载依赖功能

3. Bundle包校验 #

如果使用的是Bootstrap 5的bundle包，确认引入格式是否正确，标准引入示例：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Bundle包已经内置了popper，不需要额外单独引入。

4. 控制台报错排查 #

打开浏览器开发者工具的「控制台」标签，刷新页面后查看是否有JS报错：

• 如果是404报错说明JS资源路径错误
• 如果是$ is not defined说明jQuery未正确引入
• 如果是Bootstrap requires popper说明popper未引入或者引入顺序错误

内容的提问来源于stack exchange，提问作者Adi Rainbow