Flask flash如何使用Bootstrap 5 Toast替代Alert消息提示

架构老林

2026-8-28

问题根因

两个方案失效的原因非常明确：

绑定提交按钮触发Toast的JS方案：表单提交是同步跳转行为，validateForm返回true后浏览器会立刻销毁当前页面、加载服务端返回的新页面。alert()是浏览器原生同步阻塞API，会冻结页面线程直到用户操作，所以能正常停留；但Bootstrap Toast是普通DOM组件，执行show()后是靠CSS动画完成渲染，没有阻塞线程的能力，刚触发就随旧页面一起被销毁，自然只会闪现甚至不可见。
Jinja2直接渲染Toast的方案：Bootstrap 5的Toast组件默认是隐藏状态，必须手动调用JS的show()方法才会弹出，你只渲染了Toast的DOM结构，没有写页面加载后触发显示的逻辑，自然不会生效。

可直接落地的实现方案

不需要修改后端现有flash逻辑，完全适配Bootstrap-Flask + Bootstrap 5，直接替换原有render_messages宏的位置即可。

全局Toast容器与消息渲染
把下面的代码放到基础模板（通常是base.html）的</body>标签前，会自动读取所有flash消息，按消息类型匹配对应样式：

<div class="toast-container position-fixed bottom-0 end-0 p-3" style="z-index: 1080">
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      {% for category, message in messages %}
        {% set toast_style = {
          'success': 'bg-success text-white',
          'error': 'bg-danger text-white',
          'warning': 'bg-warning text-dark',
          'info': 'bg-info text-dark'
        }.get(category, 'bg-primary text-white') %}
        <div class="toast {{ toast_style }}" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="true" data-bs-delay="5000">
          <div class="d-flex">
            <div class="toast-body">{{ message }}</div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="关闭"></button>
          </div>
        </div>
      {% endfor %}
    {% endif %}
  {% endwith %}
</div>

样式映射可以根据自己的需求调整，后端调用flash("提示内容", "分类名")即可自动匹配对应颜色。data-bs-delay控制自动隐藏的等待时长，单位为毫秒，不需要自动隐藏就把data-bs-autohide设为false。

页面加载自动触发Toast显示
在上面的DOM代码后追加一段JS，等页面渲染完成后自动初始化并弹出所有Toast：

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.toast').forEach(el => {
    new bootstrap.Toast(el).show();
  })
})

效果说明

表单提交后，Flask处理完逻辑执行flash、返回/重定向到新页面时，Toast会在新页面加载完成后自动弹出，到设定时长自动消失，也支持手动点击关闭。
不需要给表单提交按钮绑定额外的触发逻辑，也不会出现旧页面闪现Toast的问题，和Bootstrap-Flask默认的Alert消息逻辑完全一致，只是展示形式换成了Toast。

内容的提问来源于stack exchange，提问作者calabash