3.1 Bootstrap

Imagen en  Bootstrap bajo licencia Creative Common

Bootstrap es el framework CSS con más auge hoy en día,  es sencillo y resulta  automático, descargar, descomprimir, enlazar y usar. Es un framework originalmente creado por Twitter que permite crear interfaces web con CSS y JavaScript y cuya particularidad es la de adaptar la interfaz del sitio web al tamaño del dispositivo en que se visualice. Es decir, el sitio web se adapta automáticamente al tamaño de un ordenador , una tablet  o dispositivo móvil. Esta técnica de diseño y desarrollo se conoce como bien sabes en “responsive design” o diseño adaptativo.

La gran ventaja de usar responsive design en un sitio web, es que éste se adapta automáticamente al dispositivo desde donde se acceda. Un factor clave es el uso de media queries, que es un módulo de CSS3 que permite la representación de contenido para ajustarse a condiciones como la resolución de la pantalla garantizando una web muy fluida capaz de adaptarse a casi cualquier tamaño de forma automática.

Los diseños creados con Bootstrap son simples, limpios e intuitivos, esto les da agilidad a la hora de cargar y al adaptarse a otros dispositivos. Además hay una extensa comunidad que soporta este desarrollo como son Wordpress, SASS, Drupal etc. El Framework trae varios elementos con estilos predefinidos fáciles de configurar: botones, menús desplegables, formularios incluyendo todos sus elementos e integración jQuery para ofrecer ventanas y tooltips dinámicos.

 ¿Cómo comenzamos a usar Bootstrap?

Hay diferentes posibilidades para empezar a utilizar Bootstrap a partir de la web oficial.  Las opciones serían la descarga de CSS, el código fuente LESS, la versión SASS, utilizar un CDN o instalarlo con bower, npm y composer. El caso más fácil y que recomendamos es la descarga del código CSS, hacemos click en el botón “Download Bootstrap”.

Imagen de Bootstrap bajo licencia Creative Common

Una vez descargado encontraremos un .zip, el cual debemos descomprimir, y dentro de el debemos tener algo como:

Imagen de creación propia bajo licencia Creative Common

Dentro de la carpeta css , encontraremos varios ficheros pero solo son importantes bootstrap.css que es el achivo principal que usaremos en nuestros archivos HTML y  el archivo bootstrap.min.css que es la versión minificada y recomendada en producción.

Podremos hacer referencia desde  nuestro código HTML a esta hoja de estilo.  Con solo añadir algunos elementos a nuestro código veremos cómo sin escribir una sola línea de CSS esta misma estructura tomará otro aspecto.

Imagen de Bootstrap bajo licencia Creative Common

Otra opción es la descarga de la plantilla Boostrap completa, está tendrá ya un conjunto de páginas HTML con el código CSS incrustado y nosotros como usuarios tendremos la opción de modificar cierto estilos además del contenido. Además te permite previsualizar mediante un navegador una vista previa de la web e inspeccionar el código fuente de la misma. Te animo a la descarga de algunas de las plantillas gratuitas para construir tu web de forma sencilla. ¡ Veamos un ejemplo!. 

Tomaremos de referencia una plantilla de negocios básica "Business Casual", una vez descargada y descomprimido el zip tendremos los siguientes archivos que forma la página web. Ya solo tienes que adaptar el contenido (html) y el diseño (css) según tus necesidades.

Imagen de de creación propia bajo bajo licencia Creative Common