我的例子用的是本地圖檔 ，如果你們想試一試就換個圖檔試試。。。
代碼 如下：
<!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"屬性用于标記輪播在頁面加載時就開始動畫播放。
沒什麼好寫的了···
如果有什麼不明白的 可以留言問我，，，我盡量給你解答。
