bootstrap 5 中模态框（modal）无法触发，通常是因为使用了旧版 bootstrap 4 的 `data-toggle` 和 `data-target` 属性，而 bootstrap 5 已全面替换为带 `bs-` 前缀的新数据属性。
在你提供的 HTML 代码中，按钮使用的是 Bootstrap 4 风格的属性：
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>但你的项目引入的是 Bootstrap 5.x（从 CDN URL @5.3.3/dist/... 可确认），而 Bootstrap 5 已移除 data-toggle 和 data-target，统一改用 data-bs-toggle 和 data-bs-target。同理，关闭按钮中的 data-dismiss 也需更新为 data-bs-dismiss。
✅ 正确写法如下：
<!-- 启动按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- 模态框内部关闭按钮 -->
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>此外，请确保以下几点以避免常见陷阱：
- ✅ jQuery 不再是必需项：Bootstrap 5 完全移除了对 jQuery 的依赖，因此无需引入 jQuery（除非你项目中其他功能需要）。但若已引入，也不会导致 Modal 失效；真正失效的原因仍是属性名不匹配。
- ✅ 脚本加载顺序无误：Bootstrap JS 必须在 DOM 加载完成后执行（你已将 <script> 放在 </body> 前，符合要求）。
- ✅ 模态框 HTML 结构完整且 ID 匹配：检查 id="exampleModal" 是否与 data-bs-target 中的值完全一致（含大小写、无空格）。
- ⚠️ 注意：Bootstrap 5 的 Modal 默认启用 backdrop 和 keyboard，如需禁用点击背景关闭，可添加 data-bs-backdrop="static" 和 data-bs-keyboard="false"。
? 小贴士：如果你正在从 Bootstrap 4 迁移，建议通查所有组件的数据属性，批量替换： | Bootstrap 4 | Bootstrap 5 | |---------------------|------------------------| | data-toggle | data-bs-toggle | | data-target | data-bs-target | | data-dismiss | data-bs-dismiss | | data-slide-to | data-bs-slide-to | | data-ride | data-bs-ride |
最后，推荐始终参考 Bootstrap 5 官方 Modal 文档 获取最新语法和配置选项。修复属性后，Modal 即可正常弹出，无需额外 JS 初始化。
