知識(shí)點(diǎn)：
1、模態(tài)框插件
2、輪播圖插件
1、模態(tài)框插件
模態(tài)框的彈窗組件需要三層 div 容器元素，分別為 modal(模態(tài)聲明層)、 dialog(窗口聲明層)、content(內(nèi)容層)
在內(nèi)容層里面，還有三層，分別為 header(頭部)、body(主體)、footer(注腳)
//模態(tài)框去掉 show，增加一個(gè) id
<div class="modal" id="myModal">
//點(diǎn)擊觸發(fā)模態(tài)框顯示
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 點(diǎn)擊彈窗 </button>
//彈窗的大小有三種，默認(rèn)情況下是正常，還有 lg(大)和 sm(小)
<div class="modal-dialog modal-lg">
<div class="modal-dialog sm-lg">
//可設(shè)置淡入淡出效果
<div class="modal fade" id="myModal">
所有的插件，都是基于 JavaScript/jQuery 的。四個(gè)要素：用法、參數(shù)、方法和事件。
1.用法
可以通過(guò) data 屬性
//data-toggle data-toggle="modal" data-target="#myModal"
data-toggle 表示觸發(fā)類型
data-target 表示觸發(fā)的節(jié)點(diǎn)
如果不是使用<button>，而是<a>，其中 data-target 也可以使用 href="#myModal"取代
建議使用 data-target。除了 data-toggle 和 data-target 兩個(gè)聲明 屬性外，還有一些可以用選項(xiàng)
2、參數(shù)
data-backdrop 布爾值或 'static' 默認(rèn)值 true，表示背景存在黑灰透明 遮罩，且單擊空白背景可關(guān)閉彈窗；
如果為 false，表示背景不存在黑灰 透明遮罩，且點(diǎn)擊空白背景不可關(guān)閉 彈窗；
如果是字符串'static'，表示背景存 在黑灰透明遮罩，且點(diǎn)擊空白不可關(guān) 閉彈窗。
data-keyboard 布爾值 true 如果是 true，按 esc 鍵會(huì)關(guān)閉窗口； 如果是 false，按 esc 鍵會(huì)不會(huì)關(guān)閉。
data-show 布爾值 true 如果是 true，初始化時(shí)，默認(rèn)顯示； 如果是 false，初始化時(shí)，默認(rèn)隱藏。
remote url 路徑 空值 如果值不是以#號(hào)開(kāi)頭，則表示一個(gè) url 地址，加載 url 內(nèi)容到 modal-content 容器里，并只加載一 次。
如果是#號(hào)，就是取代 data-target 的方法。
在 JavaScript 直接設(shè)置
//通過(guò) jQuery 方式聲明
$('#myModal').modal({
show : true,
backdrop : false,
keyboard : false,
remote : 'index.html'
});
3、方法
toggle .modal('toggle'); 觸發(fā)時(shí)，反轉(zhuǎn)切換彈窗狀態(tài)
show .modal('show'); 觸發(fā)時(shí)，顯示彈窗
hide .modal('hide'); 觸發(fā)時(shí)，關(guān)閉彈窗
//點(diǎn)擊顯示彈窗
$('#btn').on('click', function () {
$('#myModal').modal('show');
});
$('#myModal').modal({
show : false,
});
4、事件
show.bs.modal 在 show 方法調(diào)用時(shí)立即觸發(fā)。
shown.bs.modal 在模態(tài)框完全顯示出來(lái)，并且等 CSS 動(dòng)畫(huà)完成之后觸 發(fā)。
hide.bs.modal 在 hide 方法調(diào)用時(shí)，但還未關(guān)閉隱藏時(shí)觸發(fā)。
hidden.bs.modal 在模態(tài)框完全隱藏之后，并且等 CSS 動(dòng)畫(huà)完成之后觸 發(fā)。
$('#myModal').on('show.bs.modal', function () {
alert('在 show 方法調(diào)用時(shí)立即觸發(fā)！');
});
$('#myModal').on('loaded.bs.modal', function () {
alert('遠(yuǎn)程數(shù)據(jù)加載完畢后觸發(fā)！');
});
2、輪播圖插件
data 屬性解釋：
1.data-slide 接受關(guān)鍵字 prev 或 next，用來(lái)改變幻燈片相對(duì)于當(dāng)前位置的位置；
2.data-slide-to 來(lái)向輪播底部創(chuàng)建一個(gè)原始滑動(dòng)索引，data-slide-to="2"將把滑 動(dòng)塊移動(dòng)到一個(gè)特定的索引，索引從 0 開(kāi)始計(jì)數(shù)。
3.data-ride="carousel"屬性用戶標(biāo)記輪播在頁(yè)面加載時(shí)開(kāi)始動(dòng)畫(huà)播放。
data-interval 默認(rèn)值 5000，幻燈片的等待時(shí)間(毫秒)。如果為 false，輪播將不會(huì)自動(dòng)開(kāi)始循環(huán)。
data-pause 默認(rèn)鼠標(biāo)停留在幻燈片區(qū)域(hover)即暫停輪播，鼠 標(biāo)離開(kāi)即啟動(dòng)輪播。
data-wrap 默認(rèn)值 true，輪播是否持續(xù)循環(huán)。
如果在 JavaScript 調(diào)用就直接使用鍵值對(duì)方法，并去掉 data-；
$('#myCarousel').carousel({ //設(shè)置自定義屬性
interval : 2000,//設(shè)置自動(dòng)播放/2 秒
pause : 'hover',//設(shè)置暫停按鈕的事件
wrap : false, //只播一次
});
方法：
cycle 循環(huán)各幀(默認(rèn)從左到右)
pause 停止輪播
number 輪播到指定的圖片上(小標(biāo)從 0 開(kāi)始，類似數(shù)組)
prev 循環(huán)輪播到上一個(gè)項(xiàng)目
next 循環(huán)輪播到下一個(gè)項(xiàng)目
$('button').on('click', function () {//點(diǎn)擊按鈕執(zhí)行
$('#myCarousel').carousel('cycle'); //點(diǎn)擊后，自動(dòng)播放
}
事件：
slide.bs.carousel 當(dāng)調(diào)用 slide 實(shí)例方式時(shí)立即觸發(fā)該事件。
slid.bs.carousel 當(dāng)輪播完成一個(gè)幻燈片觸發(fā)該事件。
$('#myCarousel').on('slide.bs.carousel', function () {
alert('當(dāng)調(diào)用 slide 實(shí)例方式時(shí)立即觸發(fā)');
});
$('#myCarousel').on('slid.bs.carousel', function () {
alert('當(dāng)輪播完成一個(gè)幻燈片觸發(fā)');
});
