¿Qué es Bootstrap?

Últimamente muchos sitios web están basando su diseño en Bootstrap, ¿Qué es Bootstrap? Pues en pocas palabras es el framework de Twitter que permite crear interfaces web con CSS y Javascript que adaptan la interfaz dependiendo del tamaño del dispositivo en el que se visualice de forma nativa, es decir, automáticamente se adapta al tamaño de un ordenador o de una Tablet sin que el usuario tenga que hacer nada, esto se denomina diseño adaptativo o Responsive Design.

El sitio web de Bootstrap es http://getbootstrap.com/, donde podemos ver ejemplos y tutoriales de como usarlo.

Claramente el mejor ejemplo de utilización de Bootstrap es Twitter, pero existen otros sitios que implementan diseños responsive basados en este Framework como por ejemplo estos:

Breezi: http://breezi.com/

Stackideas: http://stackideas.com/

iAcquire: http://www.iacquire.com/

AudioMack: http://www.audiomack.com/

LearnDot: http://www.learndot.com/

Para nuestras aplicaciones podemos usar Bootstrap. Aparte de que nos ahorramos mucho tiempo usando lo que ya tiene construido Bootstrap para estructurar nuestras páginas, su uso en la adaptabilidad de la interfaz del usuario, independientemente del tamaño de la pantalla del dispositivo, está de moda.

No entraremos mucho en detalle ahorita, solo darles una idea de lo que podemos hacer.

En Bootstrap podemos construir una tabla basada en divs de 12 columnas adaptables:

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Esto creará una estructura parecida a la siguiente:

Con elementos table de HTML podemos crear esta estructura. Sin embargo, los elementos table son recomendados para mostrar datos de manera tabular. Para un formulario lleno de controles HTML, lo recomendable son los div. Bootstrap posee clases css, que junto a los div, nos permite crear esta estructura para los formularios, además de muchas otras cosas que nos pueden ser útiles.

Para los ejemplos que veremos más adelante, usaremos Bootstrap en nuestro diseño. Aprenderemos como configurar nuestra aplicación para usar Bootstrap.