<!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. hdu 2503 1713 1108 最小公倍数&最大公约数

    gcd模板: __int64 gcd(__int64 a,__int64 b) { retur b==0?a:gcd(b,a%b); } 1108: #include<iostream> ...

  2. 猎八哥浅谈MYSQL触发器

    什么是MYSQL触发器,我们先了解一下触发的意思.触发的字面意思是指因触动而激发起某种反应. MYSQL必知必会中对触发器的解释是:MySQL响应以下任意语句而自动执行的一条MySQL语句(或位于 B ...

  3. 使用JavaScript循环嵌套解决各种图形

    [循环嵌套的规律]    1.外层循环控制行数,内层循环控制每行中元素的个数. [图形题思路]    1.确定图形有几行,行数即为外层循环次数:    2.确定每行中有几种元素组成,有几种元素表示有几 ...

  4. HTML特殊符号、常用字符实体

    HTML特殊符号对照表.常用的字符实体 最常用的字符实体 显示结果 描述 实体名称 实体编号   空格     <</td> 小于号 < < > 大于号 > ...

  5. linux命令每日一练:find与rm实现查找并删除目录或文件

    linux命令每日一练 linux中find与rm实现查找并删除目录或文件 linux 下用find命令查找文件,rm命令删除文件. 删除指定目录下指定文件 find 要查找的目录名 -name .s ...

  6. 团队作业八—第二次团队冲刺（Beta版本） 第 1 天

    一.每个人的工作 (1) 昨天已完成的工作 由于是才刚开始冲刺,所以没有昨天的工作 (2) 今天计划完成的工作: 对界面的优化和一些细节的完善 (3) 工作中遇到的困难: 工作中出现了意见不一的情况 ...

  7. C语言之算法初步（汉诺塔--递归算法）

    个人觉得汉诺塔这个递归算法比电子老鼠的难了一些,不过一旦理解了也还是可以的,其实网上也有很多代码,可以直接参考.记得大一开始时就做过汉诺塔的习题,但是那时代码写得很长很长,也是不理解递归的结果.现在想 ...

  8. 201521123108 《Java程序设计》第6周学习总结

    本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 书面作业 2.1. clone方法 1.1 Object对象中的 ...

  9. 201521123033《Java程序设计》第1周学习总结

    1. 本周学习总结 (1)了解了JVM,JRE,JDK (2)配置java环境变量 (3)编译一些简单的java代码 2. 书面作业 为什么java程序可以跨平台运行?执行java程序的步骤是什么?( ...

  10. 201521123117 《Java程序设计》第1周学习总结

    第一周学习总结: 这周开始学习了Java,因为之前C语言没学好所以看部分东西还是一头雾水,但是在查阅资料和同学的帮助开始对Java有了一些了解,这周主要学习了Java的诞生发展以及运用包括JVN/JR ...