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