Bootstrap 面板

来源：互联网发布：爱豆软件旧版编辑：程序博客网时间：2024/04/30 02:18

一、基础面板

在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>

0 0