Bootstrap 面板
面板
Bootstrap 中的面板是一个带边框的盒子，内容在其中有填充。
一个基础面板
面板使用 .panel 类创建，面板内的内容使用 .panel-body 类。
.panel-default 类用于设置面板的颜色。有关更多上下文类，请参阅本页的最后一个示例。
面板标题
面板标题
面板内容
.panel-heading 类为面板添加标题。
示例
<div class="panel panel-default">
<div class="panel-heading">面板标题</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>
自己动手试一试 »
面板组
要将多个面板分组在一起，请将 .panel-group 类包裹的 <div> 放在它们周围。
.panel-group 类会清除每个面板的底部边距。
示例
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">面板内容</div>
</div>
<div class="panel panel-default">
<div class="panel-body">面板内容</div>
</div>
</div>
自己动手试一试 »
带有上下文类的面板
要为面板着色，请使用上下文类（.panel-default、.panel-primary、.panel-success、.panel-info、.panel-warning 或 .panel-danger）。
示例
带有 panel-default 类的面板
面板内容
带有 panel-primary 类的面板
面板内容
带有 panel-success 类的面板
面板内容
带有 panel-info 类的面板
面板内容
带有 panel-warning 类的面板
面板内容
带有 panel-danger 类的面板
面板内容
