Bootstrap Toast 必须用 JS 初始化：先 new bootstrap.Toast(el) 再调 show()，仅写 HTML 不会显示；需确保 DOM 就绪、正确设置 role/alert、data-bs-dismiss="toast" 和 btn-close 结构；动态插入时须立即初始化，推荐封装 showToast 函数统一处理。
Bootstrap 的 Toast 不是“写了就能弹”的组件，后台操作成功/失败后想自动弹出提示，必须绕过纯 HTML 的幻觉，用 JS 控制生命周期——否则你写的 toast 元素只会静静躺在 DOM 里，连影子都不露。
Toast 必须手动 new 实例才能 show()
光在 HTML 里写 <div class="toast"></div>，哪怕加了 show 类或 data-bs-toggle="toast"，也不会显示。这是设计使然，不是 bug。
-
bootstrap.Toast是类构造函数，不是 jQuery 插件，不能对 DOM 元素直接调.show() - 必须先
new bootstrap.Toast(toastEl)，再调toast.show() - 若多个状态（成功/失败/警告）共用同一套结构，每个
toast都要单独 new 实例，不能复用 - DOM 尚未就绪就执行初始化，会报
Cannot read property 'show' of null；务必等DOMContentLoaded或用document.getElementById确保元素存在
关闭按钮能点的前提：role + data-bs-dismiss + btn-close 缺一不可
按钮显示了但点不动？大概率是这三个条件没同时满足：
<div class="toast"> 根元素必须带 <code>role="alert"，否则 Bootstrap 的 dismiss 监听器压根不挂载- 关闭按钮必须是
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>，data-bs-dismiss值必须严格等于"toast"（写成"alert"或拼错就失效） - 按钮必须放在
.toast-header内（或至少是.toast直接子元素），否则事件委托链断裂 - 别用
onclick="this.closest('.toast').remove()"手动删——跳过了hidden.bs.toast事件、动画清理和内存释放 - 不能依赖初始的
querySelectorAll('.toast')—— 新增的元素根本不在里面 - 必须在
element.append(newToastEl)后**立刻**执行new bootstrap.Toast(newToastEl).show() - 如果用 innerHTML 替换整个容器内容，旧实例不会自动销毁，得手动调
toast.dispose()避免内存泄漏 - 建议封装一个
showToast(message, variant = 'success')函数，内部统一处理结构生成、插入、初始化、自动销毁 - 给每个 Toast 容器加
style="z-index: 1090 + index"（index 递增），确保新 toast 总在最上层 - 避免把所有 Toast 塞进同一个
.toast-container；推荐每个 toast 单独包裹一层position-fixed容器，方便独立控制 z-index 和偏移 - 移动端要注意
me-3 mb-3这类间距类，否则 toast 贴边导致按钮难以点击 - 如果频繁触发（比如批量操作每行都弹一个），考虑节流或合并提示，而不是堆 10 个 toast——可访问性和体验都会崩
动态插入 Toast（如 API 响应后生成）必须立即初始化
后台操作完成时，你往往不是提前写好 HTML，而是 JS 拼字符串或用模板创建 toast 元素再 append 到页面。这种场景下，初始化时机极易出错：
右下角堆叠 + 多 Toast 场景下容易点错关闭按钮
多个 Toast 叠在 position-fixed bottom-0 end-0 区域时，后弹出的会盖住前一个的 .btn-close，用户实际点不到底层按钮：
最常被忽略的是：即使结构完全正确，只要没引入 bootstrap.bundle.min.js（而非仅 CSS 或 bootstrap.min.js），bootstrap.Toast 就是 undefined，后续一切皆空谈。检查控制台有没有 Uncaught TypeError: bootstrap is not defined，比调样式快十倍。
