Toast需手动调用show()方法触发，不能仅靠HTML结构自动显示；必须在AJAX成功/失败回调中初始化并显示，避免submit默认行为导致刷新；需确保DOM存在、设置role="alert"和data-bs-delay等属性，并用toast-container管理多个Toast。
Toast需要手动触发，Bootstrap默认不自动显示
Bootstrap的Toast组件是“静默”的——它不会自己弹出来，必须用JS调用show()方法。表单提交后想弹Toast，得在提交成功（或失败）的回调里手动初始化并显示。常见错误是只写HTML结构就以为能自动出现，结果页面上啥也没有。
- 确保
toast元素在DOM中已存在（可放页面底部，但不能动态删掉） - 每次显示前建议先调用
dispose()或重新初始化，避免重复绑定事件 - 如果用
data-bs-autohide="false"，记得手动调hide()，否则会一直挂着
用JavaScript初始化Toast并控制显示时机
推荐在AJAX提交成功后操作。注意：不要在submit事件里直接show()，因为表单可能跳转或刷新页面，导致Toast一闪而过甚至不显示。
document.getElementById('myForm').addEventListener('submit', function(e) {
e.preventDefault(); // 阻止默认提交
fetch('/api/submit', {
method: 'POST',
body: new FormData(this)
})
.then(response => response.json())
.then(data => {
const toastEl = document.getElementById('successToast');
const toast = new bootstrap.Toast(toastEl); // 初始化
toast.show(); // 手动触发
})
.catch(() => {
const toastEl = document.getElementById('errorToast');
const toast = new bootstrap.Toast(toastEl);
toast.show();
});
});
HTML结构要带data-bs-delay和role="alert"
少了这些属性，Toast可能不关闭、不读屏、或被屏幕阅读器忽略。尤其role="alert"对无障碍很重要，不是可选。
-
data-bs-delay设成3000或5000，单位毫秒；不写则默认5000 -
aria-live="assertive"让屏幕阅读器立刻播报，别漏掉 - Toast容器必须有
position: relative（Bootstrap CSS已内置，但自定义父容器时要注意）
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="successToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="3000">
<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>
</div>
多个Toast共存时得用toast-container定位，否则堆叠错乱
如果同时支持成功/失败/警告三种Toast，不能把它们都塞进同一个div.toast里反复改内容——容易状态混乱、事件残留。更稳妥的做法是：每个Toast独立DOM节点，用JS切换show()和hide()，靠toast-container统一控制位置。
- 不要用
innerHTML动态改文本再show()，旧实例可能还在运行 - 用
getOrCreateInstance()比每次都new更安全，避免重复初始化 - 移动端要注意
position-fixed在iOS Safari中可能失效，可加transform: translateZ(0)兜底
Cannot read property 'show' of null。 
