button有三個參數：toggle、reset、string(比如 loading、complete)。
30、折疊效果
手風琴效果のHtml：
<div>
<div>
<div>
<h4>
<a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">点击展示，再点折叠</a>
</h4>
</div>
<div class="panel-collapse collapse in">
<div>
这里是第一部分。
</div>
</div>
</div>
div.panel.panel-default>div .panel-heading+div.panel-collapse.collapse
</div>
data-toggle="collapse" 表示實現折疊
.collapse 將其隱藏
.in 將其顯示
合用防止點擊同類的標籤時，此標籤不合上。
手風琴のJS：
$(‘#collapseOne’).collapse({
parent:’#accordion’,//選擇父元素，也就是折疊區
toggle:false //true為默認，初始打開1st，false不打開1st,打開last。特注：此與data-toggle不同
})
三個方法：show、hide、toggle [用法：$(‘#c’).collapse(toggle)]
四個事件：show.bs.collapse、shown.bs.collapse、hide.bs.collapse、hidden.bs.collapse
31、輪播效果
<div class="carousel slide">
<ol>
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div>
<div>
<img src="http://www.likecs.com/img/slide1.png" alt="第一张">
</div>
<div>
<img src="http://www.likecs.com/img/slide2.png" alt="第二张">
</div>
<div>
<img src="http://www.likecs.com/img/slide3.png" alt="第三张">
</div>
</div>
<a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
<a href="#myCarousel" data-slide="next">›</a>
</div>
簡寫：
div#m.carousel.slide>ol.carousel-indicators+div.carouel-inner
屬性：
data-interva=300 //默認 5000，幻燈片停留時間。false，不會自動開始循環。
data-pause=’hover’ //默認鼠標停留在幻燈片區域(hover)即暫停輪播，鼠標離開開始輪播。
data-wrap=’true’ //默認 true，輪播是否持續。
data-ride="carousel" //頁面加載時開始播放動畫
data-slide=’prev’ //或next,上/下一張
data-slide-to=’0’ //跳到指定圖片，從0開始
方法(JS中使用)：
cycle //循環播放(默認從左到右)
pause //停止
number //跳到指定圖片(從0開始)
prev //上一個
next //下一個
用法：$(‘#m’).carousel(‘cycle’)
事件：
slide.bs.carousel //當調用slide時觸發。
slid.bs.carousel //當輪播完一張幻燈片時觸發。
32、附加導航
附加導航即粘貼在屏幕某處實現錨點功能。類似百度百科
<div>
<div style="height: 150px">
<h2>Bootstrap Affix</h2>
</div>
<div>
<div>
<ul data-spy="affix" data-offset-top="150">
<li><a href="#section-1">第一部分</a></li>
<li><a href="#section-2">第二部分</a></li>
<li><a href="#section-3">第三部分</a></li>
<li><a href="#section-4">第四部分</a></li>
<li><a href="#section-5">第五部分</a></li>
</ul>
</div>
<div>
<h2>第一部分</h2>
<p></p>
<h2>第二部分</h2>
<p></p>
<h2>第三部分</h2>
<p></p>
<h2>第四部分</h2>
<p></p>
<h2>第五部分</h2>
<p></p>
</div>
</div>
</div>
data-spy="affix" //監聽類型
data-offset-top="150" //距離頂部の距離
此二者的替代在JS中
$(‘#m’).affix({
offset:{top:150}
});
此二者的替代在css中(優先級最高)
.nav-pills.affix {
bottom : 10px;
}
事件：
affix.bs.affix //在定位結束之前立即觸發
affixed.bs.affix //在定位結束之後立即觸發
affix-top.bs.affix //在定位元素應用 affixed-top 效果之前觸發
affixed-top.bs.affix //在定位元素應用 affixed-top 效果之後觸發
affix-bottom.bs.affix //在定位元素應用 affixed-bottom 效果之前觸發
affixed-bottom.bs.affix //在定位元素應用 affixed-bottom 效果之後觸發