
bootstrap 5 移除了 jquery 依赖,将所有 data-* 属性前缀从 `data-toggle`/`data-target` 统一改为 `data-bs-toggle`/`data-bs-target`;若沿用旧写法,modal 将完全失效且无报错。
在 Bootstrap 5 中,JavaScript 组件(如 Modal、Dropdown、Collapse 等)不再通过 jQuery 初始化,而是使用原生 JavaScript + 自定义 data-bs-* 属性进行行为绑定。这是与 Bootstrap 4 的关键兼容性断点之一。
你原来的代码:
Create an account
虽然语义清晰,但 Bootstrap 5 的 JS 脚本完全忽略 data-toggle 和 data-target —— 它只监听 data-bs-toggle 和 data-bs-target。因此点击链接毫无响应,控制台也不会报错,极易被误判为“逻辑错误”或“CSS 隐藏”。
✅ 正确写法(Bootstrap 5+):
Doesn't have an account yet? Create an account
⚠️ 注意事项:
- 确保已正确引入 Bootstrap 5 的 CSS 和 JS(推荐使用 CDN 或构建工具加载 bootstrap.bundle.min.js,它包含 Popper 和 Modal 所需的全部依赖);
- data-bs-dismiss="modal" 是关闭按钮的标准写法(替代了 Bootstrap 4 的 data-dismiss);
- tabindex="-1" 和 aria-hidden="true" 仍需保留,以保障可访问性;
- 若 Modal 仍不弹出,请检查浏览器控制台是否有 JS 加载失败(如 404)、是否重复引入 Bootstrap 4 与 5 混用,或是否存在其他 JS 错误阻塞执行。
? 小技巧:可通过浏览器开发者工具 → Elements 面板,右键点击触发元素 → “Break on” → “Attribute modifications”,观察 data-bs-* 是否被动态修改,快速验证绑定是否生效。
升级到 Bootstrap 5 后,所有交互组件均遵循统一的 data-bs-* 命名规范——这是确保功能正常的第一道门槛。一次替换,全局生效。










