Bootstrap Toast 组件

定义和使用

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

要创建 Toast 组件，请使用 .toast 类，并在其中添加 .toast-header 和 .toast-body：
```
<div class="toast">
  <div class="toast-header">
    Toast 标题
  </div>
  <div class="toast-body">
     Toast 一些内容
  </div>
</div>
```
注意：Toast 必须使用 jQuery 初始化；选择指定的元素并调用 toast() 方法。

以下代码将显示文档中的所有 “toasts”：
```
<script>
  $(document).ready(function(){
    $("#myBtn").click(function(){
      $('.toast').toast('show');
    });
  });
</script>
```
尝试一下
输出结果如下：

Toast 标题

Toast 一些内容
显示和隐藏 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 标题</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">
    toast body 一些内容
  </div>
</div>
```
尝试一下
输出结果如下：

Toast 标题 5 分钟前

toast body 一些内容

注意：mr-auto，ml-2和mb-1类；它们用于添加特定边距。
相关页面

Bootstrap 工具提示

Bootstrap 弹出框

Bootstrap Toast组件参考

Bootstrap Toast 组件

定义和使用

显示和隐藏 Toast

相关页面