深入理解BootStrap-- 面板(panel)
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>
运行效果如下:
原理分析:
“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>
运行效果如下:
原理分析:
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.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>
运行效果如下:
优化代码:
和嵌套表格一样,如果你觉得这样有间距不好看,你完全可以把列表组提取出来:
<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.css
文件第5031行~第5053行。
深入理解BootStrap-- 面板(panel)相关推荐
- 深入理解BootStrap -- 面板(panel)17
1.面板 面板(Panels)是Bootstrap框架新增的一个组件,其主要作用就是用来处理一些其他组件无法完成的功能.同样在不同的版本中具有不同的源码: ☑ Less版本:对应的源码文件是 pane ...
- html5拖动的面板 panel,基于jQuery UI的Bootstrap Panel面板功能增强插件
LobiPanel是一款基于jQuery UI的Bootstrap Panel面板功能增强插件.通过该插件可以为Bootstrap的原生Panel面板增加编辑标题,最大化,最小化,面板拖动关闭面板等功 ...
- 面板panel与窗口frame的区别
面板panel与窗口frame的区别 References 都可以在其上加载组件 面板需要加载在组件上才能使用,而窗口不需要 JPanel和JFrame都可以作为容器存放别的控件 但JPanel一般作 ...
- AWT_面板 Panel(Java)
AWT_面板 Panel(Java) package Demo01;import java.awt.*; import java.awt.event.WindowEvent; import java. ...
- jQuery Mobile中面板panel的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中面板panel的data-*选项 带有 data-role="panel&q ...
- Pandas 面板Panel
一.Panel介绍 Pandas 面板(Panel)是3维数据的存储结构,相当于一个存储 DataFrame 的字典,有3个轴(axis),分别给出描述涉及面板数据的操作的一些语义,具体如下: ite ...
- 深入理解BootStrap Item7 -- 栅格系统(布局)
1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...
- Bootstrap中的面板(panel)
背景 写自动折叠的面板时遇到点问题,虽与面板本身无关,可看到他有序的组织,我想bootstrap肯定有完整的面板结构.果不其然. 基本结构 <div class="panel-grou ...
- Bootstrap3 面板 .panel 容器
面板 虽然不总是必须的,但某些时候你可能需要将某些 DOM 内容放到一个盒子里.对于这种情况,可以试试面板组件. 创建面板 Bootstrap的面板组件是内容的容器,它由页眉.主体.页脚三部分组成.面 ...
- Bootstrap 面板(Panels)
引用bootstrap的css和js文件 在html添加以下代码可显示不同颜色的面板 <div class="panel panel-default"><div ...
最新文章
- 【面试题】Spring框架中Bean的生命周期
- 一线上nagios监控参数
- winform 后台线程更新UI
- UVa 208 - Firetruck (回溯)
- 上海找python工作容易吗_Python程序员去上海工作有多难?
- .NET 云原生架构师训练营(模块二 基础巩固 依赖注入)--学习笔记
- iOS开发那些悲剧的事儿
- [转]异步性能:了解 Async 和 Await 的成本
- leetcode46.全排列
- Linux虚拟机连不上网克隆虚拟机网卡无法启动
- 高等代数--线性方程组
- vue.js中在js获取指定日期到现在时间的天数
- The server time zone value xxxxxxx is unrecognized or represents more than one time zone.
- rabbit ack机制
- 强大的ElasticSearch-入门-了解-精通
- 饭局上领导想抽烟,别说“抽我的软华子”,酒桌上3种人不能重用
- java zhs16gbk_JAVA-----乱码的处理 乱码的解决方法总结
- 群联PS2251-67成功量产教程
- 正版破解软件下载站大全
- win10系统盘多大合适_韩博士装机大师一键重装win10系统
热门文章
- matlab hurst代码,Hurst指数法matlab程序求助
- 送给女朋友的圣诞节电子贺卡源代码,圣诞节快乐代码
- 软件测试自动感应灯,原来这么简单——四种常见LED感应灯工作原理
- c语言百分号-5.2f什么意思,c语言中的%d跟%5.2f有什么区别
- 计算机右边键盘数字无效,巧妙解决电脑键盘右边的数字键失灵问题
- zblog php的foot模板在那里,zblog主题模板修改教程 zblog模板怎么修改?
- zblog html代码,zblog代码大全,代码对应的中文,超详细
- 5位数的数字黑洞是多少_揭秘数字黑洞6174
- 市场营销商业指标统计分析
- 十月美剧精听总结 - 权力的游戏「Game of Throne」 黑袍纠察队「The boys」 老无所依「No Country for the old men」