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

面板部件的次要效能是处置另外部件的效能。,差异版本的源代码在差异版本中有差异的源代码:

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

彩色面板

由于面板构成缺勤主旋律色的构成设置,bootstrap边框打中面板部件处置默许的主旋律(.panel-default)构成在远处,它还包含以下主旋律作风:

.panel-primary:鲜明      蓝色

.panel-success:成      绿色

.panel-info:教训            蓝色(浅)

.panel-warning:正告       黄色

.panel-danger:双骰子游戏        白色

这些构成只更改面板的底色色。、版本、边框色

该方式的运用异常复杂。,只需在.panel的类名根底上增加需求的主旋律类名

样本:

<h1>彩色面板h1><div class="panel panel-default"><div class="panel-heading">白头吟div><div class="panel-body">雪像雪山,皎若云间月。
            闻君有两意,故来相决裂。
            昔日斗大量吸毒,明旦沟水头。
            躞蹀御沟上,沟水东西流。
            寒冷地复寒冷地,婚姻生活缩写词为N/R啼。
            心想事成,白头不划分。
            竹竿何袅袅,鱼尾何簁簁!
            男人重性情,何用钱刀为!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-BOST匣中。,物质可以是图片、表格、名单等;来看一眼嵌套表在面板中和列表组的使发生,上面是嵌套表的示例:

<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-BOOST设置装填物:15px的值,为了经过努力到达某事物这么使发生,在现实运用时,可以从面板主震相中逮捕表。:

拿 … 来说:

<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

嵌套嵌套列表结成嵌套表格俱,万一不需求这样的事物的空的空间或地点,列表组可以从PANELL体中逮捕。

样本:

<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

发表评论

电子邮件地址不会被公开。 必填项已用*标注