OpenWebinars

Diseño Web

Tutorial Bootstrap 3: Sistema Grid

Para estructurar nuestra web con el Framework de Bootstrap utilizaremos un sistema Grid de 12 columnas, olvídate de las tablas. Esto quiere decir, que nuestra web tendrá un ancho de página de 12 columnas, por lo tanto podremos añadir como máximo 12 columnas de tamaño 1 en nuestra página web.

Angel Robledano

Angel Robledano

Product Manager

Lectura 3 minutos

Publicado el 15 de junio de 2015

Compartir

    Tabla de contenidos

Conviértete en Frontend Developer
Domina las tecnologías más demandadas. Accede a cursos, talleres y laboratorios prácticos de JavaScript, React, Angular, HTML, CSS y más.
Comenzar gratis ahora

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.
 

Imagen 0 en Tutorial Bootstrap 3: Sistema Grid
 

Imagen 1 en Tutorial Bootstrap 3: Sistema Grid
 

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à.

Mejora la colaboración entre tus equipos de diseño y desarrollo
Cursos, talleres y laboratorios de JavaScript, React, Angular, UX, HTML y CSS para todos los niveles. Incrementa la productividad de tus proyectos en un 45%
Solicitar más información

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.

 

Compartir este post

También te puede interesar

Tutorial de Bootstrap 3: Formularios
Blog

Tutorial de Bootstrap 3: Formularios

Seguimos con la serie de artículos del tutorial de Bootstrap 3, y en esta ocasión nos centramos en la creación de formularios...

Angel Robledano