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 相关文章推荐
JavaScript中如何通过arguments对象实现对象的重载
May 12 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
微信小程序云开发实现增删改查功能
May 17 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 Javascript
Js图片点击切换轮播实现代码
Jul 27 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
php 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
Symfony的安装和配置方法
2016/03/17 PHP
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
JavaScript插件化开发教程(六)
2015/02/01 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
python调用java的Webservice示例
2014/03/10 Python
Python3访问并下载网页内容的方法
2015/07/28 Python
10个Python小技巧你值得拥有
2018/09/29 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
strlen的几种不同实现方法
2013/05/31 面试题
护理实习自我鉴定
2013/12/14 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL
JavaScript 对象创建的3种方法
2021/11/17 Javascript