Bootstrap 4 提示框
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 提示框参考。
