在 Bootstrap 5 中，Toast 组件无法通过纯 HTML 声明式方式直接触发（例如 data-target）；必须借助 Ja vaScript 获取组件实例，并手动调用 .show() 方法。本文将系统讲解 Toast 的正确初始化方式、按钮点击事件绑定方法，并提供一份可直接运行的完整示例代码。
Bootstrap 5 的 Toast 组件不支持通过纯 HTML 绑定直接显示（如 `data-target`），必须依赖 Ja vaScript 获取实例后手动执行 `.show()` 方法；本文将详细说明如何正确初始化 Toast、绑定按钮事件，以及如何快速实现可直接运行的优化代码。
在 Bootstrap 5 中，Toast 属于需要显式控制的动态组件。它与 Modal 不同，不能仅通过 data-bs-toggle="modal" data-bs-target="#myModal" 这样的声明式写法自动弹出。官方文档也明确说明：“You ha ve to manually call this method, instead your toast won’t show.”（你必须手动调用这个方法，否则 Toast 不会显示）。也就是说，仅仅准备好 HTML 结构，再配合初始的 new bootstrap.Toast() 实例化仍然不够；还需要把用户操作，例如按钮点击，明确绑定到 .show() 方法，Toast 才会正常显示出来。
✅ 正确实现步骤
确保使用稳定版 Bootstrap 5：你当前引用的是已经废弃的
5.0.0-alpha1版本，存在明显的 API 差异（例如hide类名、data-dismiss属性均已移除）。建议升级到最新稳定版本（如5.3.x或5.4.x），以获得标准的data-bs-*属性支持和更稳定的组件行为。HTML 结构需符合规范：
- Toast 容器建议添加
data-bs-autohide="false"，用于关闭自动隐藏； - 关闭按钮应使用
data-bs-dismiss="toast"，这是 Bootstrap 5+ 的标准写法； - 推荐为 Toast 增加
role="alert"和aria-live="polite"，以提升无障碍访问体验和页面可用性。
- Toast 容器建议添加
Ja vaScript 初始化与事件绑定：
先获取 Toast 元素并创建实例（推荐优先使用bootstrap.Toast.getInstance()来复用已存在的实例），然后再为按钮绑定click点击事件，最后调用toast.show()显示 Toast。
以下是可直接运行的完整示例（基于 Bootstrap 5.4）：
系统通知 刚刚
Hello, world! 这是一个手动触发的 Toast。
⚠️ 注意事项与最佳实践
- 不要遗漏
bootstrap.bundle.min.js：该文件已内置 Popper，无需再额外引入；如果使用bootstrap.min.js（不含 Popper），可能会导致部分 Bootstrap 组件运行异常。 - 避免重复初始化 Toast 实例：通过
bootstrap.Toast.getInstance(el)可以安全复用已有实例，减少状态冲突，也能避免不必要的内存占用。 - 关闭按钮必须使用
data-bs-dismiss="toast"：这是 Bootstrap 5 及以上版本唯一支持的关闭方式，旧写法data-dismiss已经失效。 - Toast 默认不会自动显示：即便你已经成功初始化组件，也仍然需要显式调用
.show()。这是 Bootstrap 5 Toast 的设计机制，并不是程序 Bug。 - 响应式布局与定位方式：
position-fixed搭配bottom-0 end-0是官方推荐的 Toast 定位方案；如果页面中需要显示多个 Toast，建议结合toast-container与动态创建逻辑一起使用。
归根到底，Bootstrap 5 的 Toast 本质上是一个命令式（imperative）UI 组件：它将组件生命周期的控制权明确交还给开发者。虽然这种方式相比纯声明式写法少了一些“即插即用”的便捷感，但换来的却是更高的灵活性，以及更稳定、更可预测的交互控制体验。只要熟悉 getInstance() 配合 show()/hide() 的这套使用模式，在项目中接入各种提示消息、通知弹层或交互流程时，整体开发效率反而会更高。
