虽然不总是必须，但是某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况，可以试试面板组件。

基本实例

默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。

<div class="panel panel-default"> <div class="panel-body"> 这是一个基本的面板 </div> </div>

带标题的面版

通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的 <h1>-<h6> 标签，添加一个预定义样式的标题。不过，<h1>-<h6> 标签的字体大小将被 .panel-heading 的样式所覆盖。

为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。

<div class="panel panel-default"> <div class="panel-heading">面板标题</div> <div class="panel-body"> 面板内容 </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">面板标题</h3> </div> <div class="panel-body"> 面板内容 </div> </div>

带脚注的面版

把按钮或次要的文本放入 .panel-footer 容器内。注意面版的脚注不会从情境效果中继承颜色，因为他们并不是主要内容。

<div class="panel panel-default"> <div class="panel-body"> 面板内容 </div> <div class="panel-footer">面板脚注</div> </div>

情境效果

像其他组件一样，可以简单地通过加入有情境效果的状态类，给特定的内容使用更针对特定情境的面版。

<div class="panel panel-primary">...</div> <div class="panel panel-success">...</div> <div class="panel panel-info">...</div> <div class="panel panel-warning">...</div> <div class="panel panel-danger">...</div>

带表格的面版

为面板中不需要边框的表格添加 .table 类，是整个面板看上去更像是一个整体设计。如果是带有 .panel-body 的面板，我们为表格的上方添加一个边框，看上去有分隔效果。

<div class="panel panel-default"> <div class="panel-heading">面板标题</div> <div class="panel-body"> <p>...</p> </div> <table class="table"> ... </table> </div>

如果没有 .panel-body ，面版标题会和表格连接起来，没有空隙。

<div class="panel panel-default"> <div class="panel-heading">面板标题</div> <table class="table"> ... </table> </div>

带列表组的面版

<div class="panel panel-default"> <div class="panel-heading">面板标题</div> <div class="panel-body"> <p>...</p> </div> <ul class="list-group"> <li class="list-group-item">免费注册</li> <li class="list-group-item">分享链接</li> <li class="list-group-item">会员中心</li> <li class="list-group-item">资本资料</li> <li class="list-group-item">我的相册</li> </ul> </div>