Bootstrap轮播插件简单使用方法介绍
来源: 阅读:668 次 日期: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>

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

更多信息请查看网络编程
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:
云南网警报警专用图标
Baidu
map