这次我们来看下js组件的使用，本篇文章会有点长，希望大家可以耐心看，相信收获会有不少。不少园友加我好友，表示喜欢我写文字的风格，简单明了，这里，再次谢谢你们的支持。一方面，自身技术有限，写的东西都比较基础，另一方面，写的东西，都是根据自己的理解，把复杂的东西用最简单的语言表达出来。所以，写的有不对的地方，麻烦各位给予指正哈。
一、js文件引用
注意点：jquery必须在在其它js文件之前引入，因为其它插件都是依赖于jquery。
<!--<script src="https://www.jb51.net/js/jquery-1.11.3.min.js"></script> 本地引入的加载文件--> <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> --必须在bootstrp.min.js之前引入 <script src="https://www.jb51.net/js/bootstrap.min.js"></script>
二、data属性
作用：通过data属性，可使用任何的bootstrap插件，无须写任何一段js代码。前面讲过的像：data-toggle="dropdown"等引用菜单插件。
那么既然有打开功能，如何关闭功能呢？在javascript里面添加下面代码即可：
<script type="text/javascript"> $(document).off('.data-api'); </script>
如果要关闭某一个特定的插件的功能，添加下面代码即可：
<script type="text/javascript"> // 关闭提示框的插件功能 $(document).off('.alert.data-api'); </script>
所有的js插件基本都是下面几步：
1：如何使用？---类对应如何写？
2：如何调用？---类写好了，如何使其写的类生效？
3：事件处理---包括动作触发前发生以及动作出发后发生
注意：所有动作触发之前发生的，bootstrap提供了preventDefault,实现在动作执行之前将其停止。代码如下：
$('#myModal').on('show.bs.modal', function (e) { if (!data) return e.preventDefault() // 阻止模态框的展示，当然你也可换成阻止其它插件的出现 })
注意：bootstrap没有对禁用javascript的浏览器采取补救措施，因此，我们需要自己写一段代码补救，相信大家都知道。
<noscript> 你的浏览器不支持javascript，请下载最新的浏览器 </noscript>
三、模态框组件（modal.js）
注意点：
1：不支持同时打开多个模态框
2：模态框尽量位于body子元素的位置，避免其它组件影响模态框的展现和功能
3：移动端说明
4：增强可访问性--添加role属性
5：在模态框中可嵌入视屏，即data-toggle="modal"
我们来看下下面的列子，点击button，会弹出一个模态框，关于这里的属性，如果看过之前的文章，相信理解起来不难，这里不再详解，可自行贴码测试：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title></title> <link href="https://www.jb51.net/css/bootstrap.css"> <link href="https://www.jb51.net/css/bootstrap.min.css"> <link href="https://www.jb51.net/css/style.css"> </head> <body> <button type="button" data-toggle="modal" data-target=".bs-example-modal-lg"> 弹出大模态框 </button> <div tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div>--大的模态框 <div> <div> <button type="button" data-dismiss="modal" aria-label="close"> <span aria-hidden="true">×</span> </button> <h4>Modal title</h4> </div> <div> <p>one fine body …</p> </div> <div> <button type="button" data-dismiss="modal">close</button> <button type="button">save changes</button> </div> </div> </div> </div><!-- 改变模态框的大小添加类modal-sm即可 --><button type="button" data-toggle="modal" data-target=".bs-example-modal-sm"> 弹出小模态框 </button> <div tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div> ---小模态框 <div> <div> <button type="button" data-dismiss="modal" aria-label="close"> <span aria-hidden="true">×</span> </button> <h4>Modal title</h4> </div> <div> <p>one fine body …</p> </div> <div> <button type="button" data-dismiss="modal">close</button> <button type="button">save changes</button> </div> </div> </div> </div> <!-- 禁止动画效果，删掉fade即可 --> <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="https://www.jb51.net/js/bootstrap.min.js"></script> <script type="text/javascript"> $("#mymodal").modal("show"); ---调用这句代码才能使插件生效 </script> </body> </html>
实现效果如下：
