微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

浅析Bootstrap组件之面板组件

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

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

LESS:panels.less SASS:_panels.scss

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

rush:js;"> .panel { margin-bottom: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; -webkit-Box-shadow: 0 1px 1px rgba(0,.05); Box-shadow: 0 1px 1px rgba(0,.05); } .panel-body { padding: 15px; }

基础面板的运用:

rush:js;">

基础面板

一个基础面板,带主题样式风格

带有头和尾的面板

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; }

例子:

rush:js;">

带有头和尾的面板

heading">这里是面板头部标题
内容部分这里是面板内容部分这里是面板内容部分这里是面板内容部分这里是面板内容部分这里是面板内容部分这里是面板内容部分

彩色面板

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

.panel-primary:重点 蓝色

.panel-success:成功 绿色

.panel-info:信息 蓝色(浅的)

.panel-warning:警告 黄色

.panel-danger:危险 红色

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

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

例子:

rush:js;">

彩色面板

heading">白头吟
heading">无题
heading">青玉案·元夕
百度,蓦然回首,那人却在,灯火阑珊处。
heading">离思
heading">画梅
heading">菊花

效果如下:

面板中嵌套表格

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

rush:js;">

面板中嵌套表格

heading">描写花的诗句
诗人对菊花由衷喜爱:开得正旺的菊花一簇簇、一丛丛,遍布屋舍四周,他沿着竹篱,忘情地欣赏这些亲手栽种的秋菊,不觉日已西斜。

不是花中偏爱菊,此花开尽更无花《菊花》

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

例如:

rush:js;">
heading">描写花的诗句
诗人对菊花由衷喜爱:开得正旺的菊花一簇簇、一丛丛,遍布屋舍四周,他沿着竹篱,忘情地欣赏这些亲手栽种的秋菊,不觉日已西斜。

愿得一人心,白首不相离《白头吟》 床前明月光,疑是地上霜《静夜思》
《岳阳楼记》

面板中嵌套列表组

例子:

rush:js;">

面板中嵌套列表组

heading">描写花的诗句
面板嵌套列表组

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

例子:

rush:js;">

面板中嵌套列表组

heading">描写花的诗句
面板嵌套列表组

效果如下:

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


《上邪》 《题都城南庄》