Bootstrap中的面板(panel)

背景

写自动折叠的面板时遇到点问题，虽与面板本身无关，可看到他有序的组织，我想bootstrap肯定有完整的面板结构。果不其然。

基本结构

<div class="panel-group">
    <div class="panel"> <!--修饰类：panel-default/panel-success/panel-danger/panel-warning/panel-primary/panel-info-->
        <div class="panel-heading"></div><!--其中的标题用<div clas="panel-title"></div>-->
        <div class="panel-body"></div>
        <div class="panel-footer"></div>
    </div>
    ...
    <div class="panel">
        ...
    </div>
</div>

例子(可折叠的面板组)

<div class="panel-group" id="mypanel">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <div class="panel-title"><a data-toggle="collapse" data-parent="mypanel" href="#item1">item_1</a></div>
        </div>
        <div id="item1" class="panel-collapse collapse in">
            <div class="panel-body">
                hello_1
            </div>
        </div>
    </div>

    <div class="panel panel-primary">
        <div class="panel-heading">
            <div class="panel-title"><a data-toggle="collapse" data-parent="mypanel" href="#item2">item_2</a></div>
        </div>
        <div id="item2" class="panel-collapse collapse">
            <div class="panel-body">
                hello_2
            </div>
        </div>
    </div>
</div>

对于可折叠的面板来说，重要的属性有3个：

data-toggle="collapse"：这个不用说了，点一下就折叠/展开

data-parent="#group_id"：group_id为这组面板的父id，这个主要是为了互斥的，点一个展开其他的折叠

href="#panel_body_id"：panel_body_id为折叠/展开的面板的id

接受响应折叠/展开的面板需要放在 <class = "panel-collapse collapse (in)">的容器内，.in为默认不折叠，主要是为抵消.collapse的折叠效果的