<!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" >

     <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="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506331632659&di=959bca79c43af466474ac41fb61fce52&imgtype=0&src=http%3A%2F%2Fimg.1ppt.com%2Fuploads%2Fallimg%2F1305%2F1-130516091446402.jpg" alt="2 slide">

                 <div class="container">

                     <div class="carousel-caption">

                         文本区域

                     </div>

                 </div>

             </div>

             <div class="item">

                 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506331632655&di=96be7e96cad8bf956f9650290c569bf8&imgtype=0&src=http%3A%2F%2Fwww.jituwang.com%2Fuploads%2Fallimg%2F110910%2F2444-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>

bootstrap 轮播模板的更多相关文章

  1. bootstrap轮播图--兼容IE7

    <!DOCTYPE html> <html> <head> <title>Bootstrap轮播</title> <meta char ...

  2. Bootstrap 轮播（Carousel）插件

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

  3. bootstrap轮播组件,大屏幕图片居中效果

    在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中 视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中 ...

  4. bootstrap轮播组件之“如何关闭自动轮播”

    在一个页面里使用多个bootstrap轮播组件的时候,如果还让所有轮播图都自动轮播的话,整个画面都在动,会给用户一种很不好的体验感受.所以,需要关闭轮播图的自动轮播. 关闭方法:去除如下属性即可: d ...

  5. bootstrap轮播图 两侧半透明阴影

    用bootstrap轮播图:Carousel插件,图片两侧影音实在碍眼,想去掉,首先发现有css里由opacity: 0.5这个东西来控制,全部改成opacity: 0.0,发现指示箭头也看不见了. ...

  6. Bootstrap 轮播

    [Bootstrap 轮播] 1.要设置一个轮播界面,需要注意以下几点: 1)根div 必须为 class="carousel slide" 2)根div下含有三块子div a)& ...

  7. Bootstrap 轮播（Carousel）详解

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

  8. 第二百四十八节，Bootstrap轮播插件

    Bootstrap轮播插件 学习要点: 1.轮播插件 本节课我们主要学习一下 Bootstrap 中的轮播插件. 一．轮播 轮播插件就是将几张同等大小的大图,按照顺序依次播放. 基本实例. 第一步,给 ...

  9. Bootstrap 轮播图的使用和理解

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

随机推荐

  1. JavaScript事件循环(Event Loop)机制

    JavaScript 是单线程单并发语言 什么是单线程 主程序只有一个线程,即同一时间片断内其只能执行单个任务. 为什么选择单线程? JavaScript的主要用途是与用户互动,以及操作DOM.这决定 ...

  2. 算法学习：Pac-Man的简单对抗

    Pacman项目是加州大学伯克利分校提供的一个可视化的AI学习平台.其主体利用python完成.该项目提供了丰富的说明文档,以及预先实现了一些简单的算法供参考各接口的使用. http://ai.ber ...

  3. 文件系统的几种类型：ext3, s…

    分类: 架构设计与优化 1.  ext3 在异常断电或系统崩溃(不洁关机, unclean system shutdown  ).每个已挂载ext2文件系统计算机必须使用e2fsck程序来检查其一致性 ...

  4. CCIE-MPLS VPN-实验手册（上卷）

    看完了看完了看完了,豪爽豪爽豪爽,一个月了,写得挺棒.总共14个mpls vpn的实验,为留下学习的痕迹,原封不动献出. CCIE实验手册 (路由部分-MPLSVPN基础篇) [CCIE]  JUST ...

  5. Java学习9——面向对象

    (重点:内存分析) 类的定义 //用class关键字定义一个类 class Person { //成员变量定义 private int id; private int age = 20; //方法定义 ...

  6. 201521123052《Java程序设计》第7周学习总结

    1. 本周学习总结 参考资料: XMind 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 public boolean contains(Ob ...

  7. 201521123044 《Java程序设计》第4周学习总结

    1. 本章学习总结 2. 书面作业 1. 注释的应用 使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) 答: 2. 面向对象设计(大作业1,非常重要) 2.1 ...

  8. 201521123111《Java程序设计》第14周学习总结

    本次作业参考文件 MySql操作视频与数据库相关jar文件请参考QQ群文件. 1. 本周学习总结 1.1 以你喜欢的方式(思维导图.Onenote或其他)归纳总结多数据库相关内容. 连接数据库前,应先 ...

  9. 201521123006 《java程序设计》 第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...

  10. java：java构造器和java方法的区别

    构造函数(构造器)是一种特殊的函数.其主要功能是用来在创建对象时初始化对象, 即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中.构造函数与类名相同,可重载多个不同的构造函数.在JA ...