Bootstrap5 消息弹窗(Toasts)

Bootstrap5 弹窗 (Toasts) 是一种轻量级的通知组件，用于在页面的角落或底部显示临时性的信息、通知或警告。

弹窗通常用于向用户显示短期消息，比如成功消息、错误消息、警告或其他通知。

弹窗可以在页面的不同位置显示，包括左上角、右上角、左下角、右下角以及页面底部中央。

如何创建弹窗

要创建弹窗可以使用 .toast 类，并在该类里添加 .toast-header 和 .toast-body 类来表示标题和内容。

注意：弹窗默认是关闭的，可以使用 .show 来设置显示，关闭弹窗可以在 <button>元素上添加 data-bs-dismiss="toast":

要通过点击按钮显示弹窗，您需要使用 JavaScript 对其进行初始化：通过 ID 获取指定元素的点击事件并调用 toast() 方法。

当点击按钮时，以下代码将显示页面中的所有 toast 类：

将弹窗显示在右下角：