Tutorial Bootstrap 3: Sistema Grid

Gracias a este sistema, nuestra web se verá en todas las pantallas de los dispositivos con los que accedamos a ella. De hecho, la filosofía de este framework es, diseñar para móviles primero .

Empezando a estructurar

Para centrar nuestra web en nuestro navegador utilizaremos la clase .container , cuando la anchura de la web es fija. Si queremos una Web con anchura variable, utilizaremos la clase .container-fliud .

¿Esto qué es? Pondremos un ejemplo. Cuando visitáis una página Web con una pantalla con resolución alta y a vuestra izquierda y derecha tenéis espacios vacíos, es que esa web tiene un ancho fijo, si está diseñada con Bootstrap, estarán utilizando la clase .container.

Sin embargo, si entramos en una web y ésta ocupa todo nuestro ancho, la web utilizará .container-fluid.

Os dejo con unos ejemplos gráficos, que os sacarán de duda.
 

Entonces, lo primero que tenemos que decidir es qué tipo de ancho queremos para nuestra web. En Bootstrap se diseña por filas, por lo que podemos tener un menú que ocupe todo el ancho y el cuerpo de la web sea fijo. Es decir, podremos combinar los dos sin ningún tipo problema.

12 columnas

Como ya sabes, podremos utilizar un ancho de 12 columnas como máximo , y las podemos combinar como queramos. Podremos tener 3 columnas en nuestra web o 5 o 6 o 2, siempre y cuando la suma de éstas den 12 columnas.

Aquí os dejo el código de un ejemplo con 3 columnas. La primera columna de tamaño 4, la segunda columna de tamaño 2, tercera columna de tamaño 5.
 

Como veis, utilizamos la clase .row, para crear una fila , y esta fila la dividimos en columnas con .col-md-tamaño.

Bien, es fácil ¿verdad? Pero qué es eso de md. Pasamos al siguiente punto.

Tipos de columnas

Con Bootstrap tenemos 4 tipos de columnas:

• col-xs , se utiliza para mostrar en dispositivos con una pantalla de resolución menor a 768px.
• col-sm , se utiliza para mostrar en dispositivos con una pantalla de resolución mayor o igual a 768px.
• col-md , se utiliza para mostrar en dispositivos con una pantalla de resolución mayor o igual a 992px.
• col-lg , se utiliza para mostrar en dispositivos con una pantalla de resolución mayor o igual a 1200px.

El sistema de rejilla o grid de Bootstrap 3 cuenta con cuatro clases: xs extra small devices, para dispositivos con pantalla pequeña, normalmente móviles, sm small devices, para dispositivos con pantalla con una resolución mayor o igual a 768px que suelen ser tablets, md medium devices, por ejemplo para portátiles y ld larger desktops, para resoluciones de pantalla muy altas.

Esto quiere decir, que diseñaremos para cada tipo de pantalla y quedará una Web personalizada para cada tipo de pantalla. Podremos tener una columna de tamaño 5 para dispositivos xs, mientras que esa misma columna la podemos tener de tamaña 2 en pantallas md.

Estarás pensando que tendremos que escribir un montón de código para poder hacerlo, pero no, veamos un ejemplo:

Para cada dispositivo siempre suma 12, en el caso para dispositivos md, tenemos dos columnas, ambas de tamaño 6. Para dispositivos lg, tenemos una columna más pequeña de 4, y una segunda mayor de 8 y para terminar, para sm dos columnas una enorme de 9 y otra pequeñita de 2.

Es muy fácil y estamos haciendo diseños para todo tipo de pantallas al mismo tiempo.

Ocultar columnas

Seguimos con las columnas, otro de las cosas que son muy útiles y que nos facilita a la hora de diseñar nuestra web es que podemos ocultar o mostrar columnas según el tamaño de pantalla para tener un diseño accesible y optimizado.

Para mostrar elementos usamos:

• .visible-xs
• .visible-xm
• .visible-md
• .visible-lg

Para ocultar elementos usamos:

• .hidden-xs
• .hidden-sm
• .hidden-md
• .hidden-lg

Simplemente añadimos la clase a la columna que queramos ocultar et voilà.

Desplazar columnas

Podremos desplazar columnas hacia la derecha utilizando la clase .col-xx-offset-tamaño. Cuando desplazamos una columna, lo que hacemos es crear una columna vacía que se queda a la izquierda de la columna que estamos moviendo . Si movemos una columna, con desplazamiento tamaño 2, a la izquierda dejaremos una columna de tamaño 2.
 

Aquí un ejemplo con desplazamiento de tamaño 4.

Anidar columnas

Y para terminar con las columnas, vamos a ver como anidarlas. Para ello, dentro de una columna de nivel 1 añadimos una clase row, y dentro de esa clase row las columnas de nivel 2.