使用Bootstrap 3開發響應式網站實踐02,輪播

本篇體驗圖片輪播。html部分爲：

        <div class="carousel slide" id="myCarousel"  >
            <!--Indicators-->
            <ol class="carousel-indicators">
                <li class="active" data-slide-to="0" data-target="#myCarousel"></li>
                <li data-slide-to="1" data-target="#myCarousel"></li>
                <li data-slide-to="2" data-target="#myCarousel"></li>
            </ol>
            <!--wrapper for slides-->
            <div class="carousel-inner">
                <div class="item active" id="slide1">
                    <img src="images/25.jpg"/>
                    <div class="carousel-caption">
                        <h4>馬塔破門曼聯平</h4>
                        <p>2014/15賽季英格蘭足球超級聯賽第2輪一場焦點戰在光明球場展開角逐</p>
                    </div>
                </div>
                
                <div class="item" id="slide2">
                    <img src="images/26.jpg"/>
                    <div class="carousel-caption">
                        <h4>魯尼范佩西召喚天使</h4>
                        <p>客場被桑德蘭1-1逼平，曼聯雖然拿到一分，但顯然紅魔從上到下沒人會滿意2戰1分的慘淡結果。</p>
                    </div>
                </div>
                
                <div class="item" id="slide3">
                    <img src="images/27.jpg"/>
                    <div class="carousel-caption">
                        <h4>迪馬利亞今日飛抵曼聯體檢</h4>
                        <p>曼聯引進迪馬利亞的交易已經只差官方宣佈,這無疑是替紅魔官方宣佈了這筆交易。</p>
                    </div>
                </div>
            </div>
            <!--controller-->
            <a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a>
            <a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>
        </div><!--圖片展現區域結束-->

○ 輪播全部內容被包裹在帶有class="carousel slide"的div中  
○ 輪播分3部分：圓點指示，用ol實現；圖片、標題、描述用div實現；左右2個箭頭用a實現

  

參考資料：
Code a Responsive Website with Bootstrap 3 --by Brad Hussey
http://getbootstrap.com/
http://bootswatch.com/
http://www.tutorialspoint.com/
http://www.placehold.it/

 

「使用Bootstrap 3開發響應式網站實踐」系列包括：

使用Bootstrap 3開發響應式網站實踐01,前期準備、導航區域等

使用Bootstrap 3開發響應式網站實踐02,輪播

使用Bootstrap 3開發響應式網站實踐03,輪播下方的內容排版

使用Bootstrap 3開發響應式網站實踐04,使用Panels展現內容

使用Bootstrap 3開發響應式網站實踐05,使用Tab、Modal、Form展現內容,使用Popover、Tooltip展現提示信息

使用Bootstrap 3開發響應式網站實踐06,使用ListGroup、Thumbnails展現內容

使用Bootstrap 3開發響應式網站實踐07,頁腳