bootstrap5中文网,Bootstrap5 教程,Bootstrap5 与 Bootstrap 4,Bootstrap 5 foundation pdf,Bootstrap 5 modal,Bootstrap5搜索框自动补全
Bootstrap 5 (BS5) Toast 是一个用于在网页上显示短暂通知信息的小部件。它可以用来向用户显示成功、错误、警告等消息，以及其他相关的信息。Toast 通知经常被用作反馈和提醒工具。

BS5 Toast 组件的特点包括：
- 能够显示文本、图标和链接
- 预定义的四种类型：primary、secondary、success 和 danger
- 可以通过 CSS 自定义外观和动画效果
- 可以设置延迟时间和自动隐藏
- 支持多个 Toast 实例出现在同一页面上

以下是 BS5 Toast 的示例代码：

html
<!-- HTML结构 -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>

<!-- JavaScript代码 -->
<script>
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
</script>


这段代码会创建一个包含 "Hello, world! This is a toast message." 文本的 Toast，标题为 "Bootstrap"，并在页面加载时自动显示。用户可以点击右上角的 X 按钮手动关闭 Toast。