本章将讲Bootstrap面板,下面为大家讲解面板的类名，及面板布局：

.panel ——定义面板结构       .panel-default—— 面板默认样式     .panel-heading—— 面板的头部   

.panel-title—— 面板的标题       .panel-body—— 面板主体            .panel-footer—— 面板底部

二、通过下列类名调节面板颜色：

.panel-primary ——主色调     panel-success ——成功色      panel-info ——消息

panel-warning ——警告        panel-danger ——危险

注意：面板的每一个部分都不是必须的。特别是.panel-footer

<div class="panel panel-default">
 <div class="panel-heading">
   <h3 class="panel-title">面板的标题</h3>
 </div>
 <div class="panel-body">
    面板的内容
 </div>
 <div class="panel-footer">面板底部</div>
</div>

多个面板中，只允许展开一个面板。方便用户聚焦某一个操作。

基本代码如下：

标题和折叠面板通过锚点关联起来

.panel-group—— 面板组      data-toggle="collapse" ——动作为折叠      data-parent="#accord" ——指定同一个面板组

.panel-collapse ——可折叠的面板       .collapse ——折叠          .in ——展开面板

<div class="panel-group" id="accord">
  <div class="panel panel-default">
    <div class="panel-heading">
     <h3 class="panel-title">
      <a href="#accord-1" data-toggle="collapse" data-parent="#accord" >第一个面板</a>
     </h3>
    </div>
    <div id="accord-1" class="panel-collapse collapse in">
     <div class="panel-body">
       第一个面板的内容
     </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
     <h3 class="panel-title">
      <a href="#accord-2" data-toggle="collapse" data-parent="#accord" >第二个面板</a>
     </h3>
    </div>
    <div id="accord-2" class="panel-collapse collapse">
     <div class="panel-body">
       第二个面板的内容
     </div>
    </div>
  </div>
</div>