一、摺疊外掛

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseOne">
                點選我進行展開，再次點選我進行摺疊。第 1 部分
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
                cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
                vice lomo.
            </div>
        </div>
    </div>
</div>
 

• data-toggle="collapse" 新增到您想要展開或摺疊的元件的連結上。
• href 或 data-target 屬性新增到父元件，它的值是子元件的 id。
• data-parent 屬性把摺疊面板（accordion）的 id 新增到要展開或摺疊的元件的連結上。當可摺疊專案顯示時，指定父元素下的所有可摺疊的元素將被關閉。

<button type="button" class="btn btn-primary" data-toggle="collapse" 
    data-target="#demo">
    簡單的可摺疊元件
</button>    
<div id="demo" class="collapse in">
    Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
    cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
    vice lomo.
</div>
 

<div id="myCarousel" class="carousel slide">
    <!-- 輪播（Carousel）指標 -->
    <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="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
            <div class="carousel-caption">標題 1</div>
        </div>
        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
            <div class="carousel-caption">標題 2</div>
        </div>
        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
            <div class="carousel-caption">標題 3</div>
        </div>
    </div>
    <!-- 輪播（Carousel）導航 -->
    <a class="carousel-control left" href="#myCarousel" 
        data-slide="prev">‹
    </a>
    <a class="carousel-control right" href="#myCarousel" 
        data-slide="next">›
    </a>
</div>
 

• 屬性 data-slide 接受關鍵字 prev 或 next，用來改變幻燈片相對於當前位置的位置。
• 使用 data-slide-to 來向輪播傳遞一個原始滑動索引，data-slide-to="2" 將把滑塊移動到一個特定的索引，索引從 0 開始計數。
• data-ride="carousel" 屬性用於標記輪播在頁面載入時就開始動畫播放。

$('#identifier').carousel({
	interval: 2000
})

$('#identifier').carousel('cycle')

$('#identifier').carousel('pause')

$('#identifier').carousel(number)

$('#identifier').carousel('prev')

$('#identifier').carousel('next')

$('#identifier').on('slide.bs.carousel', function () {
	// 執行一些動作...
})

$('#identifier').on('slid.bs.carousel', function () {
	// 執行一些動作...
})