Bootstrap - Paneles
Este capítulo discutirá sobre los paneles Bootstrap. Los componentes del panel se utilizan cuando desea poner su componente DOM en una caja. Para obtener un panel básico, simplemente agregue clase.panelal elemento <div>. También agrega clase.panel-default a este elemento como se muestra en el siguiente ejemplo:
<div class = "panel panel-default">
<div class = "panel-body">
This is a Basic panel
</div>
</div>
Panel con encabezado
Hay dos formas de agregar un encabezado de panel:
Utilizar .panel-heading class para agregar fácilmente un contenedor de encabezado a su panel.
Utilice cualquier <h1> - <h6> con un .panel-title class para agregar un encabezado con estilo.
El siguiente ejemplo demuestra ambas formas:
<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 With title
</h3>
</div>
<div class = "panel-body">
Panel content
</div>
</div>
Panel con pie de página
Puede agregar pies de página a los paneles, ajustando botones o texto secundario en una clase que contenga <div> .panel-footer. El siguiente ejemplo demuestra esto.
<div class = "panel panel-default">
<div class = "panel-body">
This is a Basic panel
</div>
<div class = "panel-footer">Panel footer</div>
</div>
Los pies de página del panel no heredan colores y bordes cuando se utilizan variaciones contextuales, ya que no están destinados a estar en primer plano.
Alternativas contextuales del panel
Utilice clases de estado contextuales como, panel-primary, panel-success, panel-info, panel-warning, panel-danger, para hacer un panel más significativo para un contexto particular.
<div class = "panel panel-primary">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>
<div class = "panel panel-success">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>
<div class = "panel panel-info">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>
<div class = "panel panel-warning">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>
<div class = "panel panel-danger">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>
Panel con Mesas
Para obtener una tabla sin bordes dentro de un panel, use la clase .tabledentro del panel. Suponga que hay un <div> que contiene.panel-body, agregamos un borde adicional a la parte superior de la mesa para la separación. Si no hay <div> que contenga.panel-body, luego el componente se mueve del encabezado del panel a la mesa sin interrupción.
El siguiente ejemplo demuestra esto:
<div class = "panel panel-default">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
<table class = "table">
<tr>
<th>Product</th>
<th>Price </th>
</tr>
<tr>
<td>Product A</td>
<td>200</td>
</tr>
<tr>
<td>Product B</td>
<td>400</td>
</tr>
</table>
</div>
<div class = "panel panel-default">
<div class = "panel-heading">Panel Heading</div>
<table class = "table">
<tr>
<th>Product</th>
<th>Price </th>
</tr>
<tr>
<td>Product A</td>
<td>200</td>
</tr>
<tr>
<td>Product B</td>
<td>400</td>
</tr>
</table>
</div>
Panel con grupos de lista
Puede incluir grupos de listas dentro de cualquier panel. Crea un panel agregando clase.panelal elemento <div>. También agrega clase.panel-defaulta este elemento. Ahora dentro de este panel incluya sus grupos de lista. Puede aprender a crear un grupo de listas desde el capítulo Grupos de listas .
<div class = "panel panel-default">
<div class ="panel-heading">Panel heading</div>
<div class = "panel-body">
<p>This is a Basic panel content. This is a Basic panel content.
This is a Basic panel content. This is a Basic panel content.
This is a Basic panel content. This is a Basic panel content.
This is a Basic panel content.</p>
</div>
<ul class = "list-group">
<li class = "list-group-item">Free Domain Name Registration</li>
<li class = "list-group-item">Free Window Space hosting</li>
<li class = "list-group-item">Number of Images</li>
<li class = "list-group-item">24*7 support</li>
<li class = "list-group-item">Renewal cost per year</li>
</ul>
</div>