浅析Bootstrap组件之面板组件


Posted in Javascript onMay 04, 2016

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

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

LESS:panels.less
SASS:_panels.scss

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

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

基础面板的运用:

<h1>基础面板</h1>
<div class="panel panel-default">
<div class="panel-body">这是一个基础面板,带默认主题样式风格</div>
</div>

浅析Bootstrap组件之面板组件

带有头和尾的面板

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

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

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

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

.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.panel-heading > .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;
}

例子:

<h1>带有头和尾的面板</h1>
<div class="panel panel-default">
<div class="panel-heading">这里是面板头部标题</div>
<div class="panel-body">这里是面板内容部分这里是面板内容部分这里是面板内容部分这里是面板内容部分这里是面板内容部分这里是面板内容部分这里是面板内容部分</div>
<div class="panel-footer">这里是面板尾部部分</div>
</div>

浅析Bootstrap组件之面板组件

彩色面板

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

.panel-primary:重点 蓝色

.panel-success:成功 绿色

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

.panel-warning:警告 黄色

.panel-danger:危险 红色

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

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

例子:

<h1>彩色面板</h1>
<div class="panel panel-default">
<div class="panel-heading">白头吟</div>
<div class="panel-body">皑如山上雪,皎若云间月。
闻君有两意,故来相决绝。
今日斗酒会,明旦沟水头。
躞蹀御沟上,沟水东西流。
凄凄复凄凄,嫁娶不须啼。
愿得一人心,白首不相离。
竹竿何袅袅,鱼尾何??!
男儿重意气,何用钱刀为!</div>
<div class="panel-footer">作者:卓文君</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">无题</div>
<div class="panel-body">昨夜星辰昨夜风,画楼西畔桂堂东。
身无彩凤双飞翼,心有灵犀一点通。
隔座送钩春酒暖,分曹射覆蜡灯红。
嗟余听鼓应官去,走马兰台类转蓬。</div>
<div class="panel-footer">作者:李商隐</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">青玉案·元夕</div>
<div class="panel-body">东风夜放花千树,更吹落,星如雨。宝马雕车香满路。凤箫声动,玉壶光转,一夜鱼龙舞。
蛾儿雪柳黄金缕,笑语盈盈暗香去。众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。</div>
<div class="panel-footer">作者: 辛弃疾</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">离思</div>
<div class="panel-body">曾经沧海难为水,除却巫山不是云。
取次花丛懒回顾,半缘修道半缘君。</div>
<div class="panel-footer">作者: 元稹</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">画梅</div>
<div class="panel-body">微雪初消月半池,篱边遥见两三枝。
清香传得天心在,未话寻常草木知。</div>
<div class="panel-footer">作者: 方孝孺</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">菊花</div>
<div class="panel-body">秋丛绕舍似陶家,遍绕篱边日渐斜。
不是花中偏爱菊,此花开尽更无花。</div>
<div class="panel-footer">作者: 元稹</div>
</div>

效果如下:

浅析Bootstrap组件之面板组件浅析Bootstrap组件之面板组件

浅析Bootstrap组件之面板组件

面板中嵌套表格

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

<h1>面板中嵌套表格</h1>
<div class="panel panel-default">
<div class="panel-heading">描写花的诗句</div>
<div class="panel-body">
<p>诗人对菊花由衷喜爱:开得正旺的菊花一簇簇、一丛丛,遍布屋舍四周,他沿着竹篱,忘情地欣赏这些亲手栽种的秋菊,不觉日已西斜。</p>
<table class="table table-bordered">
<thead>
<tr>
<th>不是花中偏爱菊,此花开尽更无花《菊花》</th>
<th>愿得一人心,白首不相离《白头吟》</th>
<th>床前明月光,疑是地上霜《静夜思》</th>
</tr>
</thead>
<tbody>
<tr>
<td>先天下之忧而忧,后天下之乐而乐《岳阳楼记》</td>
<td>我欲与君相知,长命无绝衰《上邪》</td>
<td>人面不知何处去,桃花依旧笑春风《题都城南庄》</td>
</tr>
</tbody>
</table>
</div>
<div class="panel-footer">这首诗取陶诗的意境,且也以淡雅朴素的语言吟咏,便不似陶公全用意象,蕴藉之至;而是在描绘具象之后,以自述的方式道出爱菊之由而又不一语说尽,留下了想象空间让人们去回味咀嚼,这就增强了它的艺术感染力。因而历来被人们所喜爱</div>
</div>

浅析Bootstrap组件之面板组件

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

例如:

<div class="panel panel-default">
<div class="panel-heading">描写花的诗句</div>
<div class="panel-body">
<p>诗人对菊花由衷喜爱:开得正旺的菊花一簇簇、一丛丛,遍布屋舍四周,他沿着竹篱,忘情地欣赏这些亲手栽种的秋菊,不觉日已西斜。</p>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>《岳阳楼记》</th>
<th>《上邪》</th>
<th>《题都城南庄》</th>
</tr>
</thead>
<tbody>
<tr>
<td>先天下之忧而忧,后天下之乐而乐</td>
<td>我欲与君相知,长命无绝衰</td>
<td>人面不知何处去,桃花依旧笑春风</td>
</tr>
</tbody>
</table>
<div class="panel-footer">这首诗取陶诗的意境,且也以淡雅朴素的语言吟咏,便不似陶公全用意象,蕴藉之至;而是在描绘具象之后,以自述的方式道出爱菊之由而又不一语说尽,留下了想象空间让人们去回味咀嚼,这就增强了它的艺术感染力。因而历来被人们所喜爱</div>
</div>

浅析Bootstrap组件之面板组件

面板中嵌套列表组

例子:

<h1>面板中嵌套列表组</h1>
<div class="panel panel-default">
<div class="panel-heading">描写花的诗句</div>
<div class="panel-body">
<p>面板嵌套列表组</p>
<ul class="list-group">
<li class="list-group-item">列表项1</li>
<li class="list-group-item">列表项2</li>
<li class="list-group-item">列表项3</li>
<li class="list-group-item">列表项4</li>
<li class="list-group-item">列表项5</li>
</ul>
</div>
<div class="panel-footer">作者:李商隐</div>
</div>

浅析Bootstrap组件之面板组件

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

例子:

<h1>面板中嵌套列表组</h1>
<div class="panel panel-default">
<div class="panel-heading">描写花的诗句</div>
<div class="panel-body">
<p>面板嵌套列表组</p>
</div>
<ul class="list-group">
<li class="list-group-item">列表项1</li>
<li class="list-group-item">列表项2</li>
<li class="list-group-item">列表项3</li>
<li class="list-group-item">列表项4</li>
<li class="list-group-item">列表项5</li>
</ul>
<div class="panel-footer">作者:李商隐</div>
</div>

效果如下:

浅析Bootstrap组件之面板组件

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

Javascript 相关文章推荐
Jquery插件之多图片异步上传
Oct 20 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
Vue使用screenfull实现全屏效果
Sep 17 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 #Javascript
js编写当天简单日历效果【实现代码】
May 03 #Javascript
javascript实现下雪效果【实例代码】
May 03 #Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 #Javascript
javascript的列表切换【实现代码】
May 03 #Javascript
jQuery中队列queue()函数的实例教程
May 03 #Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 #Javascript
You might like
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
php入门教程 精简版
2009/12/13 PHP
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
Vue组件模板的几种书写形式(3种)
2020/02/19 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
动态创建类实例代码
2009/10/07 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
Python JSON编解码方式原理详解
2020/01/20 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
我们的节日清明节活动方案
2014/03/05 职场文书
优秀班集体申报材料
2014/12/25 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
大学生实习推荐信
2015/03/27 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书