Bootstrap_面板

时间:2021-12-06 22:30:06

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

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

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

Bootstrap_面板

二、带有头和尾的面板
  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>

Bootstrap_面板

三、彩色面板

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