Sistema de cuadrícula Bootstrap4
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 4 es responsivo; las columnas se reorganizan automáticamente según el tamaño de la pantalla.
Clases de cuadrícula
El sistema de cuadrícula de Bootstrap 4 tiene las siguientes 5 clases:
- .col- para todos los dispositivos
- .col-sm- tabletas: ancho de pantalla igual o mayor que 576px
- .col-md- monitores de escritorio: ancho de pantalla igual o mayor que 768px
- .col-lg- monitores de escritorio grandes: ancho de pantalla igual o mayor que 992px
- .col-xl- monitores de escritorio extra grandes: ancho de pantalla igual o mayor que 1200px
Reglas del sistema de cuadrícula
Reglas del sistema de cuadrícula de Bootstrap4:
- Cada fila de la cuadrícula debe colocarse en un contenedor que tenga la clase
.container(ancho fijo) o.container-fluid(ancho completo). De esta manera se establecen automáticamente algunos márgenes y rellenos. - Usa filas para crear grupos horizontales de columnas.
- El contenido debe colocarse en columnas, y solo las columnas pueden ser hijos directos de una fila.
- Clases predefinidas como.rowy.col-sm-4se pueden usar para crear rápidamente diseños de cuadrícula.
- Las columnas crean la separación entre sus contenidos mediante el relleno. Esta separación se logra a través de.rowslos márgenes negativos en la clase, que establecen 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 configurarlo.
- La mayor diferencia entre Bootstrap 3 y Bootstrap 4 es que Bootstrap 4 ahora usa flexbox en lugar de flotadores. Una gran ventaja de Flexbox es que las columnas de cuadrícula sin ancho especificado se configurarán automáticamente comocolumnas de igual ancho y altura.Si desea obtener más información sobre Flexbox, puede leer nuestroTutorial de CSS Flexbox. 。
La siguiente tabla resume cómo funciona el sistema de cuadrícula de Bootstrap en diferentes dispositivos:
| Dispositivos extra pequeños <576px |
Tabletas ≥576px |
Monitores de escritorio ≥768px |
Monitores de escritorio grandes ≥992px |
Monitores de escritorio extra grandes ≥1200px |
|
|---|---|---|---|---|---|
| Ancho máximo del contenedor | None (auto) | 540px | 720px | 960px | 1140px |
| Prefijo de clase | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Número de columnas y | 12 | ||||
| ancho del espacio | 30px (15px a cada lado de una columna) | ||||
| Anidable | Yes | ||||
| Ordenamiento de columnas | Yes | ||||
Las siguientes clases se pueden usar juntas para crear diseños de página más flexibles.
Estructura básica de la cuadrícula Bootstrap 4
El siguiente código es la estructura básica de la cuadrícula de Bootstrap 4:
Estructura básica de cuadrícula Bootstrap4
Primer ejemplo: cree una fila (<div class="row">). Luego, agregue las columnas necesarias (.col-*-*establecer en la clase). El primer asterisco (*) indica el dispositivo responsivo: sm, md, lg o xl, y el segundo asterisco (*) indica un número; los números de la misma fila suman 12.
Segundo ejemplo: no agregue números a cadacol, deje que Bootstrap maneje automáticamente el diseño; cada columna de la misma fila tendrá el mismo ancho: dos"col", cada una será del 50% del ancho. Tres"col", cada una será del 33.33% del ancho. Cuatro"col", cada una será del 25% del 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ébalo »
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 que 576px, las cuatro columnas se apilarán verticalmente.:
Ejemplo
Pruébalo »
Columnas responsivas de ancho desigual
El siguiente ejemplo muestra cómo crear columnas responsivas de ancho desigual en tabletas y pantallas más grandes.En dispositivos móviles, es decir, cuando el ancho de pantalla es menor que 576px, las dos columnas se apilarán verticalmente.:
Ejemplo
Pruébalo »
Tabletas y escritorio
El siguiente ejemplo muestra que en los monitores de escritorio las dos columnas ocupan cada una el 50% del ancho; en tabletas, la columna izquierda ocupa el 25% y la derecha el 75%. En dispositivos pequeños como teléfonos móviles, se apilan.
Ejemplo
Pruébalo »
Tabletas, escritorio, monitores de escritorio grandes, monitores de escritorio extra grandes
En el siguiente ejemplo, la proporción de ancho en tabletas, escritorio, monitores de escritorio grandes y monitores de escritorio extra grandes es respectivamente: 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ébalo »
Desplazamiento de columnas
El desplazamiento de columnas se establece mediante las clasesoffset-*-*clase. El primer asterisco (*) puede sersm、md、lg、xl, que indica el tipo de dispositivo de pantalla; el segundo asterisco (*) puede ser1llegar11un número de.
Para usar el desplazamiento en monitores de pantalla grande, use las clases.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ébalo »