輪播圖：1.建立一個div把輪播圖裝起來，然後class裡面寫.carousel .slide 然後隨便建立一個id #banner；再次添加個屬性data-ride="carousel"<div class="carousel slide" id=" banner"></div>2.建立切換的小圓點用ol>li寫在ol的class使用.carousel-indicators然後有幾個圖片就建立幾個li，並在li中新增data-target屬性，屬性中就填寫剛才在div中設定的id，再次新增data-slide-to="0" class="active"；<ol class="carousel-indicators"><li data-target="#banner" data-slide-to="0" class="active"></li><li data-target="#banner" data-slide-to="1" ></li><li data-target="#banner" data-slide-to="2" ></li></ol>3.建立div，裝入所有輪播的圖片class為.carousel-inner；4.每個圖片都需要用div裝起來class為.item active，img引入圖片，可新增圖片標題與描述，在每個圖片的div內再次建立div裝入對圖片的描述class寫為.carousel-cartion，div裡可寫 h1~6或p等標籤；<div class="carousel-inner"><div class="item active"><img src="./img/c2.jpg"><div class="carousel-caption"><h3>美麗的大海邊</h3><p>拍婚紗照的真不少</p></div></div><div class="item"><img src="./img/c3.jpg"><div class="carousel-caption"><h3>美麗的大海邊</h3><p>拍婚紗照的真不少</p></div></div><div class="item "><img src="./img/c4.jpg"><div class="carousel-caption"><h3>美麗的大海邊</h3><p>拍婚紗照的真不少</p></div></div></div>5.在新增一個左右切換圖片的功能建立a標籤，href屬性寫上總體div的id，class為.left .caroysel-control,data-slide為prev，在a標籤中在建立個span標籤，class為.glyphicon glyphicon-chevron-left，看class內容就可以知道為左方向，右方向只要改成right,data-slide改為next即可；<a href="#banner" class="left carousel-control" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a href="#banner" class="right carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right "></span></a> 一個簡單的輪播圖已經完成，最終程式碼為：

<div class="carousel slide" id="banner" data-ride="carousel" >
        <ol class="carousel-indicators">
            <li data-target='#banner' data-slide-to='0' class="active"></li>
            <li data-target='#banner' data-slide-to='1'></li>
            <li data-target='#banner' data-slide-to='2'></li>
            <li data-target='#banner' data-slide-to='3'></li>
        </ol>
        <div class="carousel-inner" >
            <div class="item active">
                <img src="./img/3.JPG" alt="">
                <div class="carousel-caption">
                    <h3>測試測試測試</h3>
                    <p>再測試再測試</p>
                </div>
            </div>
            <div class="item">
                <img src="./img/4.JPG" alt="">
                <div class="carousel-caption">
                    <h3>測試測試測試</h3>
                    <p>再測試再測試</p>
                </div>
            </div>
            <div class="item">
                <img src="./img/5.JPG" alt="">
                <div class="carousel-caption">
                    <h3>測試測試測試</h3>
                    <p>再測試再測試</p>
                </div>
            </div>
            <div class="item">
                <img src="./img/6.JPG" alt="">
                <div class="carousel-caption">
                    <h3>測試測試測試</h3>
                    <p>再測試再測試</p>
                </div>
            </div>
        </div>
        <a href="#banner" class="left carousel-control" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a href="#banner" class="right carousel-control" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>