Sistema de cuadrícula Bootstrap 4
Sistema de cuadrícula Bootstrap 4
El sistema de cuadrícula de Bootstrap permite hasta 12 columnas en la página.
Si no desea usar las 12 columnas individualmente, puede agrupar las columnas para crear columnas más anchas:
| lapso 1 | lapso 1 | lapso 1 | lapso 1 | lapso 1 | lapso 1 | lapso 1 | lapso 1 | lapso 1 | lapso 1 | lapso 1 | lapso 1 |
| lapso 4 | lapso 4 | lapso 4 | |||||||||
| lapso 4 | lapso 8 | ||||||||||
| lapso 6 | lapso 6 | ||||||||||
| lapso 12 | |||||||||||
El sistema de cuadrícula de Bootstrap responde y las columnas se reorganizarán según el tamaño de la pantalla: en una pantalla grande, podría verse mejor con el contenido organizado en tres columnas, pero en una pantalla pequeña sería mejor si los elementos de contenido estuvieran apilados. Encima del otro.
Clases de cuadrícula
El sistema de cuadrícula Bootstrap 4 tiene cinco clases:
.col-(dispositivos extrapequeños: ancho de pantalla inferior a 576 px).col-sm-(dispositivos pequeños - ancho de pantalla igual o mayor a 576px).col-md-(dispositivos medianos - ancho de pantalla igual o mayor a 768px).col-lg-(dispositivos grandes - ancho de pantalla igual o mayor a 992px).col-xl-(dispositivos extragrandes: ancho de pantalla igual o superior a 1200 px)
Las clases anteriores se pueden combinar para crear diseños más dinámicos y flexibles.
Sugerencia: cada clase se amplía, por lo que si desea establecer los mismos anchos para
smy md, solo necesita especificar sm.
Reglas del sistema de red
Algunas reglas del sistema de cuadrícula de Bootstrap 4:
- Las filas deben colocarse dentro de un
.container(ancho fijo) o.container-fluid(ancho completo) para una alineación y relleno adecuados - Use filas para crear grupos horizontales de columnas
- El contenido debe colocarse dentro de las columnas, y solo las columnas pueden ser elementos secundarios inmediatos de las filas.
- Las clases predefinidas como
.rowy.col-sm-4están disponibles para hacer diseños de cuadrícula rápidamente - Las columnas crean medianeras (espacios entre el contenido de la columna) a través del relleno. Ese relleno se compensa en filas para la primera y la última columna a través de un margen negativo en
.rows - Las columnas de cuadrícula se crean especificando el número de 12 columnas disponibles que desea abarcar. Por ejemplo, tres columnas iguales usarían tres
.col-sm-4 - Los anchos de columna están en porcentaje, por lo que siempre son fluidos y tienen un tamaño relativo a su elemento principal
- La mayor diferencia entre Bootstrap 3 y Bootstrap 4 es que Bootstrap 4 ahora usa flexbox, en lugar de flotadores. Una gran ventaja con flexbox es que las columnas de la cuadrícula sin un ancho específico se diseñarán automáticamente como "columnas de igual ancho" (e igual altura). Ejemplo: tres elementos con
.col-smtendrán cada uno automáticamente un ancho del 33,33 % desde el punto de ruptura pequeño en adelante. Sugerencia: si desea obtener más información sobre Flexbox, puede leer nuestro Tutorial de CSS Flexbox .
Tenga en cuenta que Flexbox no es compatible con IE9 y versiones anteriores.
Si necesita compatibilidad con IE8-9, use Bootstrap 3. Es la versión más estable de Bootstrap y el equipo aún la admite para correcciones de errores críticos y cambios en la documentación. Sin embargo, no se le agregarán nuevas funciones.
Estructura básica de una cuadrícula Bootstrap 4
La siguiente es una estructura básica de una grilla Bootstrap 4:
<!-- Control the column width, and how they should appear on different
devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
Primer ejemplo: crear una fila ( <div
class="row">). Luego, agregue el número deseado de columnas (etiquetas con las
.col-*-*clases apropiadas). La primera estrella (*) representa la capacidad de respuesta: sm, md, lg o xl, mientras que la segunda estrella representa un número, que siempre debe sumar 12 para cada fila.
Segundo ejemplo: en lugar de agregar un número a cada uno col, deje que Bootstrap maneje el diseño, para crear columnas de igual ancho: dos "col"elementos = 50% de ancho para cada columna. tres columnas = 33,33% de ancho para cada columna. cuatro columnas = 25% de ancho, etc. También puede usar .col-sm|md|lg|xlpara hacer que las columnas respondan.
Opciones de cuadrícula
La siguiente tabla resume cómo funciona el sistema de cuadrícula Bootstrap 4 en diferentes tamaños de pantalla:
| Extra small (<576px) | Small (>=576px) | Medium (>=768px) | Large (>=992px) | Extra Large (>=1200px) | |
|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 540px | 720px | 960px | 1140px |
| Suitable for | Portrait phones | Landscape phones | Tablets | Laptops | Laptops and Desktops |
| # of columns | 12 | 12 | 12 | 12 | 12 |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes | Yes |
Ejemplos
Los siguientes capítulos muestran ejemplos de sistemas de cuadrícula para diferentes dispositivos y anchos de pantalla:
- Apilado a horizontal
- Diseño extrapequeño
- Dispositivos pequeños
- Dispositivos medianos
- Dispositivos grandes
- Dispositivos extra grandes
- Más ejemplos de grillas