Ejemplos de cuadrícula Bootstrap
Diseños de cuadrícula básicos para que se familiarice con la construcción dentro del sistema de cuadrícula Bootstrap.
En estos ejemplos, la .themed-grid-col
clase se agrega a las columnas para agregar algo de tematización. Esta no es una clase que esté disponible en Bootstrap de forma predeterminada.
Cinco niveles de cuadrícula
Hay cinco niveles en el sistema de cuadrícula Bootstrap, uno para cada rango de dispositivos que admitimos. Cada nivel comienza con un tamaño mínimo de ventana gráfica y se aplica automáticamente a los dispositivos más grandes, a menos que se anule.
Tres columnas iguales
Obtenga tres columnas de igual ancho comenzando en los escritorios y escalando a escritorios grandes . En dispositivos móviles, tabletas e inferiores, las columnas se apilarán automáticamente.
Alternativa de tres columnas iguales
Al usar las .row-cols-*
clases, puede crear fácilmente una cuadrícula con columnas iguales.
.col
niño de
.row-cols-md-3
.col
niño de
.row-cols-md-3
.col
niño de
.row-cols-md-3
Tres columnas desiguales
Obtenga tres columnas comenzando en los escritorios y escalando a escritorios grandes de varios anchos. Recuerde, las columnas de la cuadrícula deben sumar doce para un solo bloque horizontal. Más que eso, y las columnas comienzan a apilarse sin importar la ventana gráfica.
Dos columnas
Obtenga dos columnas comenzando en los escritorios y escalando a escritorios grandes .
Ancho completo, columna única
No se necesitan clases de cuadrícula para elementos de ancho completo.
Dos columnas con dos columnas anidadas
Según la documentación, anidar es fácil: simplemente coloque una fila de columnas dentro de una columna existente. Esto le brinda dos columnas que comienzan en los escritorios y se escalan a escritorios grandes , con otras dos (anchos iguales) dentro de la columna más grande.
En tamaños de dispositivos móviles, tabletas y menos, estas columnas y sus columnas anidadas se apilarán.
Mixto: móvil y escritorio
El sistema de cuadrícula Bootstrap v4 tiene cinco niveles de clases: xs (extra pequeño, este infijo de clase no se usa), sm (pequeño), md (mediano), lg (grande) y xl (extra grande). Puede usar casi cualquier combinación de estas clases para crear diseños más dinámicos y flexibles.
Cada nivel de clases se amplía, lo que significa que si planea establecer los mismos anchos para md, lg y xl, solo necesita especificar md.
Mixto: móvil, tableta y escritorio
canalones
Con .gx-*
clases, las canaletas horizontales se pueden ajustar.
.col
con
.gx-4
canalones
.col
con
.gx-4
canalones
.col
con
.gx-4
canalones
.col
con
.gx-4
canalones
.col
con
.gx-4
canalones
.col
con
.gx-4
canalones
Usa las .gy-*
clases para controlar las canaletas verticales.
.col
con
.gy-4
canalones
.col
con
.gy-4
canalones
.col
con
.gy-4
canalones
.col
con
.gy-4
canalones
.col
con
.gy-4
canalones
.col
con
.gy-4
canalones
Con .g-*
clases, las canaletas en ambas direcciones se pueden ajustar.
.col
con
.g-3
canalones
.col
con
.g-3
canalones
.col
con
.g-3
canalones
.col
con
.g-3
canalones
.col
con
.g-3
canalones
.col
con
.g-3
canalones
Contenedores
Las clases adicionales agregadas en Bootstrap v4.4 permiten contenedores que tienen un 100 % de ancho hasta un punto de interrupción particular. v5 agrega un nuevo punto de xxl
interrupción.