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 re-ordenar en función del tamaño de la pantalla: en una pantalla grande que puede verse mejor con el contenido organizado en tres columnas, pero en una pantalla pequeña que sería mejor si se apilan los elementos de contenido Encima del otro.
Consejo: Recuerde que las columnas de la cuadrícula debe añadir hasta doce para una fila. Más que eso, las columnas se apilarán sin importar la viewport .
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.
Consejo: Cada clase se amplía hasta, por lo que si desea ajustar los mismos anchos de xs y sm , sólo se necesita especificar xs .
Reglas del sistema de cuadrícula
Algunos Bootstrap las reglas del sistema de cuadrícula:
- Las filas deben ser colocados dentro de un
.container(ancho fijo) o.container-fluid(ancho completo) para la alineación y el acolchado apropiado - Utilice filas horizontales para crear grupos de columnas
- El contenido debe ser colocado dentro de las columnas y columnas sólo puede ser hijos inmediatos de filas
- Clases predefinidas como
.rowy.col-sm-4están disponibles para hacer rápidamente diseños de cuadrícula - Columnas crean las canaletas (brechas entre el contenido de la columna) a través de relleno. Que el relleno se compensa en filas para la primera y última columna a través de margen negativo en
.rows - columnas de la cuadrícula se crean especificando el número de 12 columnas disponibles que desea trocear. Por ejemplo, tres columnas iguales usarían tres
.col-sm-4
Estructura básica de un Bootstrap cuadrícula
La siguiente es una estructura básica de una Bootstrap de rejilla:
<div class="container">
<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>
</div> Por lo tanto, para crear el diseño que desee, crear un contenedor ( <div class="container"> ). A continuación, cree 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.
Opciones de cuadrícula
La siguiente tabla resume cómo el Bootstrap sistema de red funciona a través de múltiples dispositivos:
| Extra small devices Phones (<768px) |
Small devices Tablets (>=768px) |
Medium devices Desktops (>=992px) |
Large devices Desktops (>=1200px) |
|
|---|---|---|---|---|
| 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 |
| Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Number 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
En los siguientes capítulos se muestran ejemplos de sistemas de red para diferentes dispositivos: