Bootstrap Alert 不支持自动关闭，需用 setTimeout 调用实例的 hide() 或 close() 方法实现；必须通过 bootstrap.Alert 初始化获取实例，避免直接 DOM 操作导致状态异常、事件丢失或内存泄漏。
Alert 自动关闭需要手动绑定定时器
Bootstrap 本身不提供 alert 组件的自动关闭或倒计时功能，dismiss 只支持点击关闭。想实现“5秒后自动隐藏”，必须用 JavaScript 手动控制 setTimeout + hide()（Bootstrap 5）或 removeClass("show")（Bootstrap 4）。别指望 data 属性能直接配出倒计时。
Bootstrap 5 中用 hide() 方法最稳妥
Bootstrap 5 的 Alert 实例有原生 hide() 方法，调用后会触发 hidden.bs.alert 事件，且兼容 CSS 过渡动画。错误做法是直接 remove() 或 display: none，会跳过销毁逻辑。
实操建议：
- 先用
bootstrap.Alert.getOrCreateInstance(el)获取实例，避免重复初始化 - 倒计时前检查元素是否还存在于 DOM（防止异步中节点已被移除）
- 在
hidden.bs.alert回调里清理定时器，防内存泄漏
const alertEl = document.getElementById('myAlert');
const alert = bootstrap.Alert.getOrCreateInstance(alertEl);
setTimeout(() => {
if (alertEl.offsetParent !== null) alert.hide();
}, 5000);
alertEl.addEventListener('hidden.bs.alert', () => clearTimeout(timerId));
倒计时显示在 Alert 内部需动态更新文本
如果要在警告框右上角显示 “5s 后关闭”，就得手动操作 DOM。Bootstrap 不提供内置占位符，aria-label 或辅助文本都不参与渲染。
常见问题：
- 直接改
innerText会清空子元素（比如关闭按钮），应只更新特定标签 - 倒计时结束前用户手动点击关闭，要清除定时器并移除剩余文本节点
- 多个 Alert 共存时，每个倒计时必须独立维护 timerId，不能共用变量
推荐结构：alertEl.querySelector('.alert-countdown') 更新。
IE11 或旧版 Bootstrap 4 需降级处理
Bootstrap 4 没有 hide() 实例方法，得靠 $(el).alert('close')（jQuery 版）或手动 toggle 类名：el.classList.remove('show')。但后者不会触发事件，也无法保证过渡完成。
关键差异：
- Bootstrap 4 的
close.bs.alert和closed.bs.alert事件名与 v5 不同 - 若项目混用 jQuery 和原生 JS，避免对同一 Alert 元素既用
$().alert()又用bootstrap.Alert，会冲突 - 无 CSS 过渡时（如
transition: none），hide()仍会同步移除show类，但视觉上无渐隐效果
倒计时逻辑看着简单，真正上线时最容易漏掉的是「用户提前关闭后的定时器清理」和「DOM 节点已销毁却还在尝试调用 hide()」——这两个点一出，控制台报错、倒计时错乱、内存持续增长都会跟着来。
