Bootstrap 4 Toast 插件

Bootstrap 4 toast

toast 插件就像一个警报框，仅在发生某些事情时显示几秒钟（即当用户单击按钮、提交表单等时）。

Some text inside the toast body

如何制作 toast

要创建 toast，请使用 .toast 类，并添加 .toast-header 和一个 .toast-body 在里面:

<div class="toast">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>

注释: Toast 必须使用 jQuery 进行初始化:选择指定的元素并调用 toast() 方法。

以下代码将显示文档中的所有 "toasts":

实例

亲自试一试 »

显示和隐藏 Toast

Toast 默认是隐藏的。使用 data-autohide="false" 属性默认显示它。要关闭它，请使用 <button> 元素并添加 data-dismiss="toast":

实例

<div class="toast" data-autohide="false">
<div class="toast-header">
    <strong class="mr-auto text-primary">Toast Header</strong>
    <small class="text-muted">5 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">×</button>
</div>
<div class="toast-body">
    Some text inside the toast body
</div>
</div>

亲自试一试 »

注意 mr-auto, ml-2 和 mb-1 类? 它们用于添加特定的边距。您将在 Bootstrap 4 实用程序章节中了解更多信息。