Un panel es un componente en bootstrap, que es básicamente un marco o contenedor que consta de algún contenido en forma de texto, listas o tablas, etc., con algo de relleno alrededor.
Los paneles admiten una gran variedad de contenido. También se pueden agregar encabezados, pies de página o alternativas contextuales a los paneles utilizando diferentes clases proporcionadas por bootstrap.
Algunas de las principales clases de paneles en bootstrap son las siguientes:
- .panel-heading: agrega un contenedor de encabezado al panel.
- .panel-footer: agrega un contenedor de pie de página al panel.
- .panel-group – Borra el margen inferior de cada panel.
- .card-body: crea una sección acolchada dentro de un panel.
Paneles básicos: el panel básico de arranque se puede crear usando la clase .panel en la etiqueta div del código HTML donde se debe crear el panel y el contenido o el cuerpo dentro del panel debe estar en la clase .panel-body que básicamente crea relleno alrededor del contenido. Además, agregue la clase .panel-default a la etiqueta div del panel para diseñar y hacer bordes sólidos del panel.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
</div>
Incluya el siguiente enlace de hoja de estilo al código para agregar estilo y estructura básicos al panel.
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
Ejemplo 1: En este ejemplo, estamos creando un panel básico usando Bootstrap.
HTML
<!DOCTYPE html> <html> <head> <title>Panel example</title> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <h2 style="color: green;"> GeeksforGeeks </h2> <div class="panel panel-default"> <div class="panel-body"> Panel content 1 </div> </div> </div> </body> </html>
Producción:
Como puede ver en el resultado, se ha creado un panel básico con un estilo predeterminado y con relleno alrededor de su contenido.
Ejemplo 2: En este ejemplo, estamos creando un panel que tiene un contenedor de encabezado y pie de página.
HTML
<!DOCTYPE html> <html> <head> <title>Panel example</title> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <h2 style="color: green;"> GeeksforGeeks </h2> <div class="panel panel-default"> <div class="panel-heading"> Panel Heading Container </div> <div class="panel-body"> Panel content 1 </div> <div class="panel-body"> Panel content 2 </div> <div class="panel-body"> Panel content 3 </div> <div class="panel-footer"> Panel Footer Container </div> </div> </div> </body> </html>
Producción:
Como puede ver en el resultado, se ha creado un panel que tiene un contenedor de encabezado y pie de página con relleno alrededor del contenido, es decir, texto, y tiene un estilo predeterminado.
Adición de alternativas contextuales a los paneles
Podemos hacer que nuestros paneles sean más atractivos y significativos para los usuarios utilizando las clases contextuales.
Sintaxis:
<div class="panel panel-primary"> </div> <div class="panel panel-success"></div>
Código completo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <title>Document</title> </head> <body> <h1>Panels in Bootstrap </h1> <div class="panel panel-success"> <div class="panel-heading">This the panel heading</div> <div class="panel-body"> This is the Panel content </div> </div> <div class="panel panel-primary"> <div class="panel-heading">This the panel heading</div> <div class="panel-body"> This is the Panel content </div> </div> <div class="panel panel-info"> <div class="panel-heading">This the panel heading</div> <div class="panel-body"> This is the Panel content </div> </div> <div class="panel panel-warning"> <div class="panel-heading">This the panel heading</div> <div class="panel-body"> This is the Panel content </div> </div> <div class="panel panel-danger"> <div class="panel-heading">This the panel heading</div> <div class="panel-body"> This is the Panel content </div> </div> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> </body> </html>
Producción:
Paneles con mesas
También podemos agregar tablas dentro de un panel para darle un diseño uniforme. A continuación se muestra un fragmento de código similar:
Código:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <title>Document</title> </head> <body> <h1>Panels in Bootstrap </h1> <div class="panel panel-default"> <div class="panel-heading">This the panel heading</div> <div class="panel-body"> This is the Panel content <table class="table"> <tr> <th>Company</th> <th>Product</th> <th>Country</th> </tr> <tr> <td>Apple</td> <td>Iphone</td> <td>United States of America</td> </tr> <tr> <td>Tata</td> <td>Steel</td> <td>India</td> </tr> <tr> <td>Samsung</td> <td>Electronics Goods</td> <td>Korea</td> </tr> </table> </div> </div> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> </body> </html>
Producción:
Navegadores compatibles:
- Google Chrome
- Borde de Microsoft
- Safari
- navegador valiente
- Mozilla Firefox
- Ópera
Publicación traducida automáticamente
Artículo escrito por bhawnaatrish y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA