twitter-bootstrap
Los paneles

Observaciones

Ejemplo basico

De forma predeterminada, todo lo que hace el .panel es aplicar algunos bordes y rellenos básicos para contener algo de contenido.

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

Panel con encabezado

Agregue fácilmente un contenedor de encabezado a su panel con .panel-heading . También puede incluir cualquier <h1>-<h6> con una clase .panel-title para agregar un encabezado de estilo anterior. Sin embargo, los tamaños de fuente de <h1>-<h6> se .panel-heading .

Para colorear correctamente los enlaces, asegúrese de colocar enlaces en los encabezados dentro de .panel-title .

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

Panel con pie de página

Ajustar botones o texto secundario en .panel-footer . Tenga en cuenta que los pies de página del panel no heredan los colores y los bordes cuando se usan variaciones contextuales, ya que no están destinados a estar en primer plano.

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