Toast组件必须手动初始化，data-bs-toggle不生效；需用JS调用Toast构造函数或getOrCreateInstance才能显示，且DOM就绪后执行，动态插入时须立即初始化。
Toast 组件必须手动初始化，data-bs-toggle 不生效
Bootstrap 5 的 Toast 不像 Modal 或 Dropdown 那样支持纯 HTML 触发，即使写了 data-bs-toggle="toast" 也不会自动激活。必须用 JS 调用 Toast 构造函数或 getOrCreateInstance 才能显示。
常见错误是只写 HTML 结构，没调 JS，结果页面里什么也不弹 —— 这不是 bug，是设计如此。
- 确保已引入 Bootstrap 5.3+ 的 JS（含
toast.js模块） - DOM 必须已就绪后再初始化，推荐放在
DOMContentLoaded里 - 若 Toast 是动态插入的（比如从 API 响应后生成），需在插入 DOM 后立即调用
new bootstrap.Toast(...)
关闭按钮要加 data-bs-dismiss="toast"，且父容器必须有 role="alert"
仅加一个 <button type="button" class="btn-close"></button> 不够 —— 它不会自动关闭 Toast，除非同时满足两个条件：
- 按钮上必须带
data-bs-dismiss="toast"属性 - Toast 根元素（通常是
<div class="toast">）必须有role="alert"，否则无障碍支持失效，且部分版本下关闭逻辑可能异常 - 不建议用
onclick="..."手动调hide()，会绕过 Bootstrap 的销毁清理逻辑（比如事件解绑、动画结束回调）
正确结构示例：
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">提示</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">操作成功</div>
</div>
show() 之前得先 new 实例，不能直接对 DOM 元素调方法
Bootstrap 5 的 Toast 是类实例，不是 jQuery 插件那种链式调用。不能写 document.querySelector('.toast').show() —— 会报 show is not a function。
正确做法是先获取元素，再传给 bootstrap.Toast 构造函数：
const toastEl = document.getElementById('myToast');
const toast = new bootstrap.Toast(toastEl);
toast.show();
如果不确定是否已初始化，可用 bootstrap.Toast.getOrCreateInstance 更安全：
bootstrap.Toast.getOrCreateInstance('#myToast').show();
- 多次调
new bootstrap.Toast(el)会重复绑定事件，导致关闭两次、动画错乱等问题 - 每个 Toast 实例对应一个 DOM 元素，不要复用同一个实例控制多个 Toast
- 若需批量管理（如全局消息队列），建议封装成工厂函数，每次创建新实例
自动关闭与手动关闭共存时，delay 和 autohide 参数别漏设
默认 Toast 不自动关闭（autohide: false），即使设置了 delay 也无效。必须显式开启 autohide: true 才会倒计时后消失。
-
delay单位是毫秒，默认 5000；autohide默认false，两者要配对使用 - 用户点击关闭按钮后，
hide()会立即触发hidden.bs.toast事件，但自动关闭也会触发同一事件 —— 如果监听该事件做清理，注意区分来源（可通过event.target判断是否为关闭按钮触发） - 移动端上，
autohide可能被误触中断，建议关键提示禁用自动关闭，仅保留手动关闭
初始化时配置示例：
const toast = new bootstrap.Toast(toastEl, {
delay: 3000,
autohide: true
});
Toast 的 DOM 结构和 JS 初始化耦合紧密，少一个属性（比如 role）、漏一步调用（比如没 show()）、或参数设反（autohide: false 却指望它自己消失），都会让效果断在某个环节。调试时优先检查控制台有没有 TypeError，再确认元素是否在 DOM 中、是否已初始化实例。 
