您的位置:主页 > 作品欣赏 > 综合新闻

详解Bootstrap面板组件 - 洛水三千

发布时间:2018-05-08 17:15  浏览:

面板议会的首要效能是处置对立的事物议会的效能。,不同的版本的源代码在不同的版本中有不同的的源代码:

LESS:panels.less

SASS:_panels.scss

根底面板高度地简略。,它是单独应用Cype。面板时髦的DIV拧紧。,引起带有边框的教科书显示块,由于面板不把持主旨色,因而在.panel根底上加法单独把持色的主旨的类.panel-default,在在内侧地添加单独以外行的面板的机身

面板首要是边框、防火间距、圆角、一体套设置:

.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>
image

头部和臀部的面板

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>

image

dafa888手机版下载

由于面板时髦不注意主旨色的时髦设置,bootstrap构架说得中肯面板议会处置默许的主旨(.panel-default)时髦远处,它还包含以下主旨作风:

.panel-primary:有力      蓝色

.panel-success:成      绿色

.panel-info:通知            蓝色(浅)

.panel-warning:正告       黄色

.panel-danger:冒险的事        白色

这些时髦只更改面板的安排色。、教科书、边框色

该方式的应用高度地简略。,只需在.panel的类名根底上傅需求的主旨类名

榜样:

<h1>dafa888手机版下载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>

终结列举如下:

imageimage

image

面板中嵌套表格

一般情况下可以把面板了解为单独区域,在应用面板的时辰,大主教区在.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>
image

在实践运用中,也许表格和面板使渐进不需求有少许的防火间距,但.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>
image

嵌套列表组在面板中

榜样:

<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">列表项1li><li class="list-group-item">列表项2li><li class="list-group-item">表计划3li><li class="list-group-item">表计划4li><li class="list-group-item">列表项5li>ul>div><div class="panel-footer">作者:李商隐div>div>
image

面板嵌套列表结成嵌套表格平均,倘若不需求这么大的的防火间距,完整可以把列表组从.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">列表项1li><li class="list-group-item">列表项2li><li class="list-group-item">表计划3li><li class="list-group-item">表计划4li><li class="list-group-item">列表项5li>ul><div class="panel-footer">作者:李商隐div>div>

终结列举如下:

image

本文地址:http://www.ssyms.com/zpxs/188.html
上一篇:上一篇:房地产前方预警 万家基金25只基金抱团超配亮红灯 - 数据
下一篇:下一篇:没有了

无相关信息
Copyright © dafa888手机版下载_dafabet手机版_dafabet手机版登录 版权所有 地址: