码农教程 - 一技在手,衣食无忧! tools

Bootstrap .panel

❮ 上一节 下一节 ❯

面板

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

基本面板

面板是用以下命令创建的.panel类，面板内的内容有一个.panel-body类：

示例

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

这个.panel-defaultclass 用于设置面板颜色的样式。有关更多上下文类，请参阅本页的最后一个示例。

面板标题

面板标题
面板内容

这个.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>
亲自试一试 »

面板组

要将多个面板组合在一起，请将<div>与类 .panel-group在他们旁边。

这个.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）：

示例

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
亲自试一试 »

通过练习测试一下

练习:

使用以下文字创建一个基本（默认）Bootstrap面板："Hello World"。

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

开始练习

❮ 上一节 下一节 ❯