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 相关文章推荐
JavaScript调用Activex控件的事件的实现方法
Apr 11 Javascript
juqery 学习之三 选择器 层级 基本
Nov 25 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
Nov 02 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 Javascript
javascript数组的定义及操作实例
Nov 10 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 Javascript
JavaScript流程控制(分支)
Dec 06 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
PHP4中session登录页面的应用
2008/07/25 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
JavaScript中链式调用之研习
2011/04/07 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
JavaScript仿静态分页实现方法
2015/08/04 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
简单介绍Python中的decode()方法的使用
2015/05/18 Python
python Django批量导入数据
2016/03/25 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
使用python将多个excel文件合并到同一个文件的方法
2019/07/09 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
优秀经理获奖感言
2014/03/04 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
如何写辞职书
2015/02/26 职场文书
高中团支书竞选稿
2015/11/21 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android
服务器间如何实现文件共享
2022/05/20 Servers
Python使用pyecharts控件绘制图表
2022/06/05 Python
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技