Bootstrap3 面板 .panel 容器

面板

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

创建面板

Bootstrap的面板组件是内容的容器，它由页眉、主体、页脚三部分组成。面板组件由.panel容器定义，页眉、主体、页脚分别由.panel-title、.panel-body、.panel-footer的容器定义。

1、基本面板

由于面板组件的页眉和页脚是可选的，因此基本的面板只包含主体，它只是一个带有边框的文本框。如：

1. <div class="panel panel-default">
2.   <div class="panel-body">
3.     Basic panel example
4.   </div>
5. </div>

效果如图 3‑94所示：

图3-94 基本面板

2、带标题的面板

通过.panel-heading，可以很简单地为面板加入一个标题容器。如：

1. <div class="panel panel-default">
2.   <div class="panel-heading">Panel heading without title</div>
3.   <div class="panel-body">
4.     Panel content
5.   </div>
6. </div>

效果如图 3‑95所示：

图3-95 带标题的面板

你也可以将标题的内容放在<h1>-<h6>标签中，不过这是可选的。使用<h1>-<h6>标签时，如果要为它们提供预定义的样式，就要为它们设置.panel-title类。不过，<h1>-<h6>标签的字体大小将被.panel-title的样式所覆盖。如：

1. <div class="panel panel-default">
2.   <div class="panel-heading">
3.     <h3 class="panel-title">Panel title</h3>
4.   </div>
5.   <div class="panel-body">
6.     Panel content
7.   </div>
8. </div>

效果如图 3‑96所示：

图3-96 带标题的面板

注意：如果标题中包含链接，为了给链接设置合适的颜色，务必将链接放到带有.panel-title类的标题标签中。

3、带页脚的面板

通过.panel-footer，来为面板加入一个页脚容器。页脚一般用来放置按钮或次要文本。不过，页脚不会从情境中继承颜色，因为它们并不是主要内容。如：

1. <div class="panel panel-default">
2.   <div class="panel-body">
3.     Panel content
4.   </div>
5.   <div class="panel-footer">Panel footer</div>
6. </div>

效果如图 3‑97所示：

图3-97 带页脚的面板

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。