轻提示 Toasts

轻提示（Toast）是一种轻量、自动消失的弹出消息，用于向用户反馈操作结果。它默认隐藏，需要通过 JavaScript 的 bootstrap.Toast 实例或 data 属性触发显示。

基础示例

Toast 初始处于隐藏状态，点击按钮后由 JS 调用 Toast.show() 显示；通过 data-bs-delay 设置 3 秒后自动关闭。

你好，世界！这是一条自动关闭的轻提示消息。

HTML 示例

把多个 Toast 放进 toast-container position-static 中，它们会垂直堆叠并自动留出间距。下面两条已直接展示，可点击右上角关闭按钮逐个关闭。

看到了吗？轻提示就是这样的。

注意：多条轻提示会自动堆叠排列。

HTML 示例

给 Toast 加上 text-bg-dark 即可得到深色版本，关闭按钮需换用白色的 btn-close-white。

深色轻提示，对比度更高，适合通知栏场景。

HTML 示例

把 toast-container 固定在视口右上角（position-fixed top-0 end-0），是系统通知最常见的放置方式。点击按钮后，提示会从页面右上角滑入。

这是固定在页面右上角的轻提示。

HTML 示例

设置 data-bs-autohide="false" 后，Toast 不会自动消失，必须由用户点击关闭按钮手动关闭。适合需要用户明确确认的消息。

这条提示不会自动消失，请点击右上角按钮手动关闭。

HTML 示例