Bootstrap3 警告框插件的使用方法

警告框

警告框插件（alert.js）仅仅为警告框组件一个关闭功能，即点击警告框的关闭按钮，可以让警告框消失，并将它从 DOM 中删除。

使用方法

为警告框添加一个可选的.alert-dismissible类和一个关闭按钮，就可以为警告框组件提供关闭功能。关闭按钮可以使用.close的任何元素定义，无论使用什么元素，都必须使用 .close 类，并包含 data-dismiss="alert" 属性，.close 类用于显示 '×' 符号，data-dismiss 属性用来执行关闭动作。如果希望警告框在关闭时表现出动画效果，还可以为它添加.fade和.in类。如：

1. <div class="alert alert-warning alert-dismissible fade in" role="alert">
2.   <button type="button" class="close" data-dismiss="alert">&times;</button>
3.   <strong>Warning!</strong> Better check yourself, you're not looking too good.
4. </div>

效果如图 4‑11所示：

图4-11 警告框

为关闭按钮添加data-dismiss="alert"属性后，无需任何JavaScript代码，就可以自动为警告框赋予关闭功能。点击警告框的 '×' 符号，就可以关闭警告框。

当然，你也可以通过JavaScript为某个警告框添加关闭功能。使用JavaScript方式，就不必为关闭按钮添加data-dismiss="alert"属性。如：

1. <div class="alert alert-warning alert-dismissible" role="alert">
2.   <button type="button" class="close">&times;</button>
3.   <strong>Warning!</strong> Better check yourself, you're not looking too good.
4. </div>
5. <script>
6. $(function() {
7.   $(".close").click(function(){
8.     $(".alert").alert('close');
9.   });
10. });
11. </script>

现在点击警告框的 '×' 符号，同样可以将它关闭并从 DOM 中删除。如果警告框被赋予了.fade和.in类，则在淡出之后才会被删除。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。