Bootstrap圖片輪播效果詳解
更新時間：2017年10月17日 10:41:14 作者：阿浩yohann
這篇文章主要為大家詳細介紹了Bootstrap圖片輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
導言
Bootstrap 輪播（Carousel）插件是一種靈活的響應式的向站點添加滑塊的方式。除此之外，內容也是足夠靈活的，可以是圖像、內嵌框架、視頻或者其他您想要放置的任何類型的內容。
示例
下面演示圖片的輪播，使用bootstrap中的Carousel顯示循環(huán)播放元素插件。
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
在src中插入圖片已為圖片設置大小
還可以為其加上標題
<div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> <h3>...</h3> <p>...</p> </div> </div>
參考
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
通過Javascript將數(shù)據(jù)導出到外部Excel文檔的函數(shù)代碼
通過Javascript將數(shù)據(jù)導出到外部Excel文檔的函數(shù)代碼，需要的朋友可以參考下2012-06-06
我們在學習JavaScript中,難免都會去網(wǎng)上查一些資料,也許偶爾就會遇到“事件委托”,但是,大多數(shù)時說的是“事件綁定”,對于“事件委托”,或是不提,或是淺嘗輒止,對于我這個比較好奇的人來說,實在很頭疼,尤其是想更多的了解“事件委托”的時候2015-06-06
push和join方法想必大家并不陌生吧，在本文將為大家詳細介紹下js中的push和join方法的使用，感興趣的朋友可以參考下2013-10-10
這篇文章主要為大家介紹了javascript自定義select下拉框美化特效的相關資料,需要的朋友可以參考下2016-05-05
這篇文章主要為大家詳細介紹了微信小程序云開發(fā)，搭建一個管理小程序，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05![JavaScript輸出為[object?Object]問題的解決辦法](http://img.jbzj.com/images/xgimg/bcimg5.png)
JavaScript輸出為[object?Object]問題的解決辦法
平時我們在接收后端返回的json對象通常是一個字符串類型的object,所以一般我們要對這個object進行類型轉化后,我們才能使用object里面的數(shù)據(jù),這篇文章主要給大家介紹了關于JavaScript輸出為[object?Object]問題的解決辦法,需要的朋友可以參考下2023-11-11
JavaScript有一種object數(shù)據(jù)類型，但是這種對象不同于c#或vb中的對象，在c#中，我們通過類創(chuàng)建一個對象，一個類相當于創(chuàng)建對象的模板，定義了對象的屬性和方法，這些對象和方法將永遠固定，我們不能在運行時不能增加對象的屬性和方法。2011-01-01
這篇文章主要介紹了JavaScript實現(xiàn)隨機替換圖片的方法,涉及javascript中Math.random方法的靈活運用,需要的朋友可以參考下2015-04-04
在實際開發(fā)中我們會遇到不確定高度的情況,那么在uniapp中我們如何獲取區(qū)域的高度吶?這篇文章主要給大家介紹了關于uniapp獲取頁面高度與元素高度的相關資料,需要的朋友可以參考下2023-09-09
阻止別人不那么容易下載或查看到你的CSS文件,高手可能阻止不了,不過新手們一時會不知所措,費一番周折了2009-10-10