bootstrap 轮播模板

时间：2022-10-02 10:42:29
 <!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轮播组件&comma;大屏幕图片居中效果

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

  4. bootstrap轮播组件之&OpenCurlyDoubleQuote;如何关闭自动轮播”

    在一个页面里使用多个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. ADB指令

    对于ADB指令的应用,首先应该配置环境,将文件所在路径复制到高级系统设置里面的环境变量path,然后就可以在命令符上进行ADB的指示 例如adb kill-server是关掉活动 adb start- ...

  2. Qt 之 去除窗口部件被选中后的焦点虚线框（设置Qt&colon;&colon;NoFocus即可）

    http://blog.csdn.net/goforwardtostep/article/details/53420529

  3. Codeforces Round &num;197 &lpar;Div&period; 2&rpar;

    A.Helpful Maths 分析:将读入的字符转化为数字,直接排个序就可以了. #include <cstdlib> #include <cstring> #include ...

  4. Newtonsoft&period;Json&period;JsonWriter

    [一篮饭特稀原创,转载请注明出自http://www.cnblogs.com/wanghafan/p/4754769.html]  JsonWriter使用: 前台 $.post("Ajax ...

  5. 在SQL2005实现维护计划-备份数据库

    一.備份數據庫維護計劃方案 [注]: 1.先啟動SQL Server Agent服務 2..交易記錄備份 (只限於完整和大量記錄復原模式). 3.下面中”清除備份trn文件” & “清除備份日 ...

  6. &lbrack;SCOI2009&rsqb;游戏

    Time Limit: 1 Sec  Memory Limit: 162 MB Description windy学会了一种游戏.对于1到N这N个数字,都有唯一且不同的1到N的数字与之对应.最开始wi ...

  7. 163k地方门户网站系统团购定时结束限量控制

    #coding=utf8 #!/usr/bin/env python # 网站自动审核系统 import pymssql import re import sys import datetime im ...

  8. IA32与x86

    64位机器相比于32位优点 ①访问虚拟地址范围更大 ②更多的寄存器 ③过程较简单 ④采用条件传送指令 详细看:http://baike.baidu.com/link?url=DoRp7iW_z3cE6 ...

  9. CLR读书笔记——委托

    协变性和逆变性 协变性是指方法能返回从委托返回类型派生的一个类型. 逆变性是指获取的参数可以是委托参数类型的基类. 举个例子吧,看以下定义的委托,以及方法. delegate Object MyCal ...

  10. 201521123014 《Java程序设计》第3周学习总结

    1. 本周学习总结 2. 书面作业 Q1. 代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; ...

相关文章