Bootstrap: entender el modelo de rejilla (II)

Anchura total de la página con Bootstrap: ¿100% o limitada?

En muchas ocasiones, hacer RESPONSIVE una página no quiere decir hacer que ocupe el 100% de la anchura de cualquier monitor en el que se vaya a mostrar, sino que existe la tendencia a interrumpir el escalado al llegar a cierto tamaño, de modo que en monitores de 1600 ó 1920 pixels de resolución (que ya hay bastantes) veremos espacio vacío a izquierda y derecha. Tenemos tres posibilidades:

• Utilizar una anchura limitada (nada rebasa esa anchura)
• Utilizar el 100% de la anchura del monitor para todo el contenido
• Utilizar el 100% de la anchura del moniotor sólo para distribuir “bandas” de visualización (con fondos que ocupen el ancho total) y luego dentro de esos fondos ya acotar el contenido a una anchura limitada

Gestionar cual de estos modelos queremos utilizar será muy sencillo en Bootstrap, puesto que nos ofrece dos estilos que nos permiten realizar las 3 combinaciones:

Utilizar una anchura limitada:

<div class=”container”> aquí nuestros contenidos acotados en anchura </div>

Utilizar anchura completa para todo el contenido:

<div class=”container-fluid”> aquí nuestros contenidos al 100% de página </div>

Y si queremos combinar ambas opciones podremos hacer esto:

<div class=”container-fluid”>
<div class=”container”> aquí nuestros contenidos </div>
</div>

Anchuras de página para diferentes resoluciones

Hablamos del caso en que estamos utilizando containers de anchura limitada, y no al 100%. ¿A cuánto está limitada esa anchura? Bootstrap establece 4 tamaños diferentes de pantalla, con sus correspondientes tres puntos de corte:

• Pantallas grandes (lo que llaman LG) a partir de 1200 pixels
• Pantlallas medias (serán las MD) a partir de 992 pixels
• Pantallas tipo tablet (las SM) a partir de 768 pixels
• Pantallas móviles (o pantallas XS), por debajo de esa cifra.

De tal manera, si estamos utilizando containers de anchura limitada, sabemos que estos medirán como mucho 1200 pixels en pantallas grandes, y el 100% de la anchura de pantalla en cualquier pantalla menor de esa resolución.

Esto se parece un poco a lo que se venía haciendo antes de la época del diseño web Responsive, con el layout típico de 960pixels: sabíamos que esa era la anchura máxima, y con pantallas por debajo de eso (barras de scroll aparte) habría scroll horizontal. Aquí la diferencia es que no hay nunca scroll horizontal. Por debajo de 1200, estaremos siempre usando el 100% de pantalla y los elementos se moverán de sitio o se escalarán. El siguiente paso es ver cómo lo hacen.

El modelo de rejilla de 12 columnas de Bootstrap

Básicamente, lo que hace Bootstrap es definir un modelo de divisor horizontal (una fila) divisible en 12 columnas. Pero con la ventaja de que podemos decir cuantas hay en cada resolución de pantalla. Esto es muy fácil de entender con un ejemplo simple: pensemos en una serie de bloques (imagenes, divisores.. lo que sea) que cuando estamos en pantalla LG (más de 1200 pixels) queremos que estén todos en fila. Pero que a medida que se vaya estrechando la pantalla, en vez de desaparecer de la vista, vayan saltando de línea: 3 por fila en resolución MD (de más de 992 pixels), 2 por fila en resoluciones SM (de más de 768px), y uno por fila en móviles (pantalla XS)

Para eso, sólo tenemos que definir columnas en las que introducir los divisores con la siguiente pauta:

• Resolución LG: queremos los 4 bloques en fila. Como hay 12 columnas… pues está claro: 3 partes de 4 columnas
• Resolución MD: queremos 3 bloques por fila: como hay 12 columnas, necesitaremos 4 partes de 3 columnas
• Resolución SM: queremos 2 bloques por fila: como hay 12 columnas, pondremos 6 partes de 2 columnas
• Resolución XS: queremos 1 bloque por fila: es decir, una parte de 12 columnas.

¿Fácil, verdad? el código correspondiente a ese razonamiento será el siguiente:

<div class=”row”>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12″> nuestro bloque </div>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12″> nuestro bloque </div>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12″> nuestro bloque </div>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12″>nuestro bloque </div>
</div>

Con esto conseguimos divisores que en función de la anchura de pantalla (lg, md, sm ó xs) se comportan midiendo 3,4,6 ó 12 columnas.

El resultado gráfico sería algo así, un conjunto de bloques que si la pantalla es suficientemente ancha están todos en fila, y que a medida que esa anchura disminuye van saltando de fila según le hemos especificado en nuestro código:

Hasta aquí todo muy fácil. Pero ¿qué pasa cuando este convenio no nos sirve por algún motivo? Por ejemplo

• Mi empresa tiene 5 servicios principales. Y 12 es difícilmente divisible en 5, así que no puedo hacer 5 columnas iguales. ¿o sí?
• Quiero hacer una web para una intranet de una empresa muy tecnológica, donde 1200 es una resolución de risa. Necesito un grid de anchura fija pero que ésta sea 1600 y no 1200. ¿Es posible?
• En la siguiente entrada nos ocuparemos de esto, profundizando un poco más en el modelo de grid y viendo como los media-queries nos permiten retocarlo a nuestro antojo.