手風(fēng)琴最關(guān)鍵的部分,就是每個標(biāo)題對應(yīng)有一個內(nèi)容,在Bootstrap框架中將這兩個部分組合起來稱為一個panel頁板,如右邊效果所示,他就有三個panel面板,將這三個面板組合在一起,就是一個面板組合 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)題一對應(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)題二對應(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)題三對應(yīng)的內(nèi)容</div> </div> </div> </div>
簡單點就是一個觸發(fā)器和一個折疊區(qū):
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">觸發(fā)器</button> <div id="demo" class="collapse in">折疊區(qū)</div>
我來試試:觀察右側(cè)代碼中的panel頁板區(qū)和面板組合(panel-group)區(qū)
請驗證,完成請求
由于請求次數(shù)過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報