浅析Bootstrap组件之面板组件

前端之家收集整理的这篇文章主要介绍了浅析Bootstrap组件之面板组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

LESS:panels.less SASS:_panels.scss

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

Box-shadow: 0 1px 1px rgba(0,.05); Box-shadow: 0 1px 1px rgba(0,.05); } .panel-body { padding: 15px; }

基础面板的运用:

基础面板
主题样式风格

带有头和尾的面板

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的容器中放置需要的内容,里面的内容可能是图片、表格、列表等;来看看面板中嵌套表格和列表组的效果,下面是一个嵌套表格的例子:

面板中嵌套表格
诗人对菊花由衷喜爱:开得正旺的菊花一簇簇、一丛丛,遍布屋舍四周,他沿着竹篱,忘情地欣赏这些亲手栽种的秋菊,不觉日已西斜。

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

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

例如:

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

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

面板中嵌套列表组

例子:

面板中嵌套列表组
面板嵌套列表组

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

例子:

面板中嵌套列表组
面板嵌套列表组

效果如下:

原文链接:https://www.f2er.com/bootstrap/49019.html

猜你在找的Bootstrap相关文章

《上邪》 《题都城南庄》