Sistema de cuadrícula Bootstrap5
Bootstrap proporciona un sistema de cuadrícula fluido, responsivo y prioritario para dispositivos móviles. A medida que aumenta el tamaño de la pantalla o viewport, el sistema se divide automáticamente en hasta 12 columnas.
También podemos definir el número de columnas según nuestras necesidades:
| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| 4 | 4 | 4 | |||||||||
| 4 | 8 | ||||||||||
| 6 | 6 | ||||||||||
| 12 | |||||||||||
El sistema de cuadrícula de Bootstrap 5 es responsivo y las columnas se reorganizan automáticamente según el tamaño de la pantalla.
Asegúrese de que la suma de las columnas en cada fila sea igual o menor que 12.
Clases de cuadrícula
El sistema de cuadrícula de Bootstrap 5 tiene las siguientes 6 clases:
- .col- para todos los dispositivos.
- .col-sm- tableta: ancho de pantalla igual o mayor a 576px.
- .col-md- monitor de escritorio: ancho de pantalla igual o mayor a 768px.
- .col-lg- monitor de escritorio grande: ancho de pantalla igual o mayor a 992px.
- .col-xl- monitor de escritorio muy grande: ancho de pantalla igual o mayor a 1200px.
- .col-xxl- monitor de escritorio extragrande: ancho de pantalla igual o mayor a 1400px.
Reglas del sistema de cuadrícula
Reglas del sistema de cuadrícula Bootstrap5:
- Cada fila de la cuadrícula debe colocarse en un contenedor con la clase
.container(ancho fijo) o.container-fluid(ancho completo), para que se establezcan automáticamente algunos márgenes exteriores e interiores. - Use filas para crear grupos horizontales de columnas.
- El contenido debe colocarse dentro de las columnas, y solo las columnas pueden ser hijas directas de las filas.
- Clases predefinidas como.rowy.col-sm-4se pueden usar para crear rápidamente diseños de cuadrícula.
- Las columnas crean espacios entre sus contenidos mediante el padding. Este espacio se ajusta con.rowsmárgenes negativos en la clase para compensar el desplazamiento de la primera y la última columna.
- Las columnas de la cuadrícula se crean abarcando las 12 columnas especificadas. Por ejemplo, para crear tres columnas iguales, se necesitan tres.col-sm-4para configurarlas.
- Bootstrap 5 y Bootstrap 4 usan flexbox (caja flexible) en lugar de flotadores. Una gran ventaja de Flexbox es que las columnas de cuadrícula sin ancho especificado se establecen automáticamente comocolumnas de igual ancho y altura. Si desea obtener más información sobre Flexbox, puede consultar nuestrotutorial de CSS Flexbox 。
La siguiente tabla resume cómo funciona el sistema de cuadrícula de Bootstrap en diferentes dispositivos:
| Dispositivos muy pequeños <576px |
Tableta ≥576px |
Monitor de escritorio ≥768px |
Monitor de escritorio grande ≥992px |
Monitor de escritorio muy grande ≥1200px |
Monitor de escritorio extragrande ≥1400px |
|
|---|---|---|---|---|---|---|
| Ancho máximo del contenedor | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Prefijo de clase | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| Número de columnas y | 12 | |||||
| Ancho del espacio | 1.5rem (.75rem a cada lado de una columna) | |||||
| Se puede anidar | Yes | |||||
| Orden de columnas | Yes | |||||
Combinamos las clases anteriores para crear diseños de página más flexibles.
Consejo:Cada clase se amplía proporcionalmente, así que si desea que sm y md tengan el mismo ancho, solo necesita especificar sm.
Estructura básica de la cuadrícula de Bootstrap 5
El siguiente código es la estructura básica de la cuadrícula de Bootstrap 5:
Estructura básica de la cuadrícula Bootstrap5
Primer ejemplo: crear una fila (<div class="row">). Luego, agregue las columnas necesarias (.col-*-*se establece en la clase). El primer asterisco (*) indica el dispositivo responsivo: sm, md, lg o xl; el segundo asterisco (*) indica un número, y los números de la misma fila suman 12.
Segundo ejemplo: no agregue números a cadacoly deje que Bootstrap maneje automáticamente el diseño; cada columna de la misma fila tendrá el mismo ancho: dos"col", cada una tendrá un 50% de ancho. Tres"col", cada una tendrá un 33.33% de ancho; cuatro"col", cada una tendrá un 25% de ancho, y así sucesivamente. Del mismo modo, puede usar.col-sm|md|lg|xlpara establecer las reglas responsivas de las columnas.
A continuación podemos ver ejemplos.
Crear columnas de igual ancho, diseño automático de Bootstrap
Ejemplo
Pruébelo »
Columnas responsivas de igual ancho
El siguiente ejemplo muestra cómo crear columnas responsivas de igual ancho en tabletas y pantallas más grandes.En dispositivos móviles, es decir, cuando el ancho de pantalla es menor a 576px, las cuatro columnas se apilarán verticalmente.:
Ejemplo
Pruébelo »
Columnas responsivas de ancho variable
El siguiente ejemplo muestra cómo crear columnas responsivas de ancho variable en tabletas y pantallas más grandes.En dispositivos móviles, es decir, cuando el ancho de pantalla es menor a 576px, las dos columnas se apilarán verticalmente.:
Ejemplo
Pruébelo »
Establecer el ancho de una columna
Si solo se establece el ancho de una columna, las demás columnas dividirán automáticamente el ancho restante. El siguiente ejemplo establece los anchos de columna en 25%, 50%, 25%:
Ejemplo
Pruébelo »
Tableta y escritorio
El siguiente ejemplo muestra que en monitores de escritorio dos columnas ocupan cada una el 50% del ancho; en tableta, la columna izquierda ocupa el 25% y la derecha el 75%; en dispositivos pequeños como teléfonos móviles, se apilan.
Ejemplo
Pruébelo »
Tableta, escritorio, monitor de escritorio grande, monitor de escritorio extragrande
El siguiente ejemplo tiene proporciones de ancho en tableta, escritorio, monitor de escritorio grande y monitor de escritorio extragrande de: 25%/75%, 50%/50%, 33.33%/66.67%, 16.67%/83.33%; en dispositivos pequeños como teléfonos móviles, se apilan.
Ejemplo
Pruébelo »
Columnas anidadas
El siguiente ejemplo crea un diseño de dos columnas, donde una columna contiene otras dos columnas anidadas:
Ejemplo
Pruébelo »
Desplazamiento de columnas
Las columnas desplazadas se establecen mediante laoffset-*-*clase. El primer asterisco (*) puede sersm、md、lg、xl, que indica el tipo de dispositivo de pantalla; el segundo asterisco (*) puede ser un1llegar11número.
Para usar el desplazamiento en monitores de pantalla grande, utilice la.offset-md-*clase. Estas clases aumentan el margen izquierdo de una columna en*columnas, donde*el rango es de1llegar11。
Por ejemplo: .offset-md-4 desplaza .col-md-4 cuatro columnas hacia la derecha.
Ejemplo
Pruébelo »