<!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. java常见面试题(二)

    1.java集合类 Collection是最基本的集合接口,一个Collection代表一组Object,即Collection的元素(Elements).JavaSDK不提供直接继承自Collect ...

  2. CCNA+NP学习笔记—交换网络篇

    本章关于企业网络的最底层--交换层,难度较低,主要为以后三层的路由做铺垫.所有笔记的分类顺序为:序章→交换层→路由层→运营商,体现了从企业网到互联网的学习顺序. 注:思科设备命令行通常不分大小写!以后 ...

  3. dnsmasq一次成功的配置

    第一次用这个小软件,感觉还不错,因为没有像bind那样配置起来繁琐,并且我们也不需要去配置很多文件,内外网访问互不干涉. 我是在centos6.5下进行配置的: 先说说自己的理解: dnsmasq先去 ...

  4. 201521123001《Java程序设计》第2周学习总结

    本周学习总结 码云可以很方便地储存我们写好的代码,不用在写代码的时候担心没带U盘 Java中有许多已经写好的具有特定功能的一段独立小程序,不需要每一个函数都自己编写 Java的float型和C语言的不 ...

  5. 201521123062《Java程序设计》第2周学习总结

    1.本周学习总结 声明一个变量后必须对变量进行显式的初始化: 各种数据类型,运算符,表达式的使用: 枚举是初步了解及使用: 字符串String类 2.书面作业 Q1.使用Eclipse关联jdk源代码 ...

  6. 201521123003《Java程序设计》第1周学习总结

    1. 本周学习总结 1.了解Java语言的特点: 2.明确了jdk,jre,jvm的具体含义及区别 3.掌握java的编译及运行步骤 4.了解jdk文档的用法 2. 书面作业 Q1.为什么java程序 ...

  7. 工厂模式 and 单例模式

    工厂模式:使用工厂类使创建类与使用类分离,从而提高代码的易维护性,可扩展性等 工厂模式分位简单工厂模式和工厂方法模式 使用简单工厂模式的步骤:     1.创建父类及其子类         父类中有[ ...

  8. ROS学习记录（四）————怎样建立一个package包？

    功能包是什么? 英文表述package,我可没有在炫英文啊,我的英文很烂的,只是在提醒大家,在ROS系统中,这个词使用的频率非常之高,你必须记住它,要不就没法正确的看懂信息.言归正传,package是 ...

  9. Oracle SQL*Plus 数据备份为 sql 文件

    在某些比较严格的环境中,不提供像PL/SQL Developer 这样的工具供我们备份表数据时,使用SQL*Plus运行如下脚本内容导出数据. 1,  执行时登录SQL*Plus,  命令   @D: ...

  10. jmeter测试HTTP请求

    HTTP超文本传输协议(HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所有的WWW文件都必须遵守这个标准.(详情参考看一下百科) HTTP发送请求有GE ...