需求背景：
項目頁面需要手風琴組件，這里簡單總結一下手風琴組件的使用。
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;
}
效果展示：
手風琴效果
