Bootstrap圖片輪播效果實現方法

來源：懂視網責編：小OO 時間：2020-11-27 20:05:55

Bootstrap圖片輪播效果實現方法

導言；Bootstrap 輪播（Carousel）插件是一種靈活的響應式的向站點添加滑塊的方式。除此之外，內容也是足夠靈活的，可以是圖像、內嵌框架、視頻或者其他您想要放置的任何類型的內容。【相關視頻推薦：Bootstrap教程】。示例；下面演示圖片的輪播，使用bootstrap中的Carousel顯示循環播放元素插件。

推薦度：

點擊下載本文 文檔為doc格式

導讀導言；Bootstrap 輪播（Carousel）插件是一種靈活的響應式的向站點添加滑塊的方式。除此之外，內容也是足夠靈活的，可以是圖像、內嵌框架、視頻或者其他您想要放置的任何類型的內容。【相關視頻推薦：Bootstrap教程】。示例；下面演示圖片的輪播，使用bootstrap中的Carousel顯示循環播放元素插件。

本文主要為大家詳細介紹了Bootstrap圖片輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能幫助到大家。

導言

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

【相關視頻推薦：Bootstrap教程】

示例

下面演示圖片的輪播，使用bootstrap中的Carousel顯示循環播放元素插件。

<p 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 -->
 <p class="carousel-inner" role="listbox">
 <p class="item active">
 <img src="..." alt="...">
 <p class="carousel-caption">
 ...
 </p>
 </p>
 <p class="item">
 <img src="..." alt="...">
 <p class="carousel-caption">
 ...
 </p>
 </p>
 ...
 </p>

 <!-- 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>
</p>

在src中插入圖片已為圖片設置大小

還可以為其加上標題

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

enter image description here

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Bootstrap圖片輪播效果實現方法

推薦度：

點擊下載本文 文檔為doc格式

標簽：圖片實現效果

熱門焦點

Bootstrap圖片輪播效果實現方法

Bootstrap圖片輪播效果實現方法

Bootstrap圖片輪播效果實現方法

最新推薦

猜你喜歡

熱門推薦