bootstrap - panel + collapse + accordion + well - 快车库

有时候，你想要把内容放到一个看起来还漂亮的盒子里面，那么就可以考虑panel。panel就是一个可以选择不同的边线样式、还可以有header和footer的盒子。这样一个有头有脚的组件，代码看起来是这样的：

<div class="panel panel-default">
    <div class="panel-heading"> panel header</div>
    <div class="panel-body">plain text</div> 
    <div class="panel-footer ">panel footer</div>
</div>

界面外观是这样的：https://jsfiddle.net/1000copy...

在class内的panel指明这个标签块内是一个panel（听起来有点别扭：）。另外一个值panel-default指明panel的一种样式。虽然panel-default暗示这是一个default（默认）的类型值，但是不写和写了的效果是不同的。你不妨试试，了解它们两者的视觉差异。

第二行的panel-heading指明这是panel的header。这个header是可选的，不写就没有header。类似的panel-footer也是一样的。

当你看到panel-default，可能会想起btn-default、btn-primary、btn-info等等？是的，对于panel而言也有类似的panel-primary、panel-info等等。

<div class="panel   panel-danger">
    <div class="panel-heading"> panel header</div>
    <div class="panel-body">plain text</div> 
    <div class="panel-footer ">panel footer</div>
</div>

这就是为什么bootstrap声称自己是具备设计一致性的原因了吧。这样的一致性，确实可以减轻学习的负担，让开发者更加容易举一反三。

可以使用panel做一个模态对话框

要是在footer上放置按钮，并靠右排放：

<div class="panel panel-default">
<div class="panel-heading">
      header
    </div>
    <div class="panel-body">plain text</div> 
    <div class="panel-footer clearfix">
        <div class="pull-right">
            <a href="#" class="btn btn-primary">Learn More</a>
            <a href="#" class="btn btn-default">Go Back</a>
        </div>
    </div>
</div>

看起来的外观是：https://jsfiddle.net/1000copy...

手风琴菜单

可以把多个panel组合起来，并且通过bootstrap本身的collapse插件构建一个很有吸引力的，类似桌面软件Microsoft Outlook的菜单。习惯上它被称为accordion

collapse(折叠）

bootstrap提供一个插件，可以让开发者不写一行JavaScript代码而可以展开和折叠内容：

<input type="button" class="btn" data-toggle="collapse" data-target="#toggleDemo" value="Toggle Button">
<div id="toggleDemo" class="collapse in"><p>content</p></div>

点击按钮Toggle Button，可以对div#toggleDemo做展开和折叠操作。还记得data-前缀的属性吗？它们由bootstrap的JavaScript代码引用，分别声明如下：

data-toggle的做一个切换操作，操作为"collapse"。除了collapse，还可以做popover、modal、dropdown、tab等切换
data-target声明操作的对象是"#toggleDemo"

你可以在被折叠的目标上加入class的值in，标识默认为打开的。如果不加，那么默认为关闭的（被折叠的）。

可折叠的panel

利用折叠插件，就可以把一个有header的panel变成可折叠的panel：

     <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-target="#c1">h1</a>
            </h4>
        </div>
        <div id="c1" class="in">
            <div class="panel-body">
                <p>content1</p>
            </div>
        </div>
    </div>

点击header内的链接多次，可以看到折叠和展开的切换效果。

一个accordion菜单，就是多个可折叠panel组合得到的效果。如下代码展示了两个panel的情况：

<div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-target="#c1">h1</a>
            </h4>
        </div>
        <div id="c1" class="panel-collapse collapse in">
            <div class="panel-body">
                <p>content1</p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-target="#c2">h1</a>
            </h4>
        </div>
        <div id="c2" class="panel-collapse collapse in">
            <div class="panel-body">
                <p>content1</p>
            </div>
        </div>
    </div>
</div>

尽管有点粗陋，但是它是可以工作的。

well

还有一个叫做well的组件。它也可以像panel一样放置内容，它看起来是内凹的。需要一个看起来和其他内容不太相同的，类似插页和插图的盒子，可以使用它。和panel比起来简单而粗陋的，它没有header，footer，也不能设置-info、-warning等颜色差别，但是可以调节大小。

<div class="well well-lg">
  large well!
</div>
<div class="well well-sm ">
  small well!
</div>

它简单到无话可说。