Bootstrap 面板

面板

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>

开始练习