手風(fēng)琴最關(guān)鍵的部分，就是每個(gè)標(biāo)題對(duì)應(yīng)有一個(gè)內(nèi)容，在Bootstrap框架中將這兩個(gè)部分組合起來(lái)稱(chēng)為一個(gè)panel頁(yè)板，如右邊效果所示，他就有三個(gè)panel面板，將這三個(gè)面板組合在一起，就是一個(gè)面板組合 panel-group，也就是手風(fēng)琴的結(jié)構(gòu)。如：

<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">標(biāo)題一</a></h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">標(biāo)題一對(duì)應(yīng)的內(nèi)容</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">標(biāo)題二</a></h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">標(biāo)題二對(duì)應(yīng)的內(nèi)容</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">標(biāo)題三</a></h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">標(biāo)題三對(duì)應(yīng)的內(nèi)容</div>
        </div>
    </div>
</div>

簡(jiǎn)單點(diǎn)就是一個(gè)觸發(fā)器和一個(gè)折疊區(qū)：

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">觸發(fā)器</button>
<div id="demo" class="collapse in">折疊區(qū)</div>