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{
width: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">‹</a>
<a href="#myCarousel"data-slide="next"class="carousel-control right">›</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>
