面板虽然不是必须的，但是某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况，可以试试面板组件。创建一个基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可，如下面的实例所示：
基本实例
默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。
实例：
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div></div>
带标题的面版
通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的 <h1>-<h6> 标签，添加一个预定义样式的标题。
实例：
为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。
Panel title
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content</div></div><div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div><div class="panel-body">
Panel content</div></div>
h4 class="text-primary"> 带脚注的面版<
把按钮或次要的文本放入 .panel-footer 容器内。注意面版的脚注不会从情境效果中继承颜色，因为他们并不是主要内容。
实例：
<div class="panel panel-default">
<div class="panel-body">
Panel content</div><div class="panel-footer">Panel footer</div>
</div>
情境效果
像其他组件一样，可以简单地通过加入有情境效果的状态类，给特定的内容使用更针对特定情境的面版。
实例：
面板标题
面板标题
面板标题
面板标题
面板标题
<div class="panel panel-primary">Panel content</div>
<div class="panel panel-success">Panel content</div>
<div class="panel panel-info">Panel content</div>
<div class="panel panel-warning">Panel content</div>
<div class="panel panel-danger">Panel content</div>
带表格的面版
为面板中不需要边框的表格添加 .table 类，是整个面板看上去更像是一个整体设计。如果是带有 .panel-body 的面板，我们为表格的上方添加一个边框，看上去有分隔效果。
实例：
面板标题
| 产品 | 价格 |
|---|---|
| 产品 A | 200 |
| 产品 B | 400 |
| 产品 | 价格 |
|---|---|
| 产品 A | 200 |
| 产品 B | 400 |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div><!-- Table -->
<table class="table">
...
</table></div>
如果没有 .panel-body ，面版标题会和表格连接起来，没有空隙。
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table></div>
带列表组的面版
可以简单地在任何面版中加入具有最大宽度的列表组。
实例：
Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div><!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul></div>