Bootstrap每天必学之面板


Posted in Javascript onNovember 30, 2015

1、面板

面板(Panels)是Bootstrap框架新增的一个组件,其主要作用就是用来处理一些其他组件无法完成的功能。同样在不同的版本中具有不同的源码:

☑ Less版本:对应的源码文件是 panels.less

☑ Sass版本:对应的源码文件是 _panels.scss

☑ 编译后的Bootstrap:对应bootstrap.css文件第4995行~第5302行

2、面板?基础面板

基础面板非常简单,就是一个div容器运用了“panel”样式,产生一个具有边框的文本显示块。由于“panel”不控制主题颜色,所以在“panel”的基础上增加一个控制颜色的主题“panel-default”,另外在里面添加了一个“div.panel-body”来放置面板主体内容:

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

运行效果如下:

Bootstrap每天必学之面板

原理分析:

“panel“主要对边框,间距和圆角做了一定的设置:

/bootstrap.css文件第4995行~第5005行/

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

3、面板?带有头和尾的面板

基础面板看上去太简单了,Bootstrap为了丰富面板的功能,特意为面板增加“面板头部”和“页面尾部”的效果:

☑ panel-heading:用来设置面板头部样式

☑ panel-footer:用来设置面板尾部样式

<div class="panel panel-default">
 <div class="panel-heading">图解CSS3</div>
 <div class="panel-body">…</div>
 <div class="panel-footer">作者:大漠</div>
</div>

运行效果如下:

Bootstrap每天必学之面板

原理分析:

panel-heading和panel-footer也仅仅间距和圆角等样式进行了设置:

/bootstrap.css文件第5006行~第5030行/

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

4、面板?彩色面板

在基础面板一节中了解到,panel样式并没有对主题进行样式设置,而主题样式是通过panel-default来设置。在Bootstrap框架中面板组件除了默认的主题样式之外,还包括以下几种主题样式,构成了一个彩色面板:

☑ panel-primary:重点蓝

☑ panel-success:成功绿

☑ panel-info:信息蓝

☑ panel-warning:警告黄

☑ panel-danger:危险红

使用方法就很简单了,只需要在panel的类名基础上增加自己需要的类名:

<div class="panel panel-default">
 <div class="panel-heading">图解CSS3</div>
 <div class="panel-body">…</div>
 <div class="panel-footer">作者:大漠</div>
</div>
<div class="panel panel-primary">…</div>
<div class="panel panel-success">…</div>
<div class="panel panel-info">…</div>
<div class="panel panel-warning">…</div>
<div class="panel panel-danger">…</div>

运行效果如下:

Bootstrap每天必学之面板

从效果中不难发现,这几个样式只是改变了面板的背景色、文本和边框颜色:具体源码可以查看bootstrap.css文件第5195行~第5302行。

5、面板?面板中嵌套列表组

在上一节,我们介绍了如何在面板中放置表格,现在我们来学习如何在面板中放置列表组,我们简单的来看一个示例:

<div class="panel panel-default">
 <div class="panel-heading">图解CSS3</div>
 <div class="panel-body">
 <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
 </p>
 <ul class="list-group">
 <li class="list-group-item">我是列表项</li>
 <li class="list-group-item">我是列表项</li>
 <li class="list-group-item">我是列表项</li>
 </ul>
 </div>
 <div class="panel-footer">作者:大漠</div>
</div>

运行效果如下:

Bootstrap每天必学之面板

优化代码:

和嵌套表格一样,如果你觉得这样有间距不好看,你完全可以把列表组提取出来:

<div class="panel panel-default">
 <div class="panel-heading">图解CSS3</div>
 <div class="panel-body">…</div>
 <ul class="list-group">
 <li class="list-group-item">我是列表项</li>
 <li class="list-group-item">我是列表项</li>
 <li class="list-group-item">我是列表项</li>
 </ul>
 <div class="panel-footer">作者:大漠</div>
</div>

运行效果如下:

Bootstrap每天必学之面板

同样的道理,Bootstrap将嵌套在面板中的列表组做了一定的样式优化。具体源码可以查看bootstrap.css文件第5031行~第5053行。

本文系列教程整理到:Bootstrap基础教程 专题中,欢迎点击学习。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上针对面板,分别介绍了基础面板、彩色面板等,帮助大家更全面的学习Bootstrap面板,希望大家从中得到收获。

Javascript 相关文章推荐
prototype Element学习笔记(篇一)
Oct 26 Javascript
显示js对象所有属性和方法的函数
Oct 16 Javascript
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
跟我学习javascript的函数和函数表达式
Nov 16 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
详解如何运行vue项目
Apr 15 Javascript
vue中的面包屑导航组件实例代码
Jul 01 Javascript
canvas实现贪食蛇的实践
Feb 15 Javascript
Bootstrap每天必学之媒体对象
Nov 30 #Javascript
javascript针对cookie的基本操作实例详解
Nov 30 #Javascript
javascript闭包(Closure)用法实例简析
Nov 30 #Javascript
详解JavaScript的流程控制语句
Nov 30 #Javascript
详解JavaScript的表达式与运算符
Nov 30 #Javascript
Bootstrap每天必学之进度条
Nov 30 #Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 #Javascript
You might like
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
用PHP制作的意见反馈表源码
2007/03/11 PHP
php cli 小技巧
2013/06/03 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
php实现微信发红包
2015/12/05 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
利用vue写todolist单页应用
2016/12/15 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
windows下python安装小白入门教程
2018/09/18 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
python如何将两个txt文件内容合并
2019/10/18 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
Java基础知识面试题
2014/03/25 面试题
总经理秘书工作职责
2013/12/26 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
大二学年个人总结
2015/03/03 职场文书
python字符串的一些常见实用操作
2022/04/06 Python
数据设计之权限的实现
2022/08/05 MySQL
Java使用HttpClient实现文件下载
2022/08/14 Java/Android