Bootstrap4 toast

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

Toast 主体内的一些文字

如何制作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 实用程序章节。

完整的 Bootstrap Toast 参考

有关所有 Toast 选项、方法和事件的完整参考，请访问我们的Bootstrap JS Toast 参考。