bootstrap 5 废弃了 v4 中的 `data-toggle` 和 `data-target` 属性，改用 `data-bs-toggle` 和 `data-bs-target`，若未更新这些属性，模态框将完全失效。
在 Bootstrap 5 中，为增强命名空间隔离性与框架可维护性，所有 JavaScript 触发的 data 属性均统一前缀为 data-bs-。这意味着你不能再使用 Bootstrap 4 风格的 data-toggle="modal" 或 data-target="#myModal" —— 它们在 Bootstrap 5 中已被完全移除，不会触发任何行为，控制台也不会报错，导致模态框“静默失效”。
✅ 正确写法（Bootstrap 5）：
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
<div class="p border-top py-3">
Doesn't have an account yet?
<a href="#" data-bs-toggle="modal" data-bs-target="#exampleModalCenter">
Create an account
</a>
</div>
<div class="modal fade" id="exampleModalCenter" tabindex="-1"
aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myLargeModalLabel">Create Account</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- 表单等内容 -->
<form>
<div class="mb-3">
<label class="form-label">Email address</label>
<input type="email" class="form-control" required>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Sign up</button>
</div>
</div>
</div>
</div>⚠️ 注意事项：
- 确保已正确引入 Bootstrap 5 的 CSS 与 JS（推荐使用官方 CDN，且 JS 必须在 DOM 后加载或置于 body 底部）；
- data-bs-dismiss="modal" 用于关闭按钮，同样不可写作 data-dismiss；
- tabindex="-1" 仍需保留，以支持键盘焦点管理；
- 若使用 jQuery：Bootstrap 5 完全移除了 jQuery 依赖，因此无需引入 jQuery，也不支持 $('#myModal').modal('show') 等 jQuery API —— 应改用原生 JavaScript 实例方法（如 new bootstrap.Modal(document.getElementById('...')).show()）。
? 小结：从 Bootstrap 4 升级至 5 时，务必全局搜索替换 data-toggle → data-bs-toggle、data-target → data-bs-target、data-dismiss → data-bs-dismiss，这是最常见也最容易被忽略的兼容性陷阱。一次替换，立解模态框不显示之困。
