浅析Bootstrap组件之面板组件_javascript技巧

面板组件主要作用是用来处理一些其他组件无法完成的功能，在不同的版本中具有不同的源码：

LESS：panels.less
SASS:_panels.scss

基础面板非常简单，就是一个div容器中运用了类.panel的样式，产生一个具有边框的文本显示块，由于panel不控制主题颜色，所以在.panel基础上增加一个控制颜色的主题的类.panel-default,在里面添加一个div.panel-body来放置面板主体内容
.panel主要对边框、间距、圆角、左右一定的设置：

基础面板的运用：

带有头和尾的面板

bootstrap为了丰富面板的功能，特意为面板增加面板头部和面板尾部的效果，

.panel-heading:设置面板头部样式

.panel-footer:设置面板尾部样式

.panel-headingh和.panel-footer仅是对间距和圆角等样式进行了设置

例子：

彩色面板

由于.panel样式并没有对主题颜色进行样式设置，bootstrap框架中的面板组件处理默认的主题（.panel-default）样式之外，还包括以下几种主题样式：

.panel-primary:重点 蓝色

.panel-success:成功 绿色

.panel-info:信息 蓝色（浅的）

.panel-warning:警告 黄色

.panel-danger:危险 红色

这几个样式只是改变了面板的背景色、文本、和边框色

使用方法很简单，只需在.panel的类名基础上追加需要的主题类名

例子：

效果如下：

面板中嵌套表格

一般情况下可以把面板理解为一个区域，在使用面板的时候，都会在.panel-body的容器中放置需要的内容，里面的内容可能是图片、表格、列表等；来看看面板中嵌套表格和列表组的效果，下面是一个嵌套表格的例子：

在实际运用中，或许表格和面板边缘不需要有任何的间距，但.panel-body设置了一个padding：15px的值，为了实现这样的效果，可以在实际使用的时候把table提取到panel-body外面：

例如：

面板中嵌套列表组

例子：

面板嵌套列表组合嵌套表格一样，如果不需要这样的间距，完全可以把列表组从.panel-body中提取出来

例子：

效果如下：

以上所述是小编给大家介绍的Bootstrap组件之面板组件，希望对大家有所帮助！