Bootstrap: tutoriales, plantillas y galerías

Bootstrap, un sistema de 12 columnas para construir webs responsive

Bootstrap es un framework o conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como, extensiones de JavaScript opcionales adicionales.

Bootstrap fue desarrollado por Mark Otto y Jacbod Thornton de Twitter, como un marco de trabajo (framework) para fomentar la consistencia entre las herramientas internas. Desde su versión 2.0 soporta diseño responsive (se ajusta dinámicamente a las características del dispositivo usado) y desde entonces se ha generalizado para la maquetación ágil de proyectos responsive, ya que simplifica el uso del CSS cross-browser y las media-queries para crear los diferentes breakpoints.
Bootstrap no es la única opción para crear un sitio responsive ni tampoco la panacea; es una opción como otra cualquiera, pero es cierto que hoy en día es muy utilizado e incluso se demanda como punto de partida. Actualmente Bootstrap viene con un CSS preparado con pre-procesadores Less y Sass.

Bootstrap utiliza un modelo de rejilla (o retícula o grid) basado en dos tipos de contenedores (uno con un tamaño fijo por cada grupo de dispositivos y otro que se basa en porcentajes) y un sistema de 12 columnas. En la misma web de Bootstrap oficial explican el sistema y se pueden ver ejemplos de los componentes y del funcionamiento del framework. Pero para los que nos gusta pararnos un poco más y ver su funcionamiento para comprenderlo algo mejor encuentro recomendables estos tutoriales en vídeo:

Tutoriales sobre el sistema de grid de Bootstrap

Estos tutoriales de The Net Ninja son buenísimos para entender Bootstrap. Os dejo enlace a su lista de reproducción. Son 28 vídeos sin nada de desperdicio: claros, concisos y didácticos.

Galerías de sitios construidos con Bootstrap

Y para ver más ejemplos de webs construidas con este sistema, conocer hasta dónde se puede llegar, admirar e inspirar recomiendo estas galerías:

• Builtwithbootstrap, galería de sitios construidos con Bootstrap en la que incluso puedes proponer tus propias creaciones
• Este artículo de Devkit sobre 30 inspiradores ejemplos de Bootstrap (30 Inspiring Twitter Bootstrap Examples) también nos deja una buena selección de trabajos
• Expo Getboostrap, una colección promovida por el mismo Mark Otto (creador de Bootstrap) y su colaboradora Nicole Bartelt

Recursos bootstrap para Sketch

La mejor plantilla que he encontrado para Sketch para diseñar teniendo en cuenta los requerimientos posteriores de bootstrap es esta, la de Dan Rodney que incluso amablemente nos la explica en este vídeo:

Así que siempre que usemos Bootstrap como una ayuda y no una limitación, bienvenido sea. Enjoy!