Bootstrap 5 消息框

Bootstrap 5 Toasts 是用于创建类似于桌面和移动操作系统流行的推送通知的简短警报。 它们是用 flexbox 制作的，因此可以轻松对齐和放置它们。
Toast 是一种简单、可自定义的警报消息，可向您的访问者发送推送通知。当用户单击按钮或提交表单时，类似于警报框的 toast 组件会短暂显示。

基本 Toast

“toast”类用于显示带有所需消息或信息的功能。基本 toast 功能需要“show”类才能默认显示该功能。

语法

以下语法向我们展示了网页上的基本 bootstrap 5 toast。

示例

以下示例显示了网页上的基本 bootstrap 5 toast。它包含基本内容或向用户的额外消息。

输出

以下输出图像显示了带有信息的 toast 功能。

Toast 的标题和内容

“toast-header”显示“toast”元素内 toast 功能的标题。“toast-content”在 toast 框中包含额外的内容和信息。

语法

以下语法向我们展示了带有标题和 toast body 的 bootstrap 5 toast 功能。

示例

以下示例显示了带有标题和 toast body 的 bootstrap 5 toast 功能。标题和核心数据显示在 toast 功能内部。

输出

以下输出图像显示了带有标题和 toast body 的 toast 功能。

带有关闭按钮的 Toast 功能

该按钮在标签内使用 data-bs-dismiss = "toast" 元素。如果我们单击该按钮，toast 功能将关闭该框并显示原始页面。关闭按钮在 toast 标题元素内工作。

语法

以下语法向我们展示了带有关闭按钮的 bootstrap 5 toast 功能。

示例

以下示例显示了带有关闭按钮的 bootstrap 5 toast 功能。

输出

以下输出图像显示了带有关闭按钮的 toast 功能。

带按钮的 Toast 功能

toast 功能在网页上默认隐藏。如果我们单击该按钮，toast 功能将使用脚本功能显示。在这里，脚本标签使用按钮 ID 和 toast 标签使用 toast() 方法。

语法

以下语法向我们展示了带有关闭按钮的 bootstrap 5 toast 功能。

以下是带脚本标签的 toast 功能的语法。

示例

以下示例显示了带有关闭按钮的 bootstrap 5 toast 功能。

输出

以下输出图像显示了带有按钮的 toast 功能。

带容器的 Toast 功能

toast 容器使用“toast-container”类垂直提供空间。容器类包含带有标题和正文内容的 toast 类。

语法

以下语法向我们展示了带有容器的 bootstrap 5 toast 功能。

示例

以下示例显示了带有容器的 bootstrap 5 toast 功能。

输出

以下输出图像显示了带有容器的 toast 功能。

上下文 Toast 功能

“bg-*”类用于创建上下文 toast 功能。toast 功能根据用户需求提供不同的背景颜色。“bg-*”与 primary、secondary、info、warning、success、danger 和 dark 一起使用，以显示颜色并为功能提供特定含义。

语法

以下语法向我们展示了 bootstrap 5 上下文 toast 功能。

示例

以下示例显示了 bootstrap 5 上下文 toast 功能。

输出

以下输出图像显示了上下文 toast 功能。

上下文 Toast 容器

toast 容器提供不同的背景颜色和功能含义。“bg-*”与 primary、secondary、info、warning、success、danger 和 dark 类一起使用，以显示不同背景颜色的功能。

语法

以下语法向我们展示了 bootstrap 5 上下文 toast 容器。

示例

以下示例显示了 bootstrap 5 上下文 toast 容器。

输出

以下输出图像显示了上下文 toast 容器。

结论

toast 功能显示消息或用户信息，如 flexbox 功能。它是显示基本信息的弹出框功能的另一个功能。