PANELES
En ocasiones es necesario encerrar cierto contenido dentro de una caja.
En estos casos deberías considerar el uso del componente para paneles.
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
.
Panel con Titulo
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>
Resultado
Título del panel con estilo h3
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>
Resultado
Panel title
Panel title
Panel title
Panel title
Panel title
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>
Resultado
...
ID | Nombre | Edad |
1 | Sofía | 12 |
2 | Juan | 23 |
3 | Jose | 30 |