需求背景：
项目页面需要手风琴组件，这里简单总结一下手风琴组件的使用。
html页面开发：
bootstrap3中可以使用panel加collapse加nav组件实现手风琴。
<ul class="nav nav-pills nav-stacked">
<li><a href="#">NAT网关</a></li>
<li><a href="#">ROUTER网关</a></li>
</ul>
nav组件实现了手风琴的基本标签页，nav-pills表示使用胶囊式标签页，nav-stacked表示垂直方向堆叠排列。
<div id="collapseTree" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">NAT网关</a></li>
<li><a href="#">ROUTER网关</a></li>
</ul>
</div>
</div>
panel-body把导航标签封装成面板body，再在外面封装一层div让该组件支持折叠：panel-collapse和collapse属性实现了这一功能，in表示该div初始化时时显示的。
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseTree">
<a class="accordion-toggle" >网关类型</a>
</div>
panel-heading表示该组件是面板头，表示使用折叠（collapse）的方式实现数据开关，href指向的是collapseTree组件。
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseTree">
<a class="accordion-toggle" >网关类型</a>
</div>
<div id="collapseTree" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">NAT网关</a></li>
<li><a href="#">ROUTER网关</a></li>
</ul>
</div>
</div>
</div>
</div>
把panel-heading和collapseTree两个div封装成panel，然后再把这个panel封装成panel-group，整个手风琴就做好了。
由于手风琴都在页面的左侧，宽度比较窄，所以可以设置一下css属性：
.container .panel-group{
margin-bottom: 20px;
width: 200px;
}
效果展示：
手风琴效果
