bootstrap介紹
Bootstrap是前端開發中應用非常廣泛的一個框架,最早是Twitter 公司內部的一個工具,開源之後迅速得到了各方的認可。本書基於最新的Bootstrap 3撰寫,在簡單介紹了安裝與配置之後就直奔主題,分別討論了個人作品站點、WordPress主題、企業網站、電子商務網站和單頁營銷網站等幾個最具代表性的應用案例,結合這些案例細致地剖析了Bootstrap還有LESS的使用方式和技巧。
說了這麼多,都是題外話,下面看看bootstrap搭建傳送帶的代碼。
進度指示器
<div id="homepage-feature" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#homepage-feature" data-slide-to="0" class="active"></li> <li data-target="#homepage-feature" data-slide-to="1" ></li> <li data-target="#homepage-feature" data-slide-to="2" ></li> <li data-target="#homepage-feature" data-slide-to="3" ></li> </ol>
進度指示器的data-target屬性必須使用傳送帶的ID homepage-featureJS插件為傳送帶添加active類。
<div class="carousel-inner"> <div class="item active"> <img > </div> <div class="item "> <img > </div> ... </div>
然後是顯示前一個後一個的按鈕
<a class="left carousel-control" href="#homepage-feature" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#homepage-feature" data-slide="next"> <span class="glyphicon glyphicon-chevron-left"></span> </a></div>
如此便好了。以上內容是小編給大家介紹的Bootstrap搭建傳送帶的相關知識,希望對大家有所幫助,在此也非常感謝大家對網站的支持!