Bootstrap 面板
面板
Bootstrap 的面板是一个有边框的框，其内容周围有一些填充:
一个基础面板
面板是用 .panel 类创建的，面板内的内容有 .panel-body 类创建:
.panel-default 类用于设计面板的颜色。有关更多上下文类，请参见本页最后一个示例。
面板标题
面板标题
面板内容
.panel-heading 类在面板中添加标题:
实例
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
</div>
亲自试一试 »
面板脚注
面板内容
.panel-footer 类向面板添加页脚:
实例
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
亲自试一试 »
面板组
要将多个面板组合在一起，请在其周围包裹一个带有
.panel-group 类的 <div>。
.panel-group 类清除每个面板的底部边距:
实例
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
</div>
</div>
亲自试一试 »
带有上下文类的面板
要给面板设置颜色，请使用上下文类 (.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, 或 .panel-danger):
