Diseño Web Adaptativo con Bootstrap

El Diseño Web Adaptativo (Responsive Web Design), se trata de una serie de técnicas de diseño y desarrollo web cuya función es adaptar el sitio web al entorno del usuario.
Crear un sitio web “Responsive” puede ser una tarea ardua, aquí es donde el framework Bootstrap  nos facilitará la tarea enormemente. Bootstrap es de código abierto y disponible en GitHub, su origen está en dos desarrolladores de Twitter que lo crearon como un marco de trabajo (framework) para fomentar la consistencia a través de herramientas internas.
Bootstrap está soportado en la mayoría de los navegadores modernos tanto de escritorio como dispositivos móviles. En navegadores más antiguos suele funcionar bastante bien aunque la parte estética pueda verse algo mermada.

Para usar Bootstrap en nuestro proyecto, lo primero que tenemos que hacer es descargar los ficheros compilados de css, javascript e imágenes. Una vez descargado y descomprimido el fichero .zip, incluiremos los ficheros compilados a nuestro proyecto. Vemos un ejemplo práctico de un “Bootstrapped template”:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Template</title>    
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>    
<h1>Hello, world!</h1>    
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Es importante saber que necesitamos el framework jQuery para que los plugins javascript funcionen. Estos componentes añaden o extienden funcionalidades a la interfaz de usuario como tooltips, cuadros de diálogo, botones, alertas, autocompletado, etc.
Bootstrap se basa en un sistema de cuadrícula de 12 columnas con un ancho estándar de 940 píxeles, que puede ser de 724px ó 1170px según el “viewport”. Para adaptarse a resoluciones inferiores a 767 px., las columnas pasan a ser “fluídas” y se apilan verticalmente.

Para crear una plantilla simple de 2 columnas, crearemos una fila (.row) y  el número de columnas (.span*), en este caso 2. Cada .span* abarcará un número determinado de columnas de la cuadrícula, hasta completar las 12:

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

Este sería el resultado:
layout

Tenemos más ejemplos en la web del proyecto: http://getbootstrap.com/2.3.2/scaffolding.html

También tenemos la posibilidad de mejorar elementos básicos html como tablas, formularios, botones, etc., con clases css extensibles, así como componentes que añaden funcionalidades de navegación, alertas, paginación, barras de progreso, etc., y por último plugins jQuery customizados.