Bootstrap_面板

一、基础面板
　　基础面板非常简单，就是一个div容器运用了“panel”样式，产生一个具有边框的文本显示块。

　　由于“panel”不控制主题颜色，所以在“panel”的基础上增加一个控制颜色的主题“panel-default”，另外在里面添加了一个“div.panel-body”来放置面板主体内容。

<div class="panel panel-default">
    <div class="panel-body">我是一个基础面板，带有默认主题样式风格</div>
</div>

 

二、带有头和尾的面板
　　Bootstrap为了丰富面板的功能，特意为面板增加“面板头部”和“页面尾部”的效果：

　　☑ panel-heading：用来设置面板头部样式

　　☑ panel-footer：用来设置面板尾部样式

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">…</div>
    <div class="panel-footer">作者：NA</div>
</div>

 

三、彩色面板

　　☑ panel-primary：重点蓝

　　☑ panel-success：成功绿

　　☑ panel-info:信息蓝

　　☑ panel-warning：警告黄

　　☑ panel-danger：危险红

　　使用方法就很简单了，只需要在panel的类名基础上增加自己需要的类名。

<div class="panel panel-primary">…</div>
<div class="panel panel-success">…</div>
<div class="panel panel-info">…</div>
<div class="panel panel-warning">…</div>
<div class="panel panel-danger">…</div>