En ocasiones es necesario encerrar cierto contenido dentro de una caja. En estos casos deberías considerar el uso del componente para paneles.
6.19.1. Ejemplo sencillo
Por defecto, al aplicar la clase .panel a un elemento solamente se añade un borde muy sencillo y algo de relleno con la propiedad padding. Ejemplo:
<div class="panel panel-default">
<div class="panel-body">
Ejemplo de panel muy sencillo
</div>
</div>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.63 Panel sencillo en Bootstrap 3
6.19.2. Panel con título
Cuando lo necesites, añade un título al panel aplicando al texto del título la clase .panel-heading. Opcionalmente puedes utilizar cualquiera de las etiquetas de título (<h1>, ..., <h6>) para aplicar también esos estilos. Ejemplo:
<div class="panel panel-default">
<div class="panel-heading">Título del panel con estilo normal</div>
<div class="panel-body">
Contenido del panel
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Título del panel con estilo h3</h3>
</div>
<div class="panel-body">
Contenido del panel
</div>
</div>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.64 Paneles con título en Bootstrap 3
6.19.3. Panel con pie
Los paneles también pueden contener un pie o zona inferior donde incluir por ejemplo los botones de acción o cualquier otro texto secundario. Estas zonas inferiores no heredan los colores ni los estilos cuando se utilizan los paneles contextuales que se explican en las siguientes secciones. Ejemplo:
<div class="panel panel-default">
<div class="panel-body">
Contenido del panel
</div>
<div class="panel-footer">Pie del panel</div>
</div>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.65 Paneles con pie en Bootstrap 3
6.19.4. Paneles contextuales
Al igual que sucede con la mayoría de componentes, los paneles pueden adaptar su estilo al tipo de información que muestran mediante las variantes contextuales definidas por Bootstrap 3. Ejemplo:
<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>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.66 Paneles contextuales en Bootstrap 3
6.19.5. Paneles con tablas
Si incluyes dentro de un panel cualquier tabla sin borde y con la clase .table, sus contenidos se adaptarán perfectamente al panel. Si además existe un elemento con la clase .panel-body, se añade un borde en la parte superior ed la tabla para mejorar su separación. Ejemplo:
<div class="panel panel-default">
<div class="panel-heading">Título del panel</div>
<div class="panel-body">
<p>...</p>
</div>
<table class="table">
...
</table>
</div>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.67 Paneles con tablas en Bootstrap 3
Si el panel no tiene contenido, no se muestra ninguna separación entre el título del panel y la tabla. Ejemplo:
<div class="panel panel-default">
<div class="panel-heading">Título del panel</div>
<table class="table">
...
</table>
</div>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.68 Paneles con tablas y sin contenidos en Bootstrap 3
6.19.6. Paneles con listas de elementos
Los paneles también están preparados para mostrar correctamente cualquier lista de elementos. Ejemplo:
<div class="panel panel-default">
<div class="panel-heading">Título del panel</div>
<div class="panel-body">
<p>...</p>
</div>
<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>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.69 Paneles con listas de elementos en Bootstrap 3