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获得地址栏参数的两种方法
Nov 08 Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 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还会继续执行么
2016/05/17 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
python脚本内运行linux命令的方法
2015/07/02 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
Python在groupby分组后提取指定位置记录方法
2018/04/20 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
给我一面国旗 python帮你实现
2019/09/30 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
矫正人员思想汇报
2014/01/08 职场文书
科技之星事迹材料
2014/06/02 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
供电工程专业求职信
2014/08/09 职场文书
学子宴致辞大全
2015/07/27 职场文书
聘任书格式及范文
2015/09/21 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技