Trabajo con la grilla - Videotutorial 5

Comenzamos a trabajar con las herramientas que pone a nuestra disposición Bootstrap. En este video el turno es de la herramienta más importante del framework, la girlla.

La grilla se trata de una división virtual del espacio de trabajo en un total de 12 columnas (la cantidad de columnas disponibles se puede modificar mediante la personalización del framework).

Cuando trabajamos con la grilla podemos utilzar hasta 4 clases diferentes por columna para así adaptar nuestro diseño a diferentes resoluciones.

No es obligatorio utilizar siempre las 4 clases, pero esto nos brinda un mayor control de la disposición de los elmentos del sitio web dentro del área disponible dependiendo del tamaño del dispositivo.

Las clases que podemos utilizar son las siguientes:

  • .col-lg-* (Resoluciones grandes, superiores a 1200px)
  • .col-md-* (Resoluciones medianas, entre 992px y 1200px)
  • .col-sm-* (Resoluciones pequeñas, entre 768px y 992px)
  • .col-xs-* (Resoluciones extra pequeñas, inferiores a 768px)

Nota: El (*) representa a un valor posible entre 1 y 12.

También aprendemos que tales clases siempre deben ubicarse dentro de la clase .row y esta última dentro de .container.

El trabajo con la grilla es super importante a la hora de maquetar un sitio web y toma mucha más relevancia si tenemos en mente diseñar un sitio web responsive.

Comentarios

Deja tu comentario

http://