Bootstrap Sistema de Red
Bootstrap's sistema de red permite un máximo de 12 columnas en toda la página.
Si no desea utilizar toda la columna 12 individualmente, puede agrupar las columnas juntos para crear columnas más anchas:
| lapso de 1 | lapso de 1 | lapso de 1 | lapso de 1 | lapso de 1 | lapso de 1 | lapso de 1 | lapso de 1 | lapso de 1 | lapso de 1 | lapso de 1 | lapso de 1 |
| lapso de 4 | lapso de 4 | lapso de 4 | |||||||||
| lapso de 4 | lapso de 8 | ||||||||||
| lapso de 6 | lapso de 6 | ||||||||||
| lapso de 12 | |||||||||||
Bootstrap's sistema de red es sensible, y las columnas se volverá a organizar de forma automática en función del tamaño de la pantalla.
Las clases de cuadrícula
El Bootstrap sistema de red tiene cuatro clases:
- xs (para móviles)
- sm (para comprimidos)
- md (para equipos de sobremesa)
- lg (para equipos de sobremesa más grandes)
Las clases anteriores se pueden combinar para crear diseños más dinámica y flexible.
Estructura básica de un Bootstrap cuadrícula
La siguiente es una estructura básica de una Bootstrap de rejilla:
<div
class="row">
<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"> ). A continuación, añadir el número deseado de columnas (con etiquetas apropiadas .col-*-* clases). Tenga en cuenta que los números en .col-*-* siempre deben agregar hasta 12 para cada fila.
A continuación hemos recopilado algunos ejemplos de básicos Bootstrap diseños de cuadrícula.
Tres columnas iguales
El siguiente ejemplo muestra cómo obtener unas tres columnas de igual anchura a partir de tabletas y escalada a las grandes computadoras de escritorio. En los teléfonos móviles, las columnas se apilan 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> Inténtalo tú mismo " Dos columnas desiguales
El siguiente ejemplo muestra cómo obtener dos columnas diferentes de ancho a partir de las tabletas y escalar a grandes equipos de sobremesa:
Ejemplo
<div class="row">
<div
class="col-sm-4">.col-sm-4</div>
<div
class="col-sm-8">.col-sm-8</div>
</div> Inténtalo tú mismo " Consejo: Usted aprenderá más sobre Bootstrap rejillas más adelante en este tutorial.