Bootstrap 面板（Panels）
panel
Bootstrap 的面板（Panels）是一个有边框的，其内容周围有一些填充:
一个默认面板
面板是用 .panel 样式创建的，其内容具有 .panel-body 样式:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>默认面板</h2><div class="panel panel-default"><div class="panel-body">一个默认面板</div></div></div></body></html>
.panel-default 类用于设置面板颜色的样式。有关更多上下文类，请参见本页最后一个实例。
panel 标题
.panel-heading 样式可以对面板添加标题:
Panel 标题
Panel 内容
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>Panel 标题</h2><div class="panel panel-default"><div class="panel-heading">Panel 标题</div><div class="panel-body">Panel 内容</div></div></div></body></html>
Panel 页脚
.panel-footer 样式可以对面板添加页脚:
Panel 内容
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>Panel 页脚</h2><div class="panel panel-default"><div class="panel-heading">Panel 标题</div><div class="panel-body">Panel 内容</div><div class="panel-footer">Panel 页脚</div></div></div></body></html>
Panel 组
要将多个面板组合在一起，请用 <div> 与 .panel-group 样式类一起将他们包裹起来。
.panel-group 类可以清除每个面板的底部边距:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>Panel 组</h2><p>panel-group 类可以清除面板的底部边距. 可以删除这个类看看会有什么效果</p><div class="panel-group"><div class="panel panel-default"><div class="panel-heading">Panel 标题</div><div class="panel-body">Panel 内容</div></div><div class="panel panel-default"><div class="panel-heading">Panel 标题</div><div class="panel-body">Panel 内容</div></div><div class="panel panel-default"><div class="panel-heading">Panel 标题</div><div class="panel-body">Panel 内容</div></div></div></div></body></html>
Panels 与上下文类
要给面板添加颜色可以使用上下文类 (.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, 或 .panel-danger):
Panel with panel-default class
Panel Content
Panel with panel-primary class
Panel Content
Panel with panel-success class
Panel Content
Panel with panel-info class
Panel Content
Panel with panel-warning class
Panel Content
Panel with panel-danger class
Panel Content