Bootstrap, el framework HTML5 para diseño web responsive (I)
Área: Diseño Web & Ecom
A nadie creo que le quede duda de que actualmente es casi obligatorio desarrollar sitios web que estén totalmente adaptados a su utilización desde múltiples dispositivos (tabletas, móviles, portátiles, PCs…). Este post es el arranque de una colección de ellos en los que haremos un recorrido sobre BOOTSTRAP que pretender ser a la vez sistemático y práctico .
Qué es Bootstrap 3
BOOTSTRAP es uno de los principales frameworks de desarrollo de entornos web “responsive” (es decir, que se adaptan automáticamente al tamaño de pantalla que utiliza cada usuario), y no entraremos aquí a debatir sobre si es mejor o peor que BoilerPlate o cualquier otro. Ambos son geniales, e infinitamente superiores a no usar ningún framework para tu front-end responsive.
Esencialmente Bootstrap (y su versión 3 que es la que utilizaremos) está formado por una colección de hojas de estilo y funciones javascript auxiliares que permiten construir muy rápidamente un front-end responsive. Está pensado para trabajar bajo el concepto “mobile first”, es decir, diseñar pensando ante todo en los dispositivos móviles. La razón de este enfoque es bastante obvia: un dispositivo móvil tiene una pantalla mucho más pequeñita, y un uso táctil más limitado que un ordenador con su ratón y su pantalla de 17 pulgadas en adelante. Así que es buena idea trabajar pensando en la situación desfavorable, pues luego nos será fácil adaptarnos a la más favorable. Bastante más fácil que al contrario.
Cuánto cuesta aprender Bootstrap
Cuesta MUY POCO empezar a trabajar con él y obtener resultados más que curiosos. Obviamente con unos conocimientos de base en HTML y CSS. En un par de horas puedes tener tus primeros resultados esperanzadores, y en el primer proyecto terminar con la sensación de que ya llevas las riendas. Ahora bien, no nos engañemos, hablamos de una hoja de estilos de unas 6000 líneas, y con mucho más grano que paja. Dominarlo verdaderamente, como toda disciplina, cuesta lo suyo. EMPEZAMOS?
Desplegando Bootstrap
Como artículo introductorio, nos vamos a limitar a desplegar un Bootstrap estándar en nuestro equipo, de la forma más básica. Para ello:
- Entramos a www.getboostrap.com y lo descargamos. Es simplemente un zip de unos 200Kb
- Lo descomprimimos donde vayamos a trabajar, y encontramos 3 carpetas (css, fonts, js) y unos cuantos archivos dentro de cada una de ellas. Por si a alguien se le ocurre que no necesita más fuentes puesto que ya tiene muchas, avisar que esas fuentes son en realidad iconos (glyphs) que nos serán útiles en muchas ocasiones, así que resistamos la tentación de borrar la carpeta de fuentes.
Vamos a crear nuestro primer archivo con estructura básica. Sería algo así como esto:
<!DOCTYPE html> <html lang="es"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>TITULO PÁGINA</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/misestilos.css" rel="stylesheet"> </head> <body> ... </body> </html>
Sí, es una estructura HTML 5. A pocos se les ocurrirá trabajar con Bootstrap en XHTML o similar. Se supone que estamos avanzando con Bootstrap, y no al contrario. No nos vamos a detener ahora en etiquetas sobre HTML 5 ni en aquellas que tendrían relación con el tema responsive como el viewport. Estamos en un arranque práctico, y vamos a lo práctico.
Sobre el patrón HTML mostrado arriba, lo único que tendremos que tener en cuenta es:
- Recordar que estamos trabajando en UTF-8 y guardar nuestro archivo como UTF-8, puesto que algunos editores de texto / código tienen tendencia a guardar en formato ANSI si no especificamos otra cosa.
- Referenciar adecuadamente las rutas de las hojas de estilos.
- Separar en dos hojas los estilos nativos de bootstrap (bootstrap.css que es la hoja de estilos normal y bootstrap.min.css que es lo mismo pero sin espacios para ahorrar tamaño de archivo) y aquellos que vamos a definir nosotros para nuestro proyecto. Que podrán ser totalmente nuevos o modificaciones a los nativos de bootstrap, pero vamos a dejarlos siempre en una hoja aparte. Eso nos permitirá actualizar bootstrap en el futuro sin problemas (o con muchos menos problemas en el peor de los casos).
Ya tenemos Bootstrap en funcionamiento.
El siguiente paso es darse una vuelta por la sección components de getbootstrap.com y copiar y pegar en nuestro ejemplo unos cuantos componentes, para ponernos los dientes largos y ver cuántas cosas podemos hacer y qué monas quedan con sólo copiar y pegar.
En el próximo capítulo: Bootstrap 3. Entendiendo el modelo de rejilla (grid).
Dejar un comentario
¿Quieres unirte a la conversación?Siéntete libre de contribuir!