separador

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 normal
Contenido del panel

Título del panel con estilo h3

Contenido del panel


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 content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content


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

Título del panel

...

IDNombreEdad
1Sofía12
2Juan23
3Jose30