BootStrap 折叠框

基本折叠框

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">

Link with href

</a>

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">

Button with data-target

</button>

<div class="collapse" id="collapseExample">

<div class="well">

...

</div>

</div>

复杂折叠框

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

<div class="panel panel-default">

<div class="panel-heading" role="tab" id="headingOne">

<h4 class="panel-title">

<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

Collapsible Group Item #1

</a>

</h4>

</div>

<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

<div class="panel-body">

1

</div>

</div>

</div>

<div class="panel panel-default">

<div class="panel-heading" role="tab" id="headingTwo">

<h4 class="panel-title">

<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">

Collapsible Group Item #2

</a>

</h4>

</div>

<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">

<div class="panel-body">

2

</div>

</div>

</div>

<div class="panel panel-default">

<div class="panel-heading" role="tab" id="headingThree">

<h4 class="panel-title">

<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">

Collapsible Group Item #3

</a>

</h4>

</div>

<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">

<div class="panel-body">

3

</div>

</div>

</div>

</div>