bootstrap之折叠

作者原创，未经允许，拒绝转载。

 

<!-- div的class="panel-group"代表这是一个折叠组 对于data-parent="#accordion"的都算是一个面板组 -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <!-- 第一部分 -->
  <div class="panel panel-default">
    <!-- 面板标题-->
    <div class="panel-heading" role="tab" id="headingOne">
      <!-- h4标题 -->
      <h4 class="panel-title">
        <!-- a 链接有一个 事件，collapse 折叠，对 href="#collapseOne"（id=collapseOne） 的对象造成影响 -->
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          第一个部分
        </a>
      </h4>
    </div>
    <!-- 折叠的部分 -->
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <!-- 折叠的内容 -->
      <div class="panel-body">
        这是面板一的内容
      </div>
    </div>
  </div>
  <!-- ...............第二个面板.................. -->
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">第二个部分</a>
      </h4>

    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        面板二的内容
      </div>
    </div>
  </div>
</div>

 

class="panel-group"：面板组
：内容

博客已搬家 技术寇的分享