知識點：
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吼鱼，增加一個 id
<div class="modal" id="myModal">
//點擊觸發(fā)模態(tài)框顯示
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 點擊彈窗 </button>
//彈窗的大小有三種躬贡，默認情況下是正常谆奥，還有 lg(大)和 sm(小)
<div class="modal-dialog modal-lg">
<div class="modal-dialog sm-lg">
//可設置淡入淡出效果
<div class="modal fade" id="myModal">
所有的插件，都是基于 JavaScript/jQuery 的拂玻。四個要素：用法酸些、參數(shù)、方法和事件檐蚜。
1.用法
可以通過 data 屬性
//data-toggle data-toggle="modal" data-target="#myModal"
data-toggle 表示觸發(fā)類型
data-target 表示觸發(fā)的節(jié)點
如果不是使用<button>魄懂，而是<a>，其中 data-target 也可以使用 href="#myModal"取代
建議使用 data-target闯第。除了 data-toggle 和 data-target 兩個聲明 屬性外市栗，還有一些可以用選項
2、參數(shù)
data-backdrop 布爾值或 'static' 默認值 true，表示背景存在黑灰透明 遮罩填帽，且單擊空白背景可關閉彈窗蛛淋；
如果為 false，表示背景不存在黑灰 透明遮罩盲赊，且點擊空白背景不可關閉 彈窗铣鹏；
如果是字符串'static'，表示背景存 在黑灰透明遮罩哀蘑，且點擊空白不可關 閉彈窗诚卸。
data-keyboard 布爾值 true 如果是 true，按 esc 鍵會關閉窗口绘迁； 如果是 false合溺，按 esc 鍵會不會關閉。
data-show 布爾值 true 如果是 true缀台，初始化時棠赛，默認顯示； 如果是 false膛腐，初始化時睛约，默認隱藏。
remote url 路徑 空值 如果值不是以#號開頭哲身，則表示一個 url 地址辩涝，加載 url 內(nèi)容到 modal-content 容器里，并只加載一 次勘天。
如果是#號怔揩，就是取代 data-target 的方法。
在 JavaScript 直接設置
//通過 jQuery 方式聲明
$('#myModal').modal({
show : true,
backdrop : false,
keyboard : false,
remote : 'index.html'
});
3脯丝、方法
toggle .modal('toggle'); 觸發(fā)時商膊，反轉(zhuǎn)切換彈窗狀態(tài)
show .modal('show'); 觸發(fā)時，顯示彈窗
hide .modal('hide'); 觸發(fā)時宠进，關閉彈窗
//點擊顯示彈窗
$('#btn').on('click', function () {
$('#myModal').modal('show');
});
$('#myModal').modal({
show : false,
});
4晕拆、事件
show.bs.modal 在 show 方法調(diào)用時立即觸發(fā)。
shown.bs.modal 在模態(tài)框完全顯示出來材蹬，并且等 CSS 動畫完成之后觸 發(fā)潦匈。
hide.bs.modal 在 hide 方法調(diào)用時，但還未關閉隱藏時觸發(fā)赚导。
hidden.bs.modal 在模態(tài)框完全隱藏之后茬缩，并且等 CSS 動畫完成之后觸 發(fā)。
$('#myModal').on('show.bs.modal', function () {
alert('在 show 方法調(diào)用時立即觸發(fā)吼旧！');
});
$('#myModal').on('loaded.bs.modal', function () {
alert('遠程數(shù)據(jù)加載完畢后觸發(fā)凰锡！');
});
2、輪播圖插件
data 屬性解釋：
1.data-slide 接受關鍵字 prev 或 next，用來改變幻燈片相對于當前位置的位置掂为；
2.data-slide-to 來向輪播底部創(chuàng)建一個原始滑動索引裕膀，data-slide-to="2"將把滑 動塊移動到一個特定的索引，索引從 0 開始計數(shù)勇哗。
3.data-ride="carousel"屬性用戶標記輪播在頁面加載時開始動畫播放昼扛。
data-interval 默認值 5000，幻燈片的等待時間(毫秒)欲诺。如果為 false抄谐，輪播將不會自動開始循環(huán)。
data-pause 默認鼠標停留在幻燈片區(qū)域(hover)即暫停輪播扰法，鼠 標離開即啟動輪播蛹含。
data-wrap 默認值 true，輪播是否持續(xù)循環(huán)塞颁。
如果在 JavaScript 調(diào)用就直接使用鍵值對方法浦箱，并去掉 data-；
$('#myCarousel').carousel({ //設置自定義屬性
interval : 2000,//設置自動播放/2 秒
pause : 'hover',//設置暫停按鈕的事件
wrap : false, //只播一次
});
方法：
cycle 循環(huán)各幀(默認從左到右)
pause 停止輪播
number 輪播到指定的圖片上(小標從 0 開始祠锣，類似數(shù)組)
prev 循環(huán)輪播到上一個項目
next 循環(huán)輪播到下一個項目
$('button').on('click', function () {//點擊按鈕執(zhí)行
$('#myCarousel').carousel('cycle'); //點擊后酷窥，自動播放
}
事件：
slide.bs.carousel 當調(diào)用 slide 實例方式時立即觸發(fā)該事件。
slid.bs.carousel 當輪播完成一個幻燈片觸發(fā)該事件伴网。
$('#myCarousel').on('slide.bs.carousel', function () {
alert('當調(diào)用 slide 實例方式時立即觸發(fā)');
});
$('#myCarousel').on('slid.bs.carousel', function () {
alert('當輪播完成一個幻燈片觸發(fā)');
});
