bootstrap轮播模板使用方法详解


Posted in Javascript onNovember 17, 2017

本文实例为大家分享了bootstrap轮播模板展示的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Document</title>
 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" >
 <style type="text/css">
  .carousel {
   height: 500px;
  }
  .carousel .item {
   height: 500px;
   background-color: #000;
  }
  .carousel .item img {
   width: 100%;
  }
  .carousel-caption {
   z-index: 10;
  }
 </style>
</head>
 <body>
  <!-- 轮播 -->
 <div id="ad-carousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
   <li data-slide-to="0" class="active"></li>
   <li data-slide-to="1"></li>
   <li data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
   <div class="item active">
    <img src="http://img.glzy8.com/upfiles/www/ppt/jpg/24675.jpg" alt="1 slide">
    <div class="container">
     <div class="carousel-caption">
      文本区域
     </div>
    </div>
   </div>
   <div class="item">
    <img src="2F1-130516091446402.jpg" alt="2 slide">
    <div class="container">
     <div class="carousel-caption">
      文本区域
     </div>
    </div>
   </div>
   <div class="item">
    <img src="-110910214P238.jpg" alt="3 slide">
    <div class="container">
     <div class="carousel-caption">
      文本区域
     </div>
    </div>
   </div>
  </div>
  <a class="left carousel-control" href="#ad-carousel" data-slide="prev"><span
    class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="#ad-carousel" data-slide="next"><span
    class="glyphicon glyphicon-chevron-right"></span></a>
 </div>
 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
</body>
</html>

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

Javascript 相关文章推荐
在网页里看flash的trace数据的js类
Jan 10 Javascript
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
JQuery选择器特辑 详细小结
May 14 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
浅谈Node模块系统及其模式
Nov 17 #Javascript
基于Bootstrap表单验证功能
Nov 17 #Javascript
js 毫秒转天时分秒的实例
Nov 17 #Javascript
Bootstrap table使用方法汇总
Nov 17 #Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 #Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 #Javascript
vue.js项目打包上线的图文教程
Nov 16 #Javascript
You might like
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
thinkphp实现like模糊查询实例
2014/10/29 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
2017/01/05 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
python实现在pickling的时候压缩的方法
2014/09/25 Python
Python的Flask框架中Flask-Admin库的简单入门指引
2015/04/07 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
Python学习pygal绘制线图代码分享
2017/12/09 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
Python实现随机爬山算法
2021/01/29 Python
CSS3实现超慢速移动动画效果非常流畅无卡顿
2014/06/15 HTML / CSS
爱情检讨书大全
2014/01/21 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
合作协议书模板2014
2014/09/26 职场文书
酒店辞职书范文
2015/02/26 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript