Paneles de arranque
Paneles
Un panel en bootstrap es un cuadro bordeado con algo de relleno alrededor de su contenido:
Un panel básico
Los paneles se crean con la .panelclase y el contenido dentro del panel tiene una
.panel-bodyclase:
Ejemplo
<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>
La .panel-defaultclase se utiliza para diseñar el color del panel. Vea el último ejemplo en esta página para más clases contextuales.
Encabezado de panel
Encabezado de panel
Contenido del panel
La .panel-headingclase agrega un encabezado al panel:
Ejemplo
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
</div>
Pie de página del panel
Contenido del panel
La .panel-footerclase agrega un pie de página al panel:
Ejemplo
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
Grupo de paneles
Para agrupar muchos paneles, envuelva una <div>clase with
.panel-groupalrededor de ellos.
La .panel-groupclase borra el margen inferior de cada panel:
Ejemplo
<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>
Paneles con Clases Contextuales
Para colorear el panel, use clases contextuales ( .panel-default, .panel-primary, .panel-success, .panel-info, .panel-warningo .panel-danger):
Ejemplo
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