多box相比box来说使用的场景并不多
<div class="box box-solid">
<div class="box-header with-border">
<h3 class="box-title">Collapsible Accordion</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="box-group" id="accordion">
<!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
<div class="panel box box-primary">
<div class="box-header with-border">
<h4 class="box-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" class="collapsed">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="box-body">
111
</div>
</div>
</div>
<div class="panel box box-danger">
<div class="box-header with-border">
<h4 class="box-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed" aria-expanded="false">
Collapsible Group Danger
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="box-body">
222
</div>
</div>
</div>
<div class="panel box box-success">
<div class="box-header with-border">
<h4 class="box-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="" aria-expanded="true">
Collapsible Group Success
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse in" aria-expanded="true">
<div class="box-body">
33
</div>
</div>
</div>
</div>
</div>
<!-- /.box-body -->
</div>