Sistema de cuadrícula Bootstrap
Sistema de cuadrícula Bootstrap
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.
Consejo: recuerda que las columnas de la cuadrícula deben sumar doce por fila. Más que eso, las columnas se apilarán sin importar la ventana gráfica.
Clases de cuadrícula
El sistema de cuadrícula Bootstrap tiene cuatro clases:
xs(para teléfonos: pantallas de menos de 768 px de ancho)sm(para tabletas - pantallas iguales o mayores a 768px de ancho)md(para portátiles pequeños - pantallas iguales o superiores a 992 px de ancho)lg(para computadoras portátiles y de escritorio: pantallas iguales o superiores a 1200 px de ancho)
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 xs y sm, solo necesita especificar xs.
Reglas del sistema de red
Algunas reglas del sistema de cuadrícula Bootstrap:
- 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
Estructura básica de una cuadrícula Bootstrap
La siguiente es una estructura básica de una grilla Bootstrap:
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
</div>
Entonces, para crear el diseño que desea, cree un contenedor ( <div
class="container">). A continuación, cree una fila ( <div
class="row">). Luego, agregue el número deseado de columnas (etiquetas con las
.col-*-*clases apropiadas). Tenga en cuenta que los números .col-*-*siempre deben sumar 12 para cada fila.
Opciones de cuadrícula
La siguiente tabla resume cómo funciona el sistema de cuadrícula Bootstrap en varios dispositivos:
| Extra small <768px |
Small >=768px |
Medium >=992px |
Large >=1200px |
|
|---|---|---|---|---|
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Suitable for | Phones | Tablets | Small Laptops | Laptops & Desktops |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| # of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| 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) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
Ejemplos
Los siguientes capítulos muestran ejemplos de sistemas de rejilla para diferentes dispositivos:
- Apilado a horizontal
- Dispositivos pequeños
- Dispositivos medianos
- Dispositivos grandes
- Más ejemplos de grillas