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>
參考
以上就是本文的全部?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)一鍵排版工具的相關(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
在日常前端開發(fā)中,大屏項(xiàng)目是每個(gè)前端開發(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的變量提升，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-07-07
用js代碼和插件實(shí)現(xiàn)wordpress雪花飄落效果的四種方法
這篇文章主要介紹了用js代碼和插件實(shí)現(xiàn)wordpress雪花飄落效果的四種方法,需要的朋友可以參考下2014-12-12
Bootstrap是Twitter推出的一個(gè)用于前端開發(fā)的開源工具包。它由Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開發(fā)，是一個(gè)CSS/HTML框架。它使用了流行的瀏覽器技術(shù)，給web開發(fā)提供了時(shí)尚的版式，表單，buttons，表格，網(wǎng)格系統(tǒng)等等。2015-06-06