Date | 2018-11-04
面板
1.1 基础面板
基础面板一个div容器运用了“panel”样式，产生一个具有边框的文本显示块。.panel不控制主题颜色，所以在.panel的基础上增加一个控制颜色的主题.panel-default，另外在里面添加了一个div.panel-body来放置面板主体内容：
<div class="panel panel-default">
<div class="panel-body">我是一个基础面板，带有默认主题样式风格</div>
</div>
1.2 带有头和尾的面板
Bootstrap为了丰富面板的功能，特意为面板增加“面板头部”和“页面尾部”的效果：
☑ panel-heading：用来设置面板头部样式
☑ panel-footer：用来设置面板尾部样式
例如：
<div class="panel panel-default">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、
盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、
响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
<div class="panel-footer">作者：大漠</div>
</div>
1.3 彩色面板
在基础面板一节中了解到，panel样式并没有对主题进行样式设置，而主题样式是通过panel-default来设置。在Bootstrap框架中面板组件除了默认的主题样式之外，还包括以下几种主题样式，构成了一个彩色面板：
☑ panel-primary：重点蓝
☑ panel-success：成功绿
☑ panel-info:信息蓝
☑ panel-warning：警告黄
☑ panel-danger：危险红
使用方法就很简单了，只需要在panel的类名基础上增加自己需要的类名，也就是把panel-default 替换为相应的彩色面板类名
1.4 面板中嵌套表格
一般情况下可以把面板理解为一个区域，在使用面板的时候，都会在panel-body放置需要的内容，可能是图片、表格或者列表等。来看看面板中嵌套表格和列表组的一个效果。
<div class="panel panel-default">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">…</div>
<!-- 把table放到panel-heading外面来-->
<table class="table table-bordered">…</table>
<div class="panel-footer">作者：大漠</div>
</div>
table在panel-heading里面
table在panel-body外面
1.5 面板中嵌套列表组
道理和嵌套表格一样
<div class="panel panel-default">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">…</div>
<!-- 把列表组放到panel-heading外面来-->
<ul class="list-group">
<li class="list-group-item">我是列表项</li>
<li class="list-group-item">我是列表项</li>
<li class="list-group-item">我是列表项</li>
</ul>
<div class="panel-footer">作者：大漠</div>
</div>
列表组放到panel-body里
列表组放到panel-body外面
网友评论