Bootstrap (Parte 16): Paneles

Redes sociales

En Bootstrap, cuando necesites encerrar contenido dentro de un caja, deberías considerar la utilización de paneles.

Bootstrap

Para crear un panel básico, con un borde sencillo, debes de utilizar la clase .panel junto con la clase .panel-default. Para el contenido de su interior, hay que emplear la clase .panel-body.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
 <title>Ejemplo Bootstrap - Webdisenia</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body> 
<div class="container">
 <div class="panel panel-default">
 <div class="panel-body">Un panel b&aacute;sico</div>
 </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador


Panel básico


 

Panel de título o encabezamiento

Con la clase .panel-heading puedes añadir un título o encabezamiento al panel.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
 <title>Ejemplo Bootstrap - Webdisenia</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
 <div class="panel panel-default">
 <div class="panel-heading">T&iacute;tulo del panel</div>
 <div class="panel-body">Contenido del panel</div>
 </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador


Panel con título


Panel de pie

La clase .panel-footer añade un pie al panel.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
 <title>Ejemplo Bootstrap - Webdisenia</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
 <div class="panel panel-default">
 <div class="panel-heading">T&iacutetulo del panel</div>
 <div class="panel-body">Contenido del panel</div>
 <div class="panel-footer">Pie del panel</div>
 </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador


Panel de pie


 

Grupo de paneles

Para agrupar varios paneles juntos, envuélvelos en un <div> con la clase .panel-group. La clase .panel-group elimina el margen superior de cada panel.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
 <title>Ejemplo Bootstrap - Webdisenia</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
 <p>La clase panel-group elimina el margen superior. Prueba a eliminar la clase y mira que ocurre.</p>
 <div class="panel-group">
 <div class="panel panel-default">
 <div class="panel-heading">T&iacute;tulo</div>
 <div class="panel-body">Contenido del panel</div>
 </div>
 <div class="panel panel-default">
 <div class="panel-heading">T&iacute;tulo</div>
 <div class="panel-body">Contenido del panel</div>
 </div>
 <div class="panel panel-default">
 <div class="panel-heading">T&iacute;tulo</div>
 <div class="panel-body">Contenido del panel</div>
 </div>
 </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador


Grupo de paneles


 

Paneles con clases contextuales

Para asignar colores a los paneles, usa las clases contextuales (.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, o .panel-danger).

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
 <title>Ejemplo Bootstrap - Webdisenia</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
 <div class="panel-group">
 <div class="panel panel-default">
 <div class="panel-heading">Panel con la clase .panel-default</div>
 <div class="panel-body">Contenido del panel</div>
 </div>
 <div class="panel panel-primary">
 <div class="panel-heading">Panel con la clase .panel-primary</div>
 <div class="panel-body">Contenido del panel</div>
 </div>
 <div class="panel panel-success">
 <div class="panel-heading">Panel con la clase .panel-success</div>
 <div class="panel-body">Contenido del panel</div>
 </div>
 <div class="panel panel-info">
 <div class="panel-heading">Panel con la clase .panel-info</div>
 <div class="panel-body">Contenido del panel</div>
 </div>
 <div class="panel panel-warning">
 <div class="panel-heading">Panel con la clase .panel-warning</div>
 <div class="panel-body">Contenido del panel</div>
 </div>
 <div class="panel panel-danger">
 <div class="panel-heading">Panel con la clase .panel-danger</div>
 <div class="panel-body">Contenido del panel</div>
 </div>
 </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador


Paneles con clases contextuales


Redes sociales

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.