bootstrap 5 已弃用 `data-toggle` 和 `data-target`，改用 `data-bs-toggle` 和 `data-bs-target`；若未更新属性名，modal 将无法触发，且控制台无报错。
在 Bootstrap 5 中，为提升命名空间清晰度与框架可维护性，所有 JavaScript 数据属性（data attributes）均统一添加了 bs- 前缀。这意味着旧版 Bootstrap 4 中广泛使用的 data-toggle="modal" 和 data-target="#myModal" 在 Bootstrap 5 中已完全失效——即使 CSS 正常加载、HTML 结构无误、jQuery 和 Bootstrap JS 也正确引入，Modal 仍会静默“失灵”，且浏览器控制台不会抛出任何错误，极易造成排查困难。
✅ 正确写法（Bootstrap 5）：
<button type="button" class="btn btn-primary" data-bs-toggle="modal" <!-- 注意：bs- 前缀 --> data-bs-target="#exampleModal"> Launch demo modal </button> <!-- 关闭按钮同理 --> <button type="button" class="close" data-bs-dismiss="modal" <!-- 不再是 data-dismiss --> aria-label="Close"> <span aria-hidden="true">×</span> </button>
⚠️ 常见疏漏点：
- 混用 Bootstrap 4 文档与 Bootstrap 5 实际版本（如从官网旧版示例复制代码）；
- 忘记更新 data-dismiss → data-bs-dismiss（尤其在模态框内部关闭按钮中）；
- 引入了 Bootstrap 5 的 CSS，却误用 Bootstrap 4 的 JS（或反之），导致行为不一致；
- 未确认 jQuery 是否仍被 Bootstrap 5 所需（⚠️ Bootstrap 5 已移除 jQuery 依赖，纯原生 JS 实现；若你仍引入 jQuery，属冗余，但不会直接导致 Modal 失效；真正关键的是属性名）。
? 验证与调试建议：
- 查看 <head> 中 Bootstrap CSS 和 JS 的 CDN URL，确认版本号为 5.x.x（如 @5.3.3）；
- 使用浏览器开发者工具检查按钮元素，确认 data-bs-toggle 属性是否存在且拼写准确；
- 确保 Modal 的 id（如 id="exampleModal"）与 data-bs-target 的值严格一致（区分大小写、无空格）；
- Modal 根元素必须包含 class="modal fade"，且结构符合官方文档要求（尤其是 role="dialog" 和 aria-labelledby 等可访问性属性）。
? 小结：
Bootstrap 5 的 Modal 不显示，90% 的原因是数据属性未升级。请务必统一将 data-toggle → data-bs-toggle、data-target → data-bs-target、data-dismiss → data-bs-dismiss。这是版本迁移中最易忽略却影响最直接的 breaking change。始终以 Bootstrap 5 官方 Modal 文档 为准，避免参考过时教程。
