Bootstrap圖片輪播效果詳解

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

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

導(dǎo)言

Bootstrap 輪播（Carousel）插件是一種靈活的響應(yīng)式的向站點(diǎn)添加滑塊的方式。除此之外，內(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è)置大小

還可以為其加上標(biāo)題

<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.菜鳥(niǎo)學(xué)堂Bootstrap教程

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

您可能感興趣的文章:

相關(guān)文章

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