W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

Bootstrap 面板



虽然不总是必须,但是某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况,可以试试面板组件。


基本实例

A Basic Panel

创建一个基本的面板,只需要向 <div> 元素添加 .panel .panel-default 类并且在内部的元素上添加 .panel-body 类即可,如下面的实例所示:

Example

<div class="panel panel-default">
  <div class="panel-body">A Basic Panel</div>
</div>
尝试一下 »
Note .panel-default 类(默认类)用于样式面板的颜色。有关更多类,请参见本页上的最后一个示例。

带标题的面版

Panel Heading
Panel Content

通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的 <h1>-<h6> 标签,添加一个预定义样式的标题。不过,<h1>-<h6> 标签的字体大小将被 .panel-heading 的样式所覆盖。

Example

<div class="panel panel-default">
  <div class="panel-heading">Panel Heading</div>
  <div class="panel-body">Panel Content</div>
</div>
尝试一下 »
Note 为了给链接设置合适的颜色,务必将链接放到带有 .panel-title 类的标题标签内。

带脚注的面版

Panel Content

把按钮或次要的文本放入 .panel-footer 容器内便可构成带脚注的面板。注意面版的脚注不会从情境效果中继承颜色,因为他们并不是主要内容。

Example

<div class="panel panel-default">
  <div class="panel-body">Panel Content</div>
  <div class="panel-footer">Panel Footer</div>
</div>
尝试一下 »

面板组

将多面板放到一起并在外部元素 <div> 上添加 <div> 类即可构成面板组。

The .panel-group class clears the bottom-margin of each panel:

Example

<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 ,来设置带语境色彩的面板,实例如下:

Example

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
尝试一下 »