【angularjs】angularjs+bootstrap手风琴的使用

需求背景：

项目页面需要手风琴组件，这里简单总结一下手风琴组件的使用。

html页面开发：

bootstrap3中可以使用panel加collapse加nav组件实现手风琴。

        

          
NAT网关
          
ROUTER网关
        

nav组件实现了手风琴的基本标签页，nav-pills表示使用胶囊式标签页，nav-stacked表示垂直方向堆叠排列。

    

      

        

          
NAT网关
          
ROUTER网关
        
      
    

panel-body把导航标签封装成面板body，再在外面封装一层div让该组件支持折叠：panel-collapse和collapse属性实现了这一功能，in表示该div初始化时时显示的。

    

      网关类型
    

panel-heading表示该组件是面板头，表示使用折叠（collapse）的方式实现数据开关，href指向的是collapseTree组件。

  

    

      网关类型
    
    

      

        

          
NAT网关
          
ROUTER网关
        
      
    
  

把panel-heading和collapseTree两个div封装成panel，然后再把这个panel封装成panel-group，整个手风琴就做好了。

由于手风琴都在页面的左侧，宽度比较窄，所以可以设置一下css属性：

.container .panel-group{
  margin-bottom: 20px;
  width: 200px;
}

效果展示：

手风琴效果

---

参考资料：

• Bootstrap3手风琴
• bootstrap3 手风琴