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 相关文章推荐
js获取某元素的class里面的css属性值代码
Jan 16 Javascript
javascript将url中的参数加密解密代码
Nov 17 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
AngularJS动态生成div的ID源码解析
Aug 29 Javascript
vue从使用到源码实现教程详解
Sep 19 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
JavaScript 异步调用
Oct 25 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 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实现维护文件代码
2007/06/14 PHP
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
PHP中数组转换为SimpleXML教程
2019/01/27 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
Python的多态性实例分析
2015/07/07 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
python实现批量注册网站用户的示例
2019/02/22 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
如何基于Python创建目录文件夹
2019/12/31 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
《三袋麦子》教学反思
2014/03/02 职场文书
爱国主题班会教案
2015/08/14 职场文书
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python