Bootstrap轮播插件简单使用方法介绍
2016-07-18来源:易贤网

本文细致的为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助

2026公务员·事业单位培训课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
推荐信息