BS 面板

---

面板

Bootstrap 的面板是一个有边框的框，其内容周围有一些填充:

一个基础面板

面板是用 .panel 类创建的，面板内的内容有 .panel-body 类创建:

实例

<div class="panel panel-default">
  <div class="panel-body">A Basic Panel</div>
</div>
亲自试一试 »

.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):

实例

具有默认类的面板 面板内容 具有主要类的面板 面板内容 具有成功类的面板 面板内容 具有信息类的面板 面板内容 具有警告类的面板 面板内容 具有危险类的面板 面板内容 亲自试一试 »

---

学习训练

练习题:

创建一个基本（默认） Bootstrap 面板，上面写着: "Hello World".

<div class="">
  <div class="">Hello World</div>
</div>

提交答案 »

开始练习

---