While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.

Basic example

By default, all the .panel does is apply some basic border and padding to contain some content.

Basic panel example
<div class="panel panel-default"> <div class="panel-body">	Basic panel example </div></div>			

Panel with heading

Easily add a heading container to your panel with .panel-heading. You may also include any <h1>-<h6> with a .panel-title class to add a pre-styled heading.

Panel heading without title
Panel content

Panel title

Panel content
<div class="panel panel-default"> <div class="panel-heading">Panel heading without title</div> <div class="panel-body">	Panel content </div></div><div class="panel panel-default"> <div class="panel-heading">	<h3 class="panel-title">Panel title</h3> </div> <div class="panel-body">	Panel content </div></div>			

Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.

Panel content
<div class="panel panel-default"> <div class="panel-body">	Panel content </div> <div class="panel-footer">Panel footer</div></div>			

Contextual alternatives

Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

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

With tables

Add any non-bordered .table within a panel for a seamless design. If there is a .panel-body, we add an extra border to the top of the table for separation.

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading">Panel heading</div> <div class="panel-body">	<p>...</p> </div> <!-- Table --> <table class="table">	... </table></div>			

If there is no panel body, the component moves from panel header to table without interruption.

Panel heading
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading">Panel heading</div> <!-- Table --> <table class="table">	... </table></div>			

With list groups

Easily include full-width list groups within any panel.

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading">Panel heading</div> <div class="panel-body">	<p>...</p> </div> <!-- List group --> <ul class="list-group">	<li class="list-group-item">Cras justo odio</li>	<li class="list-group-item">Dapibus ac facilisis in</li>	<li class="list-group-item">Morbi leo risus</li>	<li class="list-group-item">Porta ac consectetur ac</li>	<li class="list-group-item">Vestibulum at eros</li> </ul></div>			
به اشتراک بگذارید: