
bootstrap 5 移除了 jquery 依赖并统一使用 `data-bs-*` 前缀替代旧版的 `data-toggle` 和 `data-target`,若未更新属性名,modal 将完全失效。
在 Bootstrap 5 中,所有 JavaScript 触发的 data 属性均已标准化为 data-bs-* 命名格式。你遇到的 Modal 不弹出问题,根本原因正是 HTML 中仍沿用了 Bootstrap 4 的 data-toggle="modal" 和 data-target="#exampleModalCenter" —— 这些在 Bootstrap 5 中已被废弃,浏览器会直接忽略,导致事件绑定失败。
✅ 正确写法(Bootstrap 5):
Doesn't have an account yet? Create an account
⚠️ 注意事项:
- 确保已正确引入 Bootstrap 5 的 CSS 和 JS 文件(推荐使用 CDN):
- data-bs-dismiss="modal" 同样需用于关闭按钮,不可写作 data-dismiss;
- Modal 必须置于 级别(不能嵌套在 display: none 或 visibility: hidden 的父容器中),否则初始化失败;
- 若通过 JavaScript 手动调用,应使用 new bootstrap.Modal(...) 实例化,而非 $('#myModal').modal('show')(jQuery 方式已不支持)。
总结:从 Bootstrap 4 升级到 5 时,务必全局搜索替换 data-toggle → data-bs-toggle、data-target → data-bs-target、data-dismiss → data-bs-dismiss,这是 Modal、Collapse、Tooltip 等组件正常工作的前提。










