Bootstrap panely
Panely
Panel v bootstrapu je ohraničená krabice s nějakým vycpávkou kolem obsahu:
Základní panel
Panely se vytvářejí pomocí .paneltřídy a obsah uvnitř panelu má
.panel-bodytřídu:
Příklad
<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>
Třída .panel-defaultse používá ke stylování barvy panelu. Více kontextových tříd naleznete v posledním příkladu na této stránce.
Záhlaví panelu
Záhlaví panelu
Obsah panelu
Třída .panel-headingpřidá nadpis do panelu:
Příklad
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
</div>
Zápatí panelu
Obsah panelu
Třída .panel-footerpřidá zápatí do panelu:
Příklad
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
Skupina panelů
Chcete-li seskupit mnoho panelů, obtočte je <div>třídou
.panel-group.
Třída .panel-groupvymaže spodní okraj každého panelu:
Příklad
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
</div>
</div>
Panely s kontextovými třídami
Chcete-li panel obarvit, použijte kontextové třídy ( .panel-default, .panel-primary, .panel-success, .panel-info, .panel-warningnebo .panel-danger):
Příklad
Panel with panel-default class
Panel Content
Panel with panel-primary class
Panel Content
Panel with panel-success class
Panel Content
Panel with panel-info class
Panel Content
Panel with panel-warning class
Panel Content
Panel with panel-danger class
Panel Content