浅析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 相关文章推荐
JavaScript Scoping and Hoisting 翻译
Jul 03 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
Vue.js实现数据响应的方法
Aug 13 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 Javascript
vue 动态创建组件的两种方法
Dec 31 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
PHP 命令行参数详解及应用
2011/05/18 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
jquery 弹出层实现代码
2009/10/30 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
图片无缝滚动代码(向左/向下/向上)
2013/04/10 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
基于JavaScript实现留言板功能
2020/03/16 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
JS实现放大镜效果
2020/09/21 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
Python中splitlines()方法的使用简介
2015/05/20 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
django数据库自动重连的方法实例
2019/07/21 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
Unix如何在一行中运行多个命令
2015/05/29 面试题
初婚未育未抱养证明
2014/01/12 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
求职信格式要求
2014/05/23 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
公司年底活动方案
2014/08/17 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers