最新的Web开发教程
 

Bootstrap Panels


面板

在引导面板是绕其内容的一些填充有边框的盒子:

一个基本的面板

面板是与创建.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>
试一试»

面板组

把多项面板在一起,紧裹<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
试一试»

自测练习用!

练习1» 练习2» 练习3» 练习4» 练习5»