Bootstrap怎么设置警告框（Alert）自动消失-Bootstrap教程-PHP中文网

bootstrap alert 默认不自动消失，需用 settimeout 配合 close() 实现2秒淡出；淡出动画依赖 fade/show 类、css 过渡及正确 js 状态切换三者协同，缺一不可。

bootstrap 的 alert 组件默认不自动消失，必须手动加定时逻辑；所谓“2秒后淡出”，全是自己用 settimeout 配合 close() 或类名控制拼出来的。

为什么加了 `fade show` 还是硬切、不淡出

淡出动画依赖三者协同：CSS 过渡定义 + 元素同时存在 fade 和 show 类 + JS 正确触发状态切换。缺一不可。

.alert.fade 必须有 transition: opacity .15s linear（Bootstrap 默认自带，但若被覆盖成 none 或 0s 就失效）
只写 fade 不写 show，元素初始不显示，close() 时没东西可过渡
调用 alert('close') 前，该元素未被 Bootstrap 初始化（比如漏了 data-bs-dismiss="alert"，或没等 DOM 就绪）
用 el.remove() 或 el.classList.remove('show') 替代 close()，跳过了 Bootstrap 的动画钩子

用 `setTimeout` + `close()` 实现自动关闭

这是最接近官方语义的做法，但要注意实例获取时机和 DOM 生命周期。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

必须加载 bootstrap.bundle.min.js（含 Popper 和 Alert 插件），否则 bootstrap.Alert 不存在
确保 HTML 中有 data-bs-dismiss="alert"（它不只是给 × 按钮用的，更是插件初始化开关）
在 DOMContentLoaded 后操作，避免 document.getElementById() 返回 null
推荐用 bootstrap.Alert.getInstance(el) 而非 new bootstrap.Alert(el)，防止重复初始化

document.addEventListener('DOMContentLoaded', () => {
  const alertEl = document.getElementById('form-success-alert');
  if (alertEl) {
    setTimeout(() => {
      const bsAlert = bootstrap.Alert.getInstance(alertEl);
      bsAlert?.close();
    }, 2500);
  }
});