Bootstrap es una herramienta gratuita de código abierto para diseñar sitios web y aplicaciones web modernos y receptivos. Es la herramienta más popular para desarrollar sitios web que respondan y también sean hermosos. Los paneles Bootstrap son cajas con o sin borde. Es posible que desee poner su contenido dentro de algunas cajas para un diseño único. Entonces, en este artículo, aprenderemos cómo implementar un panel en nuestro sitio web y también cómo personalizarlo.
Enfoque: crearemos un elemento div y usaremos las clases .panel y .panel-default para crear un panel. El .panel-default crea un panel con un borde alrededor del contenido colocado dentro del contenedor div. Luego implementaremos título y pie de página usando las clases .panel-title y .panel-footer respectivamente. Se colocarán dentro del contenedor div .
Importe el CDN de Bootstrap CSS en nuestro proyecto entre las etiquetas de encabezado.
<enlace rel=”hoja de estilo” href=”https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
Sintaxis: Cree un elemento div y use la clase .panel y .panel-default. Luego coloque otro elemento div con .panel-body dentro de eso.
<div class="panel panel-default">
<div class="panel-body">Welcome</div>
</div>
Para cambiar el color, podemos usar los otros formatos de paneles como
- predeterminado del panel
- panel-primario
- éxito del panel
- panel de advertencia
- información del panel
- panel-peligro
Ejemplo: ahora crearemos un encabezado de panel, un título de panel y un pie de página de panel usando la clase .panel-heading .panel-title y un pie de página usando la clase .panel-footer. Generalmente, la jerarquía de colocación de los elementos es primero el encabezado, luego el cuerpo y el pie de página. Dentro del cuerpo del panel, colocamos el título y el contenido del panel.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> </head> <body> <h2>GeeksforGeeks</h2> <div class="panel panel-default"> <div class="panel-heading">Welcome</div> <div class="panel-body"> <div class="panel-title">Welcome</div> <div> GeeksforGeeks is the best website for programming. </div> </div> <div class="panel-footer">Footer</div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA