alert-dismissible 仅提供关闭按钮样式和点击逻辑，不自动淡出；自动关闭需手动调用 close() 方法并确保元素同时具有 .alert、.fade、.show 类。
为什么 alert-dismissible 加了但不自动关闭？
Bootstrap 的警告框（.alert）本身**不带自动淡出功能**，即使加了 alert-dismissible 类，也只是提供关闭按钮的样式和基础交互，不会自动触发隐藏。自动淡出必须手动调用 hide() 方法并配合 CSS 过渡动画。
-
alert-dismissible仅负责渲染 × 按钮、添加data-bs-dismiss="alert"属性，并绑定点击关闭逻辑 - 自动消失需 JS 控制：设置定时器 + 主动调用
bootstrap.Alert.getInstance(element).close()或直接element.classList.add('show')后移除 - 务必确认 Bootstrap 5+ 的 CSS 中存在
.alert.fade.show过渡定义（默认有），否则会硬切无淡出效果
如何用原生 JS 实现 5 秒后自动淡出？
最轻量、不依赖 jQuery 的写法：获取警告框元素，设 setTimeout，在回调中调用 Bootstrap 的 close() 方法（推荐）或手动 toggle 类（兼容性稍弱）。
const alertEl = document.querySelector('.alert');
if (alertEl) {
setTimeout(() => {
const alert = bootstrap.Alert.getInstance(alertEl);
if (alert) alert.close(); // 触发 fade + hide 事件
}, 5000);
}
- 必须等 DOM 加载完成后再执行，否则
querySelector可能返回null - 用
bootstrap.Alert.getInstance()而非new bootstrap.Alert()，避免重复初始化 - 如果警告框是动态插入的（如 AJAX 返回），需在插入后立即注册定时器，不能只靠页面加载时运行一次
使用 fade 类但没动画？检查这三点
常见“点了 × 没淡出”或“自动关闭时直接消失”的原因几乎都落在 CSS 或类名缺失上。
- 警告框元素必须同时有
.alert、.fade、.show三个类 —— 缺少.fade就无过渡，缺少.show则初始不可见且close()无效 - 确认引入的是完整 Bootstrap CSS（不是精简版），且未被其他 CSS 重置掉
.alert.fade.show的opacity和transition - Bootstrap 5.3+ 默认
.alert不再自带fade，必须显式添加；旧版本（如 4.x）部分主题可能默认含 fade，但行为不一致，建议统一显式写
多个警告框共存时，如何分别控制淡出时间？
每个警告框应独立计时，不能全局用一个 setTimeout。常见错误是循环中用 var 声明 i 导致闭包问题，或对所有 .alert 统一设相同延迟。
document.querySelectorAll('.alert[data-auto-hide]').forEach(alertEl => {
const delay = parseInt(alertEl.getAttribute('data-auto-hide')) || 4000;
setTimeout(() => {
bootstrap.Alert.getInstance(alertEl)?.close();
}, delay);
});
- 用
data-auto-hide="3000"这类自定义属性按需配置，比写死更灵活 - 务必用
?.close()避免实例不存在时报错（比如已被手动关闭过） - 如果某警告框支持手动关闭，建议在
closed.bs.alert事件中清除对应定时器，防止close()被重复调用
.fade 类和定时器作用域问题——尤其是动态生成的提示框，常因节点复用导致定时器绑定错位。动手前先打开 DevTools 看一眼元素当前有哪些 class，比查文档更快定位。 
