輪番
Bootstrap 的輪番插件（carousel.js）是一個靈活的、響應式的、無縫循環播放的幻燈片切換插件，它的內容可以是圖片、視頻、或者其他任何內容。
使用方法
Bootstrap中的輪番由一個 class="carousel" 的容器定義，其中包含輪番指示器、輪番內容、輪番的控制按鈕。爲了確保在播放時，能夠對控制按鈕和輪番指示器進行正常定位，需要爲容器定義一個 id。如：
<div id="myCarousel" class="carousel">...</div>
1）輪番指示器
輪番指示器是一個 class="carousel-indicators" 的有序列表，用來指示輪番的播放狀態，對用戶表現爲一系列的小圓圈，實心圓表示當前處於活動狀態的輪番條目。
輪番指示器中，子元素 <li> 的個數必須與輪番內容中的元素個數相等。子元素 <li> 的 data-target 屬性值指示目標對象，必須設置爲輪番容器的 id 值；data-slide-to 屬性指示點擊小圓圈時所要播放的輪番條目的索引值（索引從 0 開始）。還可以爲默認處於活動狀態的輪番條目添加 .active 類。默認是第一個條目處於活動狀態。如：
<ol class="carousel-indicators"><li 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" class="active"></li></ol>
2）輪番內容
輪番內容是一個輪番條目的列表，整個列表包含在一個 class="carousel-inner" 的容器中，列表中可以包含多個輪番條目，每個輪番條目包含在一個 class="item" 的容器中。還可以爲默認處於活動狀態的輪番條目添加 .active 類。默認是第一個條目處於活動狀態。如果添加 .active 類，並確保它與列表指示器中定義的默認狀態保持一致。
最簡單的輪番內容只包含圖片就可以了。如：
<div class="carousel-inner"><div class="item active"><img src="slide-01.jpg" /></div></div>
稍微複雜的輪番，可以通過一個 class="carousel-caption" 的容器來添加標題和說明。如：
<div class="carousel-inner"><div class="item active"><img src="slide-01.jpg" /><div class="carousel-caption"><h4>Second Thumbnail label</h4><p>Cras justo odio, dapibus ...</p></div></div></div>
3）輪番的控制按鈕
輪番的控制按鈕，用來人工控制輪番的播放，它包含兩個按鈕，一個控制向前播放，一個控制向後播放。通過 .carousel-control 定義按鈕的樣式，.left 和 .right 定義按鈕的方向。href 屬性定義輪番包含框的 id。data-slide 屬性定義播放順序，取值 "prev" 表示播放上一個條目，取值 "next" 表示播放下一個條目。
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
至此，一個輪番就定義好了。並且，無需編寫任何JavaScript代碼就可以自動播放。完整代碼如下：
<div id="myCarousel" class="carousel" style="margin-bottom:20px"><!-- Carousel indicators --><ol class="carousel-indicators"><li 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></ol><!-- Carousel items --><div class="carousel-inner"><div class="item"><img src="slide-01.jpg" /></div><div class="item"><img src="slide-01.jpg" /></div><div class="item"><img src="slide-01.jpg" /></div></div><!-- Carousel Controls --><a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a><a class="carousel-control right" href="#myCarousel" data-slide="next">›</a></div>
在輪番底部中間位置的小圓圈是輪番指示器，白色背景的圓圈指示當前活動的條目。用戶可以點擊任意的小圓圈，讓它成爲當前活動的條目。效果如圖 4‑20所示：
圖4-20 輪番
關於作者
歪脖先生，十五年以上軟件開發經驗，酷愛Web開發，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML寶典》、《揭祕CSS》、《Less簡明教程》、《JSON教程》、《Bootstrap2用戶指南》、《Bootstrap3實用教程》，並全部在 GitHub 上開源。