1、面板

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

"color: #3366ff">"color: #3366ff">"htmlcode">

<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为了丰富面板的功能,特意为面板增加“面板头部”和“页面尾部”的效果:

"color: #3366ff">"htmlcode">

<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框架中面板组件除了默认的主题样式之外,还包括以下几种主题样式,构成了一个彩色面板:

"htmlcode">

<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面板,希望大家从中得到收获。

标签:
bootstrap,面板

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“Bootstrap每天必学之面板”

暂无“Bootstrap每天必学之面板”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。