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


Posted in Javascript onJune 21, 2016

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

小编再为大家推荐一篇文章:全面解析Bootstrap图片轮播效果

如果大家还想深入学习,可以点击这里进行学习,再为大家附一个精彩的专题:Bootstrap学习教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
js chrome浏览器判断代码
Mar 28 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
namespace.js Javascript的命名空间库
Oct 11 Javascript
JS写的贪吃蛇游戏(个人练习)
Jul 08 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 Javascript
浅谈Angular4中常用管道
Sep 27 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
May 23 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 #Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 #Javascript
第三篇Bootstrap网格基础
Jun 21 #Javascript
Bootstrap三种表单布局的使用方法
Jun 21 #Javascript
第二篇Bootstrap起步
Jun 21 #Javascript
基于zepto.js简单实现上传图片
Jun 21 #Javascript
第一篇初识bootstrap
Jun 21 #Javascript
You might like
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
新浪SAE搭建PHP项目教程
2015/01/28 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
javascript测试题练习代码
2012/10/10 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
js实现一个猜数字游戏
2017/03/31 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
python 调用HBase的简单实例
2016/12/18 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
通信工程专业毕业生推荐信
2013/12/25 职场文书
职工年度考核评语
2014/12/31 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
工商局调档介绍信
2015/10/22 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
《画家和牧童》教学反思
2016/02/17 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL