我的例子用的是本地图片 ，如果你们想试一试就换个图片试试。。。
代码 如下：
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" target="_blank" rel="external nofollow" >
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.carousel {
height: 500px;
margin-bottom: 60px;
}
.carousel .item {
height: 500px;
background-color: #000;
}
.carousel .item img {
width: 100%;
}
.carousel-caption {
z-index: 10;
}
.carousel-caption p {
margin-bottom: 20px;
font-size: 20px;
line-height: 1.8;
}
</style>
</head>
<body>
<div id="myCarousel" class="carousel side" data-ride="carousel">
<pre class="prettyprint tryit prettyprinted" style="border-width: 1px 1px 1px 4px; border-style: solid; border-color: rgb(221, 221, 221); margin: 15px auto; padding: 10px 15px; font-stretch: normal; line-height: 20px; font-family: 'courier new'; white-space: pre-wrap; word-break: break-all; word-wrap: break-word; color: rgb(51, 51, 51); background: url("/images/codecolorer_bg.gif") 50% 0% rgb(251, 251, 251);"><span class="pln" style="border: 0px; margin: 0px; padding: 0px; color: rgb(0, 0, 0);"> </span><span class="com" style="border: 0px; margin: 0px; padding: 0px; color: rgb(136, 0, 0);"><!-- 轮播（Carousel）指标 --></span>
<ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1" ></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol>
<!-- 轮播（Carousel）项目 --> <div class="carousel-inner"> <div class="item active"> <img src="D:\HTML学习\实践的操作\bootstrap网页开发\images\chrome-big.jpg" alt="1 side"> <div class="container"> <div class="carousel-caption"> <h1>Chrome</h1> <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p> <p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser/" target="_blank" rel="external nofollow" role="button" target="_blank">点我下载</a></p> </div> </div> </div> <div class="item"> <img src="D:\HTML学习\实践的操作\bootstrap网页开发\images\firefox-big.jpg" alt="2 side"> <div class="container"> <div class="carousel-caption"> <h1>Firefox</h1> <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p> <p><a class="btn btn-lg btn-primary" href="http://www.firefox.com.cn/download/" target="_blank" rel="external nofollow" target="_blank" role="button">点我下载</a></p> </div> </div> </div> <div class="item"> <img src="D:\HTML学习\实践的操作\bootstrap网页开发\images\safari-big.jpg" alt="3 side"> <div class="container"> <div class="carousel-caption"> <h1>Safari</h1> <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p> <p><a class="btn btn-lg btn-primary" href="http://www.apple.com/cn/safari/" target="_blank" rel="external nofollow" target="_blank" role="button">点我下载</a></p> </div> </div> </div> </div>
<!-- 轮播（Carousel）导航 --> <a href="#myCarousel" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="left carousel-control" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a href="#myCarousel" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="right carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div> </body></html>
先放一张截图
这是一个轮播图···
该轮播图主要是通过carousel这个js插件，这个插件是通过
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
来引入的。
通过data属性来控制轮播carousel的位置。
data-side 接受关键字prve 或 next，用来改变图片相对于当前位置的位置。
data-side-to 来向轮播床底添加一个原始滑动索引，索引从0开始计数。
data-ride="carousel"属性用于标记轮播在页面加载时就开始动画播放。
没什么好写的了···
如果有什么不明白的 可以留言问我，，，我尽量给你解答。
