手風琴最關鍵的部分，就是每個標題對應有一個內容，在Bootstrap框架中將這兩個部分組合起來稱為一個panel頁板，如右邊效果所示，他就有三個panel面板，將這三個面板組合在一起，就是一個面板組合 panel-group，也就是手風琴的結構。如：
<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">標題一</a></h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body">標題一對應的內容</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">標題二</a></h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body">標題二對應的內容</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">標題三</a></h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body">標題三對應的內容</div> </div> </div> </div>
簡單點就是一個觸發器和一個折疊區：
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">觸發器</button> <div id="demo" class="collapse in">折疊區</div>
我來試試：觀察右側代碼中的panel頁板區和面板組合（panel-group）區
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報
