快速使用Bootstrap搭建傳送帶

字號:


    這篇文章主要介紹了快速使用Bootstrap搭建傳送帶的相關資料,非常具有參考借鑒價值,需要的朋友可以參考下
    bootstrap介紹
    Bootstrap是前端開發(fā)中應用非常廣泛的一個框架,最早是Twitter 公司內(nèi)部的一個工具,開源之后迅速得到了各方的認可。本書基于最新的Bootstrap 3撰寫,在簡單介紹了安裝與配置之后就直奔主題,分別討論了個人作品站點、WordPress主題、企業(yè)網(wǎng)站、電子商務網(wǎng)站和單頁營銷網(wǎng)站等幾個最具代表性的應用案例,結(jié)合這些案例細致地剖析了Bootstrap還有LESS的使用方式和技巧。
    說了這么多,都是題外話,下面看看bootstrap搭建傳送帶的代碼。
    進度指示器
    <div id="homepage-feature">
    <ol>
    <li data-target="#homepage-feature" data-slide-to="0"></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>
    <div>
    <img >
    </div>
    <div>
    <img >
    </div>
    ...
    </div>
    然后是顯示前一個后一個的按鈕
    <a href="#homepage-feature" data-slide="prev">
    <span></span>
    </a>
    <a href="#homepage-feature" data-slide="next">
    <span></span>
    </a></div>
    如此便好了。以上內(nèi)容是小編給大家介紹的Bootstrap搭建傳送帶的相關知識,希望對大家有所幫助