A muchos programadores nos gusta eso, «programar» y me encanta realizar webs y crear «internet de las cosas» pero donde mas cojeamos muchos es en el diseño y ademas las hojas de estilo no es algo intuitivo, a veces se complica mucho conseguir lo que quieres, luego la página debe poder verse en los diferentes dispositivos (telefono, tablet y pc).
Pero gracias a los desarroyadores de Twitter tenemos Bootstrap 3 un grandioso framework el cual hace mucho mas simple el maquetar una web.
Para empezar debemos descargar los archivos CSS y JavaScritp de la pagina getbootstrap e insertarlos en la web que vamos a crear. Dentro del body de nuestro documento crearemos una caja (div) de la clase .container, esta es la que sustenta todo. Posteriormente crearemos las filas, cada fila es una caja de la clase .row y dentro de las filas introduciremos las columnas, que aquí es donde se complica un poco.
Donde esta toda la magia de Bootstrap es en las columnas, estas siempre han de sumar doce, podemos poner doce columnas de distancia una, dos de seis, una de doce… o cualquier combinación siempre que sumen doce. Cada caja posteriormente se configurara para cuatro tamaños: xs (teléfonos), sm (tablets), md y lg (ordenadores). Así pues podemos crear una rejilla (grill), donde cada div cambia en función del dispositivo. Al ir cambiando el tamaño la pagina, nos interesa ir borrando columnas para que otras mas importantes estén completas. Como el siguiente ejemplo, hacer mas grande o mas pequeño el ancho de vuestro navegador y veréis como va adaptándose, al hacer muy estrecho el navegador veréis que el menú desaparece quedando un pequeño botón, así es mas visible en dispositivos móviles.
Bootstraps también tiene otras particularidades, como botones, paneles, menús desplegables… la verdad que es una genialidad como simplifica el trabajo de diseñar una web. Para mas información aquí tenéis el manual traducido al español, la verdad que no es nada intuitivo pero si buscáis mas por la web hay miles de videotutoriales, manuales, ejemplos, plantillas… tiene una buena comunidad en crecimiento.
Saludos and geeking.