使用BootStrap进行轮播图的制作


Posted in Javascript onJanuary 06, 2017

Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

<!DOCTYPE html> 
<html lang="zh-cn"> 
<head> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>轮播图</title> 
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" /> 
</head> 
<style> 
  .carousel { 
    height: 500px; 
  } 
  .carousel .item { 
    height: 500px; 
  } 
  .carousel .item img { 
    width: 100%; 
  } 
</style> 
<body> 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
  <!-- Indicators轮播指标 --> 
  <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> 
  <!-- Wrapper for slides 轮播项目--> 
  <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
      <img src="http://img.mukewang.com/5412ad400001e52014280484.jpg" alt="..."> 
      <div class="carousel-caption"> 
        11 英寸 MacBook Air 充电一次可运行长达 9 小时,而 13 英寸机型则可运行长达 12 小时。 
      </div> 
    </div> 
    <div class="item"> 
      <img src="http://img.mukewang.com/5412ad7c0001d2eb10880541.jpg" alt="..."> 
      <div class="carousel-caption"> 
        无论是什么任务,配备 Intel HD Graphics 5000 图形处理器的第四代 Intel Core 处理器都能应对自如。 
      </div> 
    </div> 
    <div class="item"> 
      <img src="http://img.mukewang.com/5412ae5c0001653b12800644.jpg" alt="..."> 
      <div class="carousel-caption"> 
        有了新一代 802.11ac 技术,MacBook Air 令 Wi-Fi 速度超越极限。 
      </div> 
    </div> 
  </div> 
  <!-- Controls --> 
  <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> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body> 
</html>

以上所述是小编给大家介绍的使用BootStrap进行轮播图的制作,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
Vue中的字符串模板的使用
May 17 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
JavaScript递归函数定义与用法实例分析
Jan 24 Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 Javascript
js实现简易拖拽的示例
Oct 26 Javascript
BootStrap便签页的简单应用
Jan 06 #Javascript
bootstrap table实例详解
Jan 06 #Javascript
node.js发送邮件email的方法详解
Jan 06 #Javascript
利用jquery实现实时更新歌词的方法
Jan 06 #Javascript
Ajax 加载数据 练习代码
Jan 05 #Javascript
JavaScript中Math对象的方法介绍
Jan 05 #Javascript
微信小程序 Tab页切换更新数据
Jan 05 #Javascript
You might like
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
php字符串操作常见问题小结
2016/10/11 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
Python程序语言快速上手教程
2012/07/18 Python
python33 urllib2使用方法细节讲解
2013/12/03 Python
Python实现远程调用MetaSploit的方法
2014/08/22 Python
在Linux下调试Python代码的各种方法
2015/04/17 Python
python用户管理系统的实例讲解
2017/12/23 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
伦敦一卡通:The London Pass
2018/11/30 全球购物
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
普天C++笔试题
2016/03/20 面试题
村捐赠仪式答谢词
2014/01/21 职场文书
工作态度检讨书
2014/02/11 职场文书
公司应聘自荐书
2014/06/14 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
详解Redis集群搭建的三种方式
2021/05/31 Redis
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android