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>

  • 相关阅读:
    用户登录系统(三)
    SQL server 2005 时间函数应用 查询出结果为00:00:00 小时、分钟、秒
    Windows Server 2003系统 常用操作技巧集绵,发现了继续添加
    新一代井下数字集群通讯系统需求分析(一)
    WPF学习笔记(一)
    建立一个VSS源代码管理服务器,下面介绍建立的过程与实际应用情况
    Vista下使用VS2005的时候提示"没有安装FrontPage服务器扩展"的问题。
    SQL语句导入/导出EXCEL(转载自:白袜子blog)
    sql2005"因为它正用于复制"的错误解决办法
    (转)CS0016: 未能写入输出文件“c:\WINDOWS\xxxxxsktsuj.dll”“拒绝访问。”的处理
  • 原文地址:https://www.cnblogs.com/melao2006/p/5022363.html
Copyright © 2011-2022 走看看