Bootstrap 5 Sistema de cuadrícula | Explicado
Sistema de red
El sistema de cuadrícula de Bootstrap divide la página en 12 columnas. Como en el ejemplo a continuación .La clase col se usa para hacer columnas y todo el sistema de la cuadrícula depende de esto .clase de colmena. Este sistema de cuadrícula es el mejor enfoque para apilar el contenido horizontalmente y permitir que la utilización de la página sea máxima.
Código
.columna
.columna
.columna
.columna
.columna
.columna
.columna
.columna
.columna
.columna
.columna
.columna
Para hacer diferentes diseños que usamos .fila y .columna clase.
Clase cols sin ningún tamaño
Si no especificó el tamaño de las columnas, .columna La clase divide automáticamente la fila por igual de acuerdo con el número de divs con .columna clases en él.
Código
.columna
.columna
.columna
En este ejemplo solo agrego tres divs con el .columna clase sin especificar el número de columnas pero el .columna La clase proporciona automáticamente la fusión de 4 columnas a cada DIV y cubre 12 columnas colectivamente.
COL CLASS CON TAMAÑO
Si se especifican los tamaños de las columnas, entonces .Col Class divide la fila de acuerdo con el tamaño especificado de 0-12.
Código
.Col-4
.Col-6
.Col-2
En este ejemplo agrego tres divs con .columna clase y especifique el número de columnas como 4, 6 y 2. Ahora estas tres columnas todavía cubren el espacio de 12 columnas pero ahora con diferentes tamaños. Esto ayuda a un usuario a administrar el contenido en una página y utilizarlo al máximo.
Ejemplo 2
Este ejemplo es para el problema en el que el tamaño de los divs excede los 12.
Código
.Col-4
.Col-6
.Col-5
Ahora, en este ejemplo, los primeros 2 divs ya cubren 10 columnas en una fila, dejando el espacio para dos columnas más, pero el tercer div viene con las columnas tamaño 5, lo que resulta en mover el tercer div a la siguiente fila para cubrir 5 columnas que deja Espacio de 2 columnas en la primera fila vacía. Entonces, para evitar este tipo de problema, siempre asegúrese de dividir las columnas de una manera que cubra el espacio de 12 columnas colectivamente en una fila.
Clase col con puntos de descanso
.columna La clase también se usa con diferentes puntos de interrupción para controlar la vista de contenido en diferentes pantallas.
- .col-xxl
- .col-xl
- .COL-LG
- .Col-MD
- .Col-SM
Código
.Col-MD
.Col-MD
.Col-MD
En el ejemplo anterior se crean tres divs usando .Col-MD La clase es actuar como .columna clase pero la diferencia entre simple .columna clase y .Col-MD la clase es que .columna La clase distribuye columnas por igual a cada DIV, luego actúe lo mismo en cada tamaño de pantalla pero pero .Col-MD La clase también distribuye columnas por igual entre cada DIV, pero solo sigue siendo las mismas en XXL, XL, LG y Maryland Tamaños de pantalla, pero tan pronto como va por debajo del tamaño de la pantalla media, todas las divs cubren 12 columnas enteras cada una, que resultan en hacer tres filas y apilarlas verticalmente.
Clase col con puntos de descanso y tamaños
.columna La clase también se usa con diferentes puntos de interrupción para controlar la vista de contenido en diferentes pantallas, pero para ver estas clases en acción también debe especificar sus tamaños.
- .columna-*
- .col-xxl-*
- .col-xl-*
- .col-lg-*
- .Col-MD-*
- .col-sm-*
Reemplazar * con el número de 0-12.
Código
.Col-MD-4
.Col-MD-6
.Col-MD-2
En el ejemplo anterior, aplico .Col-MD-* Clase en tres divs con el tamaño 4,6,2, como demostró que esta clase es aplicable en pantalla de doble extra grande (xxl), extra grande (xl), grande (LG) y mediano (MD) tan pronto como el tamaño de la pantalla Va por debajo de la pantalla Medium (MD) Todos los DIV cambian de su tamaño y cubren 12 columnas cada una, que resultan en 3 filas y cada fila se apila verticalmente. Así es como se crean los diseños dinámicos y flexibles.
Conclusión
Para trabajar en una cuadrícula de bootstrap, use .fila clase y envuélvalo .columna clase Si desea asignar columnas iguales a cada DIV, pero si desea asignar diferentes números de columnas a cada DIV, use .Col- tamaño (0-12) a los divs como su requisito. Sin embargo, si desea hacer un uso más flexible y dinámico .columna clase con puntos de interrupción (xxl/xl/lg/md/sm), Además, especifique sus tamaños (0-12) también .Col- punto de interrupción-tamaño.