Bootstrap 4 Toast
Bootstrap 4 吐司提示框
吐司提示框组件类似于警报框，在某些事件发生时（例如，用户点击按钮、提交表单等）只会显示几秒钟。
吐司提示框标题 5 分钟前
吐司提示框主体内容
如何创建吐司提示框
要创建吐司提示框，请使用 .toast 类，并在其中添加 .toast-header 和 .toast-body
<div class="toast">
<div class="toast-header">
吐司提示框标题
</div>
<div class="toast-body">
吐司提示框主体内容
</div>
</div>
注意：吐司提示框必须使用 jQuery 初始化：选择指定的元素并调用 toast() 方法。
以下代码将显示文档中的所有“吐司提示框”
显示和隐藏吐司提示框
吐司提示框默认隐藏。使用 data-autohide="false" 属性使其默认显示。要关闭它，请使用 <button> 元素并添加 data-dismiss="toast"
示例
<div class="toast" data-autohide="false">
<div class="toast-header">
<strong class="mr-auto text-primary">吐司提示框标题</strong>
<small class="text-muted">5 分钟前</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast">×</button>
</div>
<div class="toast-body">
吐司提示框主体内容
</div>
</div>
亲自尝试 »
注意 mr-auto、ml-2 和 mb-1 类？它们用于添加特定的边距。您将在 Bootstrap 4 实用工具类章节 中了解更多信息。
完整的 Bootstrap 吐司提示框参考
有关所有吐司提示框选项、方法和事件的完整参考，请访问我们的 Bootstrap JS 吐司提示框参考。
