Bootstrap圖片輪播效果詳解

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

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

導言

Bootstrap 輪播（Carousel）插件是一種靈活的響應式的向站點添加滑塊的方式。除此之外，內(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中插入圖片已為圖片設置大小

還可以為其加上標題

<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.菜鳥學堂Bootstrap教程

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

您可能感興趣的文章:

BootStrap學習筆記之nav導航欄和面包屑導航
這篇文章主要介紹了BootStrap學習筆記之nav導航欄和面包屑導航的相關資料,需要的朋友可以參考下
2017-01-01
利用Js+Css實現(xiàn)折紙動態(tài)導航效果實例源碼
這篇文章主要給大家介紹了利用Js+Css實現(xiàn)折紙動態(tài)導航的效果，實現(xiàn)后的效果非常不錯，文中給出了簡單的介紹和完整的實例代碼，對大家具有一定的參考價值，有需要的朋友們下面來一起看看吧。
2017-01-01
自制微信公眾號一鍵排版工具
這篇文章主要介紹了自制微信公眾號一鍵排版工具的相關資料,需要的朋友可以參考下
2016-09-09
JavaScript中的連續(xù)賦值問題實例分析
這篇文章主要介紹了JavaScript中的連續(xù)賦值問題,結合實例形式分析了javascript賦值語句以及連續(xù)賦值操作相關用法與操作注意事項,需要的朋友可以參考下
2019-07-07
前端大屏適配的三種解決方案總結
在日常前端開發(fā)中,大屏項目是每個前端開發(fā)者必備技能,但是目前設備尺寸大小和分辨率都不相同,所以大屏適配成了一個頭疼的問題,所以下面這篇文章主要給大家介紹了關于前端大屏適配的三種解決方案,需要的朋友可以參考下
2024-03-03
uniapp H5 https跨域請求實現(xiàn)
這篇文章主要介紹了uniapp H5 https跨域請求實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-01-01
js實現(xiàn)以最簡單的方式將數(shù)組元素添加到對象中的方法
下面小編就為大家分享一篇js實現(xiàn)以最簡單的方式將數(shù)組元素添加到對象中的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2017-12-12
深入了解JavaScript中l(wèi)et/var/function的變量提升
這篇文章主要介紹了深入了解JavaScript中l(wèi)et/var/function的變量提升，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下
2022-07-07
用js代碼和插件實現(xiàn)wordpress雪花飄落效果的四種方法
這篇文章主要介紹了用js代碼和插件實現(xiàn)wordpress雪花飄落效果的四種方法,需要的朋友可以參考下
2014-12-12
Bootstrap基礎學習
Bootstrap是Twitter推出的一個用于前端開發(fā)的開源工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發(fā)，是一個CSS/HTML框架。它使用了流行的瀏覽器技術，給web開發(fā)提供了時尚的版式，表單，buttons，表格，網(wǎng)格系統(tǒng)等等。
2015-06-06