Bootstrap 5 的 Alert 组件不支持自动关闭，需用 setTimeout 调用实例的 close() 方法实现；必须通过 bootstrap.Alert 初始化获取实例，避免直接 DOM 操作导致状态异常。
Bootstrap 5 中 alert 没有内置自动关闭功能
bootstrap 官方 alert 组件只提供手动关闭（点击 ×）和 javascript 初始化接口，alert() 方法本身不接受延时参数，也不触发自动隐藏。所谓“自动关闭”，必须由开发者自己用 settimeout 配合 close 实例方法实现。
怎么用 JavaScript 实现 3 秒后自动关闭
核心是获取 Alert 的 Bootstrap 实例，调用其 close() 方法，而不是直接 remove() 或操作 DOM —— 否则会丢失 Bootstrap 的销毁逻辑（比如事件清理、Aria 属性还原）。
- 确保已引入
bootstrap.bundle.min.js（含 Popper 和 alert 插件） - 给 alert 元素添加
id或其他可选中标识，避免误关多个 - 在 DOM 加载完成后初始化，并立即设置定时器
<div id="myAlert" class="alert alert-warning alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
这条提示将在 3 秒后自动消失
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const alertEl = document.getElementById('myAlert');
const bsAlert = new bootstrap.Alert(alertEl);
setTimeout(() => bsAlert.close(), 3000);
});
</script>
常见错误：用 jQuery 或原生 remove() 破坏状态
有人直接写 $('#myAlert').alert().delay(3000).fadeOut()，这在 Bootstrap 5 中完全失效 —— 因为 jQuery 支持已被移除；也有人用 alertEl.remove()，会导致屏幕阅读器残留 aria-hidden 状态、焦点管理异常，甚至影响后续同类型 alert 的初始化。
- Bootstrap 5 的
alert是纯 JS 类，不兼容 jQuery 插件调用方式 -
close()方法会触发动画、移除show类、重置aria-hidden，并派发closed.bs.alert事件 - 若需在关闭后执行逻辑，监听该事件比写在
setTimeout回调里更可靠
要不要加手动关闭按钮？取决于场景
如果用户可能需要提前操作（比如表单校验失败后想立刻修改），务必保留 data-bs-dismiss="alert" 按钮；如果只是弱提示（如“已保存”），可以去掉按钮，仅靠自动关闭，但要确保延时足够（建议 ≥2500ms），避免用户还没看清就消失。
- 去掉按钮时，记得删掉整个
<button></button>及其 class，不要只隐藏 - 自动关闭 + 手动关闭共存时，需在
closed.bs.alert事件中清除定时器，防止重复触发或内存泄漏 - 移动端小屏下，过短的延时（如 1500ms）极易导致用户来不及反应，慎用
close()、并处理好生命周期边界 —— 尤其是手动关闭与定时关闭的竞态关系，这点最容易被跳过。
