浅析Bootstrap组件之面板组件
|
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 面板组件主要作用是用来处理一些其他组件无法完成的功能，在不同的版本中具有不同的源码： 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仅是对间距和圆角等样式进行了设置 .dropdown .dropdown-toggle {
color: inherit;
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 16px;
color: inherit;
}
.panel-title > a {
color: inherit;
}
.panel-footer {
padding: 10px 15px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
例子： 带有头和尾的面板
彩色面板 由于.panel样式并没有对主题颜色进行样式设置，bootstrap框架中的面板组件处理默认的主题（.panel-default）样式之外，还包括以下几种主题样式： .panel-primary:重点 蓝色 .panel-success:成功 绿色 .panel-info:信息 蓝色（浅的） .panel-warning:警告 黄色 .panel-danger:危险 红色 这几个样式只是改变了面板的背景色、文本、和边框色 使用方法很简单，只需在.panel的类名基础上追加需要的主题类名 例子： 彩色面板
效果如下： 
面板中嵌套表格 一般情况下可以把面板理解为一个区域，在使用面板的时候，都会在.panel-body的容器中放置需要的内容，里面的内容可能是图片、表格、列表等；来看看面板中嵌套表格和列表组的效果，下面是一个嵌套表格的例子： 面板中嵌套表格
诗人对菊花由衷喜爱：开得正旺的菊花一簇簇、一丛丛，遍布屋舍四周，他沿着竹篱，忘情地欣赏这些亲手栽种的秋菊，不觉日已西斜。
相关内容
|