务必将模态框的HTML代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。
8.1.1.1 HTML代码： <!-- 触发模态框的按钮 --> <button type="button" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- 模态框 --> <div tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div role="document"> <div> <div> <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4>Modal title</h4> </div> <div> ... </div> <div> <button type="button" data-dismiss="modal">Close</button> <button type="button">Save changes</button> </div> </div> </div> </div>注意：
通过为模态框设置 .bs-example-modal-lg和 .bs-example-modal-sm来控制模态框的大小。
通过 .fade类来控制模态框弹出时的动画效果（淡入淡出效果）。
通过在 .modal-bodydiv中设置 .row可以使用Bootstrap的栅格系统。
8.1.1.2 调用方式：1 通过data属性
通过在一个触发弹出模态框的元素（例如：按钮）上添加 data-toggle="modal"属性，然后设置 data-target="#foo"属性或 href="#foo"属性，用来指向被控制的模态框。
<button type="button" data-toggle="modal" data-target="#myModal">显示模态框</button>2 通过JS代码调用
$(\'#myModal\').modal("show"); // 显示 $(\'#myModal\').modal("hide") // 隐藏常用参数：
名称 可选值 默认值 描述backdrop true/false/\'static\' true false表示有没有遮罩层，
\'static\'表示点击遮罩层不关闭模态框
keyboard true/false true 键盘上的 esc 键被按下时关闭模态框。
show true/false true 模态框初始化之后就立即显示出来。
方法：
$(\'#myModal\').modal({ keyboard: false }) 8.1.2 轮播图HTML代码：
<div data-ride="carousel"> <!-- Indicators --> <ol> <li data-target="#carousel-example-generic" data-slide-to="0"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div role="listbox"> <div> <img src="http://www.likecs.com/..." alt="http://www.likecs.com/..."> <div> ... </div> </div> <div> <img src="http://www.likecs.com/..." alt="http://www.likecs.com/..."> <div> ... </div> </div> ... </div> <!-- Controls --> <a href="#carousel-example-generic" role="button" data-slide="prev"> <span aria-hidden="true"></span> <span>Previous</span> </a> <a href="#carousel-example-generic" role="button" data-slide="next"> <span aria-hidden="true"></span> <span>Next</span> </a> </div>可以在为图片添加介绍信息：
<div> <img src="http://www.likecs.com/..." alt="http://www.likecs.com/..."> <div> <h3>...</h3> <p>...</p> </div> </div>方法：
设置切换间隔为2秒，默认是5秒。
$(\'.carousel\').carousel({ interval: 2000 }) 8.2 其他常用插件 8.2.1 FontAwesome字体详细用法参见上述站点的Examples：https://fontawesome.com/?from=io
8.2.2 SweetAlert系列
SweetAlert：https://github.com/t4t5/sweetalert
SweetAlert2：https://github.com/sweetalert2/sweetalert2
SweetAlert 到 SweetAlert2 升级指南：https://github.com/sweetalert2/sweetalert2/wiki/Migration-from-SweetAlert-to-SweetAlert2
基本使用：
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 dataObj = $.parseJSON(data); if (dataObj.status === 0) { //后端删除成功 swal("删除成功", dataObj.info, "success"); $("#p-" + recordID).remove() //删除页面中那一行数据 } else { swal("出错啦。。。", dataObj.msg, "error"); //后端删除失败 } }, error: function () { // ajax请求失败 swal("啊哦。。。", "服务器走丢了。。。", "error"); } }) }); }