DIV CSS 佈局教程網

本文細致的為大家分享了Bootstrap輪播插件簡單實例，供大家參考，具體內容如下

使用Bootstrap的輪播插件可以向站點添加滑塊，內容可以是圖像，內嵌框架，視頻或其它任何內容，使用輪播插件需要引入

效果圖：

bootstrap.min.js. 

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 
  <!—輪播導航 -->
  <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>
  <!—輪播項目 -->
  <div class="carousel-inner" role="listbox">
  <div class="item active">
   <img src="~/images/Chrysanthemum.jpg" />
   <div class="carousel-caption"> 
   ffffffff
   </div> 
  </div>
   <div class="item">
   <img src="~/images/Desert.jpg" />
 
   <div class="carousel-caption">
 
   xxxxxxxxxxxxxxxx
   </div> 
  </div>
   <div class="item">
   <img src="~/images/Lighthouse.jpg" /> 
   <div class="carousel-caption"> 
   mmmmmmmmmmmm 
   </div>
  </div>
  </div>
 
  <!—輪播導航 -->
 
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
 
  <span class="glyphicon glyphicon-chevron-left"></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"></span>
   <span class="sr-only">Next</span>
 
  </a> 
 </div>

小編再為大家推薦一篇文章：全面解析Bootstrap圖片輪播效果

如果大家還想深入學習，可以點擊這裡進行學習，再為大家附一個精彩的專題：Bootstrap學習教程

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