面板是我们在网页中常见的一种结构，上面是头部，下面是主体部分进行详细描述，也可在其最后添加上底部内容，折叠面板是将多个面板放在一个面板组中，但页面中只允许打开一个面板的详细内容，其他都折叠起来，以下是折叠面板的基本代码和实现步骤：

<!--第三步：声明一个面板组-->
<div id="mypanelgroup" class="panel-group">
  <!--第一步：写几个面板-->
  <div class="panel panel-default">
    <div class="panel-heading">
    <!--第四步：让面板知道是折叠面板data-toggle="collapse"-->
    <!--第五步：让面板知道是折叠面板隶属哪个分组data-parent="#面板分组的id名"-->
      <h3 class="panel-title">
        <a href="#panel1" data-toggle="collapse" data-parent="#mypanelgroup">这是第1个面板</a>
      </h3>
      <!--第二步：让点击的标题与面板内容关联-->
    </div>
    <!--第六步：声明折叠部分panel-collapse，折叠collapse、默认打开in-->
    <div id="panel1" class="panel-collapse collapse in">						
      <div class="panel-body" >
      <!--与普通面板不同的是主体内容部分也用div包裹起来-->
      这是第1个面板的内容
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">
        <a href="#panel2" data-toggle="collapse" data-parent="#mypanelgroup">这是第2个面板</a>
      </h3>
    </div>
    <div id="panel2" class="panel-collapse collapse">
      <div class="panel-body">
      这是第2个面板的内容
      </div>
    </div>
  </div>
</div><!--end panel-group-->