Rejillas fluidas con Bootstrap

Bueno, hemos visto conceptos de Diseño Web Adaptable que nos permitirían ser "autosuficientes" en el desarrollo de nuestras páginas.
Pero digamos que el proceso es un poco tedioso y repetitivo y aquí encontramos frameworks de responsive design que vienen a nuestra ayuda; hay varios, pero yo el que más conozco y más utilizo es Bootstrap.

Bootstrap fue creado por desarrolladores de Twitter para intentar unificar criterios de forma interna. Les gustó la idea y cómo quedó y decidieron publicarlo bajo licencia Open Source.

Yo empecé a usarlo no porque me ofreciera Responsive Design, sino porque me ofrecía una serie de elementos ya definidos (botones, menús, ...) que me facilitaban mucho hacer que mis desarrollos fueran tuvieran los mismos criterios.
Poco a poco me fui dando cuenta de que me facilitaba el hacer mis páginas "responsive".

Bootstrap utiliza la aproximación "mobile first", por defecto tiene una rejilla de doce columnas y utiliza media queries para saber qué estilo aplicar en cada caso.
Los criterios que usa Bootstrap, por defecto, son estos:

- Dispositivos muy pequeños : < 768px
- Dispositivos pequeños: >= 768px
- Dispositivos medianos: >= 992px
- Dispositivos grandes : >=1200px


Hay que tener en cuenta que la estructura básica de una página que utilice Bootstrap es de la siguiente manera:

Contenedor
                 - > Fila
                              - > Columna(s)

Un ejemplo sería:

 <div class="container">

   <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
   </div>
 
   <div class="row">
      <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
      <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
   </div>
</div>


¿Qué estamos definiendo?
Bueno, vemos que la primera capa, es un contenedor, seguido de una capa que es una fila.
Después definimos el tamaño de las columnas dependiendo del dispositivo utilizando en patrón:
col-YY-XX, donde YY indica para qué dispositivos se aplica el estilo y XX es el número de columnas que utiliza para ese dispositvo.
xs -> (Dispositivos muy pequeños) Xtra Small devices
sm -> (Dispositivos pequeños) Small devices
md -> (Dispositivos medianos) Medium Devices


Por lo tanto, cuando ponemos
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
lo que estamos haciendo es definir:
- Para dispositivos muy pequeños, el tamaño será del 100%
- Para dispositivos pequeños, el tamaño será del 50%
- Para dispositivos medianos, el tamaño será de 2/3.


Os dejo un enlace a la propia página de Bootstrap para que lo veáis vosotros mismos: http://getbootstrap.com/css/