首頁 > web前端 > js教程 > 快速使用Bootstrap建構傳送帶_javascript技巧

快速使用Bootstrap建構傳送帶_javascript技巧

WBOY
發布: 2016-05-16 15:01:57
原創
1787 人瀏覽過

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搭建傳送帶的相關知識,希望對大家有幫助,在此也非常感謝大家對腳本之家網站的支持!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板