Bootstrap-Panel

Panel

HTML

<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<a id = "aa" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          服务器-CPU
        </a>
 <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
         服务器-内存
        </a>
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          服务器-磁盘
        </a>


<div class="panel-group" id="accordion" role="tablist">
  <div id = "bluePanel" class="panel  panel-primary">
    
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel">
      <div class="panel-body" id="panelCPU">
      <a>blue</a>
      </div>
    </div>
  </div>
  <div class="panel panel-default" color=#d9534f>
    
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body" id="panelMemory">
      <a>red</a>
      </div>
    </div>
  </div>
  <div class="panel panel-warning">
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body" id="panelDisk"> 
      <a>yellow</a>
      </div>
    </div>
  </div>
</div>