bootstrap - panel + collapse + accordion + well

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


     panel header
    plain text 
    panel footer

界面外观是这样的：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等等。


     panel header
    plain text 
    panel footer

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

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

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



      header
    
    plain text 
    
        
            Learn More
            Go Back

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

手风琴菜单

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

collapse(折叠）

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


content

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

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

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

可折叠的panel

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

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

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

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

well

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


  large well!


  small well!

它简单到无话可说。