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类;它们用于添加特定边距。