Cuadrículas de arranque
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 automáticamente según el tamaño de la pantalla.
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.
Estructura básica de una cuadrícula Bootstrap
La siguiente es una estructura básica de una grilla Bootstrap:
<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>
Primero; crear 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.
A continuación, hemos recopilado algunos ejemplos de diseños de cuadrícula básicos de Bootstrap.
tres columnas iguales
El siguiente ejemplo muestra cómo obtener tres columnas de igual ancho comenzando en tabletas y escalando a escritorios grandes. En teléfonos móviles o pantallas de menos de 768 px de ancho, las columnas se apilarán automáticamente:
Ejemplo
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Dos columnas desiguales
El siguiente ejemplo muestra cómo obtener dos columnas de varios anchos comenzando en tabletas y escalando a escritorios grandes:
Ejemplo
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Sugerencia: aprenderá más sobre las cuadrículas de Bootstrap más adelante en este tutorial.