zoukankan      html  css  js  c++  java
  • Bootstrap历练实例:轮播(carousel)

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible"content="IE=edge" />
    <meta name="viewport"content="width=device-width,initial-scale=1.0" />
    <!--[if lt IE 9]-->
    <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.js"></script>
    <!--[endif]-->
    <title>Bootstrap历练实例:轮播(carousel)</title>
    <meta charset="utf-8" />
    <link rel="stylesheet"href="bootstrap-3.3.5/dist/css/bootstrap.min.css" />
    <style>
    .carousel {
    height:500px;
    }
    .carousel .item{
    height:500px;
    }
    .carousel .item img{
    100%;

    }
    </style>
    </head>
    <body>
    <div class="container">
    <!--轮播(Carousel)指针-->
    <div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
    <li class="active"data-target="#myCarousel" data-slide-to="0"></li>
    <li data-target="#myCarousel"data-slide-to="1"></li>
    <li data-target="#myCarousel"data-slide-to="2"></li>
    <li data-target="#myCarousel"data-slide-to="3"></li>
    <li data-target="#myCarousel"data-slide-to="4"></li>
    </ol>
    <!--轮播(Carousel)项目-->
    <div class="carousel-inner">
    <div class="item active">
    <img src="Images/chrome-big.jpg"alt="chrome" />
    <div class="container">
    <div class="carousel-caption">
    <h4>Chrome</h4>
    <p>Google Chrome,又称Google浏览器,是一个由Google(谷歌)公司开发的网页浏览器。</p>
    <p><a href="#"class="btn btn-primary btn-lg"role="button"target="_blank">点击我下载</a></p>
    </div>
    </div>
    </div>
    <div class="item">
    <img src="Images/firefox-big.jpg"alt="firefox" />
    <div class="container">
    <div class="carousel-caption">
    <h4>Firefox</h4>
    <p>Mozilla Firefox,中文名通常称为“火狐”或“火狐浏览器”,是一个开源网页浏览器。</p>
    <p><a href="#"class="btn btn-primary btn-lg"role="button"target="_blank">点击按钮下载</a></p>
    </div>
    </div>
    </div>
    <div class="item">
    <img src="Images/ie-big.jpg"alt="ie" />
    <div class="container">
    <div class="carousel-caption">
    <h4>IE</h4>
    <p>Internet Explorer,简称 IE,是微软公司推出的一款网页浏览器。</p>
    <p><a href="#"class="btn btn-primary btn-lg"role="button"target="_blank">点击按钮下载</a></p>
    </div>
    </div>
    </div>
    <div class="item">
    <img src="Images/opera-big.jpg"alt="opera" />
    <div class="container">
    <div class="carousel-caption">
    <h4>Opera</h4>
    <p>Opera浏览器,是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。</p>
    <p><a href="#"class="btn btn-primary btn-lg"role="button"target="_blank">点击按钮下载</a></p>
    </div>
    </div>
    </div>
    <div class="item">
    <img src="Images/safari-big.jpg"alt="safari" />
    <div class="container">
    <div class="carousel-caption">
    <h4>Safari</h4>
    <p>Safari,是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>
    <p><a href="#"class="btn btn-primary btn-lg"role="button"target="_blank">点击按钮下载</a></p>
    </div>
    </div>
    </div>
    </div>
    <!--轮播(carousel)导航-->
    <a href="#myCarousel" data-slide="prev"class="carousel-control left">&lsaquo;</a>
    <a href="#myCarousel"data-slide="next"class="carousel-control right">&rsaquo;</a>
    </div>
    </div>

    <script src="jQuery/jquery-2.1.4.js"></script>
    <script src="bootstrap-3.3.5/dist/js/bootstrap.min.js"></script>
    </body>
    </html>

  • 相关阅读:
    JVM 综述
    看 Netty 在 Dubbo 中如何应用
    Netty 心跳服务之 IdleStateHandler 源码分析
    Netty 高性能之道
    Netty 解码器抽象父类 ByteToMessageDecoder 源码解析
    Netty 源码剖析之 unSafe.write 方法
    Netty 出站缓冲区 ChannelOutboundBuffer 源码解析(isWritable 属性的重要性)
    Netty 源码剖析之 unSafe.read 方法
    Netty 内存回收之 noCleaner 策略
    Netty 源码阅读的思考------耗时业务到底该如何处理
  • 原文地址:https://www.cnblogs.com/melao2006/p/5022363.html
Copyright © 2011-2022 走看看