快速使用Bootstrap搭建傳送帶
更新時間：2016年05月06日 14:52:01 作者：fiona0425
這篇文章主要介紹了快速使用Bootstrap搭建傳送帶的相關資料,非常具有參考借鑒價值，需要的朋友可以參考下
bootstrap介紹
Bootstrap是前端開發(fā)中應用非常廣泛的一個框架，最早是Twitter 公司內部的一個工具，開源之后迅速得到了各方的認可。本書基于最新的Bootstrap 3撰寫，在簡單介紹了安裝與配置之后就直奔主題，分別討論了個人作品站點、WordPress主題、企業(yè)網站、電子商務網站和單頁營銷網站等幾個最具代表性的應用案例，結合這些案例細致地剖析了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屬性必須使用傳送帶的ＩＤ 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搭建傳送帶的相關知識，希望對大家有所幫助，在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要介紹了JS如何根據當前日期獲取一周所有日期,文中通過實例代碼補充介紹了js獲取當前一周的時間,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了小程序實現(xiàn)新用戶判斷并跳轉激活的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
前我寫過一篇關于JavaScript如何實現(xiàn)面向對象編程的文章。今天，我寫這篇文章跟大家討論一下，如何實現(xiàn)事件。2009-07-07
這篇文章主要為大家詳細介紹了js實現(xiàn)商品篩選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
通過判斷JavaScript的版本實現(xiàn)執(zhí)行不同的代碼
有時候需要根據JavaScript的版本來分別執(zhí)行一些代碼,那么就可能需要用到下面的代碼.2010-05-05
layui.tree組件的使用以及搜索節(jié)點功能的實現(xiàn)
今天小編就為大家分享一篇layui.tree組件的使用以及搜索節(jié)點功能的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
本次將介紹如何使用Fetch API（ES6 +）對REST API的 HTTP請求，還有一些示例提供給大家便于大家理解。具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
本文的重點在于討論bind()方法的實現(xiàn)，在開始討論bind()的實現(xiàn)之前，我們先來看看bind()方法的使用，有需要的小伙伴可以參考下。2015-05-05
這篇文章主要介紹了用js一次改變多個input的readonly屬性值的方法,需要的朋友可以參考下2014-06-06
uni-app實現(xiàn)web-view圖片長按下載解決方案
uniapp的web-view中圖片無法長按保存，IOS下是正常的，但是Android下長按無反應，這篇文章主要介紹了uni-app實現(xiàn)web-view圖片長按下載解決方案,需要的朋友可以參考下2023-09-09