网址：http://v3.bootcss.com/javascript/#js-overview
这里只说几个常用的插件，其它在网址看
一、模态框
》》》》注意：不支持同时打开多个模态框，而且模态框的代码必须写在body的直接子元素，也就是儿子辈
》》》》如何弹出模态框：
（1）利用data属性：data-toggle="modal" data-target="#myModal" target是弹出的模态框的id值，通常我们把class值赋给一个button
（2）通过JS代码：
- $("#myModal").modal("show") --> 显示出来
- $("#myModal").modal("hide) --> 隐藏
其它参数：传多个参数时要用字典形式去传
backdrop： true/false/'static' --> 遮罩层的参数，static代表有遮罩层，但是点击遮罩层模态框不会消失
keyboard: true/false --> 键盘上的ESC按键，true就代表按下ESC按键时模态框会消失1、静态实例
2、动态实例
3、可选尺寸：.modal-lg .modal-sm
4、禁止动画效果：fade
》》》》》》》注意尺寸和动画效果的添加位置：：：：：
5、事件：
show.bs.modal 模态框显示之前触发
shown.bs.modal 模态框显示之后触发
hide.bs.modal 模态框隐藏之前触发
hidden.bs.modal 模态框隐藏之后触发
$('#myModal').on('hidden.bs.modal', function (e) { // do something...}) 6、模态框的组成
1. .modal-header
2. .modal-body 3. .modal-footer
二、轮播图 Carousel
1、实例
（1）基本的实例
（2）在图片中插入文字
...
...
2、用法：可以设置
$('.carousel').carousel() 参数：
》》》interval：3000 设置时间，单位是毫秒
三、菜单 Collapse
1、实例：就是像左侧菜单那样的样式，直接拿来用就可以，还有很多的样式这里步一一列举，在网址看
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
2、用data属性去引用
data-toggle="collapse" href="#collapseOne" href指向的是显示内容的id值
第二部分：一些其它的前端插件
一、FontAwesome字体
网址：：：http://fontawesome.io/
》》》图标比较多
显示图标用i 标签 区别于Bootstrap自带图标的span标签
fa fa-开头，fa-2x fa-lg 这是指大小
还有别的效果，有动态图标，还能让图标有重叠的效果
二、SweetAlert系列
》》》》弹出框的种类比较多
网址：：：https://limonte.github.io/sweetalert2/
1、基本使用
swal("标题", "内容", "success");
使用SweetAlert在Ajax提交成功（done）或失败（error）时分别提示不用的内容。
function deleteRecord(recordID) { swal({ title: "确定要删除这个产品吗？", text: "删除后可就无法恢复了。", type: "warning", showCancelButton: true, closeOnConfirm: false, confirmButtonText: "是的，我要删除！", confirmButtonColor: "#ec6c62", cancelButtonText: "容我三思" }, function (isConfirm) { if (!isConfirm) return; $.ajax({ type: "post", url: "/delete/", data: { "id": recordID}, success: function (data) { var d_obj = $.parseJSON(data); if (d_obj.code === "success") { //后端删除成功 swal("删除成功", d_obj.info, "success"); $("#p-" + recordID).remove() //删除页面中那一行数据 } else { swal("出错啦。。。", d_obj.info, "error"); //后端删除失败 } }, error: function () { // ajax请求失败 swal("啊哦。。。", "服务器走丢了。。。", "error"); } }) });}
三、Toastr
网址：：：：http://codeseven.github.io/toastr/
可以查看简单示例：：：http://codeseven.github.io/toastr/
》》》》》就是可以弹出各种样式的通知栏
toastr["success"]("你已经成功被绿!")
四、jQueryLazyload懒加载
》》》》就是图片的加载效果不一样
懒加载示例 ...