Bootstrap 5 的 Alert 默认不自动消失，需手动添加定时逻辑；data-bs-dismiss="alert" 仅支持点击关闭，自动隐藏须用 setTimeout 配合 d-none 类或 getInstance().close()，但后者会移除 DOM 元素。
Bootstrap 5 的 Alert 默认不自动消失，必须手动加定时逻辑
Bootstrap 5 的 .alert 组件本身**没有内置自动关闭机制**，data-bs-dismiss="alert" 只负责点击关闭，不会触发延时隐藏。你看到的“2秒后淡出”效果，全是自己写的 setTimeout + alert('close') 或类名控制拼出来的。
常见错误现象：
- 页面刚加载就执行
setTimeout，但 DOM 还没渲染完，document.querySelector('.alert')返回null - 用
$(".alert").alert('close')关闭后，元素被彻底移除，下次.show()失效 - 多个警告框共存，却用宽泛选择器
$('.alert')，结果只关掉第一个
正确做法是等 DOM 就绪再操作：
document.addEventListener('DOMContentLoaded', () => {
const alertEl = document.getElementById('form-success-alert');
if (alertEl) {
setTimeout(() => {
bootstrap.Alert.getInstance(alertEl)?.close();
}, 2500);
}
});
用 classList.add("d-none") 替代 alert('close') 更适合复用场景
如果你需要反复显示同一个警告框（比如表单提交成功后每次都弹），别让 Bootstrap 自动销毁它。删掉按钮上的 data-bs-dismiss="alert"，改用纯类名控制显隐——这是最稳的路径。
关键点：
- HTML 中初始状态加
d-none，不加show（避免一进页面就闪一下） - 显示前先清理旧状态：
alertEl.classList.remove("d-none", "alert-success", "alert-danger") - 再设置新类型和动画类：
alertEl.classList.add("alert-info", "show") - 自动隐藏用
setTimeout(() => alertEl.classList.add("d-none"), 2500) - 确保 CSS 里有
.alert.fade { transition: opacity .15s linear; }，否则淡出无效
为什么 alert('close') 会把元素从 DOM 移除？
Bootstrap 5 的 alert('close') 不是简单隐藏，而是触发完整销毁流程：移除所有相关 class、解绑事件、最后调用 element.remove()。这不是 bug，是设计如此——它假设每个 alert 是一次性使用的。
这带来两个实际影响：
- 无法二次调用
bootstrap.Alert.getInstance(el)，因为el已不存在 - 如果警告框里绑了自定义事件（比如点击跳转），销毁后监听器也一并丢失
- 想保留 DOM 结构，唯一办法是监听
closed.bs.alert并阻止默认行为，但不如直接不用close()
所以，除非你明确需要「用完即弃」语义，否则避开 alert('close') 更省心。
自动消失的交互反馈，优缺点都很真实
优点很直接：用户提交后看到提示，2 秒内安静收起，不打断后续操作；比手动点击 × 更顺滑，尤其移动端手指不便时。
缺点容易被低估：
- 时间太短（4s），又像卡住
- 没提供手动关闭入口，对视力障碍用户或键盘操作不友好（需额外加
tabindex和Enter支持） - 如果警告框含重要操作（如“撤销发送”），自动消失就是反模式——该等用户确认
- 动画依赖 CSS
transition，若项目禁用了全局过渡或覆盖了.alert.fade，就会硬切
真正难的不是写那几行 setTimeout，而是判断这个提示到底该不该自动消失、消失多久、以及消失后要不要留个可恢复的痕迹。
