<!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. ADO.NET调用存储过程

    建表 CREATE TABLE [tab_cJ] ( [id] [, ) NOT NULL PRIMARY KEY, [name] [varchar] () , [age] [int] NULL , ...

  2. NHibernate教程(7)--并发控制

    本节内容 什么是并发控制? 悲观并发控制(Pessimistic Concurrency) 乐观并发控制(Optimistic Concurrency) NHibernate支持乐观并发控制 实例分析 ...

  3. Assert中的静态方法

    junit中的assert方法全部放在Assert类中,总结一下junit类中assert方法的分类. 1.assertTrue/False([String message,]boolean cond ...

  4. 【转】为什么选择Spring Boot作为微服务的入门级微框架

    本文为普元云计算高级工程师许二虎在普元云计算架构设计群的微课堂分享.如需加入普元新一代数字化企业云平台研发设计群参与微课堂.架构设计与讨论直播,请直接回复此公众号:"加群 姓名 公司 职位 ...

  5. 转：js闭包

    一切都是对象 "一切都是对象"这句话的重点在于如何去理解"对象"这个概念. --当然,也不是所有的都是对象,值类型就不是对象. 首先咱们还是先看看javascr ...

  6. 【Beta】Daily Scrum Meeting——Day3

    站立式会议照片 1.本次会议为第三次Meeting会议: 2.本次会议在早上9:40,在陆大实验室召开,本次会议为25分钟讨论今天要完成的任务以及接下来的任务安排. 燃尽图 每个人的工作分配 遇到的困 ...

  7. 201521123082 《Java程序设计》第1周学习总结

    201521123082 <Java程序设计>第1周学习总结 标签(空格分隔): Java 1. 本周学习总结 0.初步了解Java语言及其发展历史和过程,同时也初步了解了Java具有跨平 ...

  8. 【Alpha阶段】第六次scrum meeting

    一.会议照片 二.会议内容 姓名 学号 负责模块 昨日任务完成度 今日任务 杨爱清 099 界面设计和交互功能 完成 设计界面 杨立鑫 100 数据库搭建和其他 完成 将数据库与其他模块连接 林 钊 ...

  9. 团队作业4——第一次项目冲刺（Alpha版本）第一天 and 第二天

    第一天冲刺 一.Daily Scrum Meeting照片 二.每个人的工作 1.今天计划完成的任务 徐璨 申悦:查找关于安卓开发资料,环境搭建 连永刚 林方言:设计项目所要实现的功能,并对功能进行详 ...

  10. 201521123059 《Java程序设计》第六周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...