Bootstrap 面板

一、基础面板

在div上应用panel样式，产生一个具有边框的文本框效果。示例代码：

<div class="panel panel-default">
<div class="panel-heading">面板header</div>
<div class="panel-body">这里是面板内容</div>
<div class="panel-footer">面板footer</div>
</div>

效果：



注意，面板的header和footer是可选的，pannel样式不控制主题颜色，pannel-default才是控制颜色的主题，pannel-body样式，专门用于存放文本内容。

二、多彩面板

panel-primary（重点蓝）、panel-success（成功绿）、panel-warning（警告黄）、panel-danger（危险红）、panel-info（信息蓝）。实例代码：

<div class="panel panel-default">
<div class="panel-heading">面板header</div>
<div class="panel-body">这里是面板内容</div>
<div class="panel-footer">面板footer</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">面板header</div>
<div class="panel-body">这里是面板内容</div>
<div class="panel-footer">面板footer</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">面板header</div>
<div class="panel-body">这里是面板内容</div>
<div class="panel-footer">面板footer</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">面板header</div>
<div class="panel-body">这里是面板内容</div>
<div class="panel-footer">面板footer</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">面板header</div>
<div class="panel-body">这里是面板内容</div>
<div class="panel-footer">面板footer</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">面板header</div>
<div class="panel-body">这里是面板内容</div>
<div class="panel-footer">面板footer</div>
</div>

效果：



三、可以将表格或列表组放入面板的panel-body中进行使用，如：

<div class=“panel panel-default”>
<div class=“panel-heading”>Panel heading</div>
<div class=“panel-body”>
<p>…</p>
<table class=“table table-bordered”>
…
</table>
</div>
</div>

<div class=“panel panel-success”>
<!— 默认面板 —>
<div class=“panel-heading”>汤姆大叔的书目</div>
<p>
<br />以下列表是汤姆大叔在2012、2013年所出版的图书，敬请大家阅读，多提建
议。<br /><br />
</p>
<!— 列表组 —>
<ul class=“list-group ”>
<li class=“list-group-item”>JavaScript编程精解</li>
<li class=“list-group-item”>JavaScript设计模式</li>
<li class=“list-group-item”>JavaScript启示录</li>
<li class=“list-group-item”>您正在读的本书</li>
<li class=“list-group-item”>正在构思的书</li>
</ul>
</div>