有时候，你想要把内容放到一个看起来还漂亮的盒子里面，那么就可以考虑panel。panel就是一个可以选择不同的边线样式、还可以有header和footer的盒子。这样一个有头有脚的组件，代码看起来是这样的：
panel headerplain text
界面外观是这样的：
在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 headerplain text
这就是为什么bootstrap声称自己是具备设计一致性的原因了吧。这样的一致性，确实可以减轻学习的负担，让开发者更加容易举一反三。
可以使用panel做一个模态对话框
要是在footer上放置按钮，并靠右排放：
headerplain text
看起来的外观是：
手风琴菜单
可以把多个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：
content1
点击header内的链接多次，可以看到折叠和展开的切换效果。
一个accordion菜单，就是多个可折叠panel组合得到的效果。如下代码展示了两个panel的情况：
尽管有点粗陋，但是它是可以工作的。
well
还有一个叫做well的组件。它也可以像panel一样放置内容，它看起来是内凹的。需要一个看起来和其他内容不太相同的，类似插页和插图的盒子，可以使用它。和panel比起来简单而粗陋的，它没有header，footer，也不能设置-info、-warning等颜色差别，但是可以调节大小。
large well!small well!
它简单到无话可说。