简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

Bootstrap轮播插件简单使用方法介绍

来源:易贤网   阅读:871 次  日期:2016-07-18 16:35:02

温馨提示:易贤网小编为您整理了“Bootstrap轮播插件简单使用方法介绍”,方便广大网友查阅!

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

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

更多信息请查看网络编程
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:Javascript随机标签云代码实例
下一篇:JS实现的跨浏览器解析XML文件实例
易贤网手机网站地址:Bootstrap轮播插件简单使用方法介绍
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!