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 相关文章推荐
阻止子元素继承父元素事件具体思路及实现
May 02 Javascript
B/S模式项目中常用的javascript汇总
Dec 17 Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
jQuery 选择器详解
Jan 19 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
Vue实现移动端拖拽交换位置
Jul 29 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 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
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
PHP的全局错误处理详解
2016/04/25 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
python if not in 多条件判断代码
2016/09/21 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
应届生高等护理求职信
2013/10/12 职场文书
技术总监的工作职责
2013/11/13 职场文书
电子商务专业推荐信范文
2013/12/02 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
安全守法证明
2015/06/23 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
python套接字socket通信
2022/04/01 Python
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技