Bootstrap圖片輪播效果詳解

更新時間：2017年10月17日 10:41:14 作者：阿浩yohann

這篇文章主要為大家詳細介紹了Bootstrap圖片輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

導(dǎo)言

Bootstrap 輪播（Carousel）插件是一種靈活的響應(yīng)式的向站點添加滑塊的方式。除此之外，內(nèi)容也是足夠靈活的，可以是圖像、內(nèi)嵌框架、視頻或者其他您想要放置的任何類型的內(nèi)容。

示例

下面演示圖片的輪播，使用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中插入圖片已為圖片設(shè)置大小

還可以為其加上標題

<div class="item">
 <img src="..." alt="...">
 <div class="carousel-caption">
 <h3>...</h3>
 <p>...</p>
 </div>
</div>

enter image description here

參考

1.Bootstrap官網(wǎng)中文文檔

2.菜鳥學(xué)堂Bootstrap教程

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

通過Javascript將數(shù)據(jù)導(dǎo)出到外部Excel文檔的函數(shù)代碼
通過Javascript將數(shù)據(jù)導(dǎo)出到外部Excel文檔的函數(shù)代碼，需要的朋友可以參考下
2012-06-06
javascript事件委托的方式綁定詳解
我們在學(xué)習(xí)JavaScript中,難免都會去網(wǎng)上查一些資料,也許偶爾就會遇到“事件委托”,但是,大多數(shù)時說的是“事件綁定”,對于“事件委托”,或是不提,或是淺嘗輒止,對于我這個比較好奇的人來說,實在很頭疼,尤其是想更多的了解“事件委托”的時候
2015-06-06
js中的push和join方法使用介紹
push和join方法想必大家并不陌生吧，在本文將為大家詳細介紹下js中的push和join方法的使用，感興趣的朋友可以參考下
2013-10-10
js自定義select下拉框美化特效
這篇文章主要為大家介紹了javascript自定義select下拉框美化特效的相關(guān)資料,需要的朋友可以參考下
2016-05-05
微信小程序云開發(fā) 搭建一個管理小程序
這篇文章主要為大家詳細介紹了微信小程序云開發(fā)，搭建一個管理小程序，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-05-05
JavaScript輸出為[object?Object]問題的解決辦法
平時我們在接收后端返回的json對象通常是一個字符串類型的object,所以一般我們要對這個object進行類型轉(zhuǎn)化后,我們才能使用object里面的數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于JavaScript輸出為[object?Object]問題的解決辦法,需要的朋友可以參考下
2023-11-11
理解JavaScript中的對象推薦
JavaScript有一種object數(shù)據(jù)類型，但是這種對象不同于c#或vb中的對象，在c#中，我們通過類創(chuàng)建一個對象，一個類相當于創(chuàng)建對象的模板，定義了對象的屬性和方法，這些對象和方法將永遠固定，我們不能在運行時不能增加對象的屬性和方法。
2011-01-01
JavaScript實現(xiàn)隨機替換圖片的方法
這篇文章主要介紹了JavaScript實現(xiàn)隨機替換圖片的方法,涉及javascript中Math.random方法的靈活運用,需要的朋友可以參考下
2015-04-04
uniapp獲取頁面高度與元素高度簡單示例
在實際開發(fā)中我們會遇到不確定高度的情況,那么在uniapp中我們?nèi)绾潍@取區(qū)域的高度吶?這篇文章主要給大家介紹了關(guān)于uniapp獲取頁面高度與元素高度的相關(guān)資料,需要的朋友可以參考下
2023-09-09
簡單的加密css地址防止別人下載你的CSS文件的方法
阻止別人不那么容易下載或查看到你的CSS文件,高手可能阻止不了,不過新手們一時會不知所措,費一番周折了
2009-10-10