Muchos sitios web modernos utilizan un sistema de cuadrícula para mostrar fragmentos de datos en su página de inicio y en otras páginas. En gran medida, la cuadrícula se asemeja a una mesa, sin embargo, es mucho más atractiva visualmente y, con mayor frecuencia, muestra elementos hermanos. Una grilla debe ser responsive, es decir, debe ajustarse al tamaño de la pantalla del usuario.
Bootstrap es una biblioteca HTML , CSS y JavaScript de código abierto muy popularque ayuda a diseñar la interfaz de un sitio web. En general, el código de arranque es muy compacto y robusto, pero hay algunas razones por las que todo desarrollador debe dominar el HTML y CSS de Vanilla (personalizable):
- Muchas utilidades y componentes nunca se usan y, por lo tanto, son una carga para la página web.
- El código Bootstrap es difícil de personalizar.
- Bootstrap ralentiza un poco la descarga de sitios web porque primero carga jQuery, luego inicia CSS y luego inicia JS.
Los dos enfoques posibles para crear una cuadrícula:
1. Cuadrícula sin Bootstrap (Vanilla HTML CSS)
Código HTML: comenzamos con la definición de tres div, cada uno con la clase » customRow «. Luego cree una etiqueta img dentro de cada div customRow .
HTML
<!DOCTYPE html> <html> <head> <title>geeksforgeeks vanilla grid</title> <!-- Custom CSS Link --> <link rel="stylesheet" type="text/css" href="gfgVanillaGrid.css"> </head> <body> <!-- gfg(G),gfg(E) ... gfg(R) are images for corresponding letters --> <div class="customRow"> <!-- First Row G E E K S--> <img src="gfg(G).png" alt=""> <img src="gfg(E).png" alt=""> <img src="gfg(E).png" alt=""> <img src="gfg(K).png" alt=""> <img src="gfg(S).png" alt=""> </div> <div class="customRow"> <!-- Second Row F O R--> <img src="gfg(F).png" alt=""> <img src="gfg(O).png" alt=""> <img src="gfg(R).png" alt=""> </div> <div class="customRow"> <!-- Third Row G E E K S--> <img src="gfg(G).png" alt=""> <img src="gfg(E).png" alt=""> <img src="gfg(E).png" alt=""> <img src="gfg(K).png" alt=""> <img src="gfg(S).png" alt=""> </div> </body> </html>
Código CSS: la mayor parte del estilo está predefinido. Sin embargo, tenemos que establecer el ancho de cada imagen como un porcentaje de » customRow «, para que respondan, es decir, sus anchos varían a medida que cambia el tamaño de la pantalla. Establecemos un margen distinto de cero a las filas para que no se peguen entre sí. Por último, alineamos todas las imágenes al centro de la pantalla usando el atributo de alineación de texto .
CSS
img{
width: 14%;
}
/* 40px margin on top and bottom,
zero margin on left and right*/
.customRow{
margin: 40px 0;
text-align: center;
}
Producción:
2. Cuadrícula usando Bootstrap
Código HTML: primero, necesitamos copiar la plantilla de inicio de arranque de su sitio web oficial. Esta plantilla contiene un CDN de arranque , un CDN de jQuery , un CDN de popper.js y un archivo JavaScript de Bootstrap . Por conveniencia, lo he puesto aquí.
Luego comenzamos con la construcción de nuestra cuadrícula creando un div con el contenedor de clase. Este div envolverá todas nuestras filas, luego para cada fila:
- Crear un div con fila de clase
- Dentro de este «div de fila», cree tantos div como el número de columnas requeridas y asigne una clase de col-* a cada una de estas columnas div. Aquí el asterisco (*) se parece al ancho de la columna. El ancho total de cualquier pantalla se establece en 12, este ancho total también se divide entre las columnas de manera igual o desigual. En la primera fila, se definen cinco columnas cada una con un ancho de 2, lo que hace un total de 10, las 2 restantes (12-10) actúan como espacio en blanco.
- Luego coloque etiquetas de imagen según sea necesario
- En el centro, las imágenes en cada fila, agregue una clase de arranqueJustify -content-center a cada » fila div «.
- Coloque un enlace al archivo CSS personalizado (gfgBootstrapGrid.css aquí) en el encabezado.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <!-- Bootstrap CSS CDN --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity= "sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous" /> <!-- Custom CSS Link--> <link rel="stylesheet" href="gfgBootstrapGrid.css" /> <title>Geeksforgeeks grid with bootstrap</title> </head> <body> <!-- gfg(G),gfg(E) ... gfg(R) are images for corresponding letters --> <div class="container-fluid"> <!-- First Row G E E K S--> <div class="row justify-content-center"> <div class="col-2"> <img src="gfg(G).png" alt="" /> </div> <div class="col-2"> <img src="gfg(E).png" alt="" /> </div> <div class="col-2"> <img src="gfg(E).png" alt="" /> </div> <div class="col-2"> <img src="gfg(K).png" alt="" /> </div> <div class="col-2"> <img src="gfg(S).png" alt="" /> </div> </div> <!-- Second Row F O R--> <div class="row justify-content-center"> <div class="col-2"> <img src="gfg(F).png" alt="" /> </div> <div class="col-2"> <img src="gfg(O).png" alt="" /> </div> <div class="col-2"> <img src="gfg(R).png" alt="" /> </div> </div> <!-- Third Row G E E K S--> <div class="row justify-content-center"> <div class="col-2"> <img src="gfg(G).png" alt="" /> </div> <div class="col-2"> <img src="gfg(E).png" alt="" /> </div> <div class="col-2"> <img src="gfg(E).png" alt="" /> </div> <div class="col-2"> <img src="gfg(K).png" alt="" /> </div> <div class="col-2"> <img src="gfg(S).png" alt="" /> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src= "https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity= "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"> </script> <script src= "https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity= "sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity= "sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"> </script> </body> </html>
Código CSS: Primero debemos dar margen a cada fila, para evitar que se peguen. Para esto, agregamos la clase de fila de bootstrap y le damos un margen de «40px arriba y abajo» y «0 izquierda y derecha». También cambiamos el tamaño de cada etiqueta de imagen para adquirir el 100% de su elemento principal (aquí, la «columna div»), esto hace que las imágenes respondan
CSS
.row{
margin: 40px 0;
}
img{
width: 100%;
}
Producción:
Diferencias entre los dos enfoques:
- Como refleja el código, para proyectos pequeños (como este), el CSS personalizado es la mejor opción. Esto se debe a que se deben realizar menos clases y generalizaciones y el código está escrito específicamente para un caso de uso particular.
- Sin embargo, en el caso de un proyecto grande con muchos elementos (por ejemplo, una página de inicio de sesión, una página de registro, una página de inicio, etc.), el margen general y el relleno son siempre los mismos. Por lo tanto, usar bootstrap evitará cualquier repetición de código y, por lo tanto, es preferible.
- Como Bootstrap es una biblioteca predefinida, las posibilidades de un código con errores son muy inferiores en comparación con el CSS personalizado.