Comprensión de los números en las clases de Bootstrap Grid: col-md-4, col-xs-1, col-lg-2

El El marco Bootstrap presenta un sistema de cuadrícula robusto que facilita la creación de diseños receptivos. Una parte integral de este sistema son las clases con el formato col-*, donde el asterisco representa un número. Estos números desempeñan un papel crucial a la hora de determinar cómo se alinean los elementos dentro de una cuadrícula y cómo responden a diferentes tamaños de pantalla.

¿Cómo se alinean los números de las cuadrículas?

Los El número en una clase col-* representa la porción del ancho disponible que debe ocupar el elemento asociado. El ancho total de una fila de la cuadrícula se divide en 12 columnas, y el número en la clase indica el número de columnas que abarcará el elemento.

Por ejemplo, col-4 significa que el elemento abarcará 4 columnas , o 1/3 del ancho disponible. col-12 abarcará todo el ancho y ocupará las 12 columnas.

Cómo usar los números

Para usar estas clases, simplemente asígnalas a elementos dentro de un fila de la cuadrícula. Por ejemplo, para crear dos columnas del mismo ancho dentro de una fila, usaría:

Column 1
Column 2

Para crear tres columnas de ancho desigual, puede usar:

Column 1
Column 2
Column 3

¿Qué representan los números?

Más allá de los números en sí, es importante tener en cuenta la prefijos que se les aplican. En Bootstrap, estos prefijos representan diferentes tamaños de pantalla:

• xs: extra pequeño (dispositivos móviles)
• sm: pequeño (tabletas)
• md: mediano (computadores de escritorio) )
• lg: Grande (escritorios más grandes)

Al asignar múltiples clases col-* a un elemento, puede controlar cómo se comporta en cada uno de estos tamaños de pantalla. Por ejemplo, col-6 col-sm-4 significa que el elemento abarcará la mitad del ancho en pantallas móviles y 1/3 del ancho en tabletas y computadoras de escritorio.

Conclusión

Comprender los números y prefijos en las clases de cuadrícula de Bootstrap es esencial para crear diseños web responsivos y adaptables. Al aprovechar las clases col-* de manera efectiva, los desarrolladores pueden asegurarse de que sus diseños respondan sin problemas a diferentes tamaños de pantalla, brindando una experiencia de usuario consistente en todos los dispositivos.