Bootstrap Grid System para novatos

Creo que a estas alturas en el desarrollo web todos escuchamos o usamos Bootstrap y aunque no sea el único framework de este tipo su uso se a extendido muy rápido.

Pero en mi opinión un punto muy importante que le a dado fuerza es la forma en que posiciona las cosas con su sistema de rejillas(Grid system), ya que ayuda a crear sitios web adaptables.

El sistema de rejilla de Bootstrap se basa principalmente en 3 conceptos que se agrupan en diferentes clases que definiremos como :

Contenedores
Filas
Columnas

Tratare de explicar cada uno en lo que sigue del articulo.

Contenedores (container, container-fluid):

Los contenedores en Bootstrap es el elemento base de su sistema de rejilla, es decir, es el elemento principal que tiene esta clase y dentro de el deberán ir las filas(row), Ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="container">
      
    </div>
  </body>
</html>

La clase puede ser container o container-fluid, la diferencia es que uno es un contenedor de tamaño definido y el otro es un contenedor de tamaño variable dependiendo del ancho del navegador.

Aquí podemos ver las diferencias a nivel código entre container y container-fluid, podemos encontrar mas información y diferencias de estas clases en este enlace.

Filas (row):

Es el segundo concepto en la jerarquía y su función es simple, definir la división de los elementos de forma horizontal, obviamente esta división esta dada por espacios no visibles y se utiliza de la siguiente manera:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="container">
      <div class="row" >

      </div>
      <div class="row" >

      </div>
    </div>
  </body>
</html>

Podemos ver en el código que la clase row, inicialmente solo agregar margenes negativos a los lados y posteriormente utiliza la propiedad clear con el atributo both.

Estos margenes negativos se complementan directamente con el siguiente concepto y no debería preocuparnos sumar o restar pixeles.

Como bien su nombre lo dice, simplemente es una fila.

Columnas (col-xs-, col-sm-, col-md-, col-lg-).

El ultimo concepto básico del sistema de rejillas de Bootstrap, también puede ser el mas complejo, es el encargado de hacer la mayoría del trabajo para permitir interfaces web adaptables (Responsive Design para los que dicen HTML5, CSS3 y ES6 en su CV).

Su función es dividir el espacio de una fila (row) en un numero limitado de 12 columnas dependientes del tamaño del dispositivo.

Para lograr esto, la gente detrás de Bootstrap ideo un conjunto de clases muy simples con los siguientes prefijos para definir el comportamiento de ese elemento dependiendo del tamaño de la pantalla basándose en los media queries:

.col-xs-*: Pantallas de nomas de 768px.
.col-sm-*: Pantallas de 768px en adelante.
.col-md-*: Pantallas de 992px en adelante.
.col-lg-*: Pantallas de 1200px en adelante.

Y al final solo se agrega el numero de los 12 espacios que le corresponden en cada fila a un elemento, por ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-3">
          
        </div>
      </div>
    </div>
  </body>
</html>

El ejemplo anterior se traduce en que el elemento al estar en un dispositivo con una pantalla extra pequeña ocupara las 12 columnas que se encuentran disponibles por fila y si se encuentra en una pantalla pequeña solo ocupara 3 posiciones de las 12 columnas que le corresponden.

También tenemos 2 tipos de columnas mas, las de compensación (.col-md-offset-*) y de ordenamiento (.col-md-push-* y .col-md-pull-*).

Las columnas de compensación tienen su principal utilidad en crear espacios en blanco entre los elementos sin la necesidad de agregar un elemento vació, ¿como lo hacen? , simplemente estas clases aumentan el margen izquierdo de una columna por ejemplo .col-md-offset-4 mueve .col-md-4 cuatro columnas.:

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

Las columnas de ordenamiento sirven para cambiar el orden por defecto de las columnas en el Grid System, veamos el siguiente código de ejemplo:

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Como vemos en el ejemplo el primer div toma la segunda posición y el segundo la primera, respetando siempre el limite de 12 espacios.

Estas clases las podemos leer de la siguiente forma, la primera columna (.col-*-*-*) en una pantalla mediana (.col-md-*-*) empujara (.col-md-push-*) en tres posiciones (.col-md-push-3) al elemento y la segunda columna (.col-*-*-*) en una pantalla mediana (.col-md-*-*) jalara (.col-md-pull-*) en 9 posiciones (.col-md-pull-9) al elemento, esto hace que cambien de posición.

Conclusión

Como vemos Bootstrap deja muy sencillo el trabajar con diferentes tamaños de pantallas y lo podemos ver en acción aquí, para activar la vista de diseño adaptable en Firefox simplemente presionamos ctrl + shift + m, siempre podemos ver la documentación en la pagina oficial de Bootstrap.