Bootstrap es una referencia en el diseño y maquetación de plantillas web. Más que una referencia, es posible que sea el Framework de HTML,CSS y Javascript más utilizado en la red, amado y odiado.
Lo que hace diferenciador de la versión 3 de Bootstrap, comparando a las versiones anteriores, u otros Frameworks del estilo, es que es posible desarrollar teniendo en mente el concepto de “mobile first”, y su sistema de grid, que te permite crear diferentes sistemas basados en el tamaño del navegador.
Mobile first
El “Mobile first” es una práctica recomendada hace algunos años y es “un enfoque que asume que los smartphones y tablets son las herramientas principales de los trabajadores para realizar sus tareas”.
Estrategia del Mobile first
Contenido
- Determinar qué es lo más importante
Diseño
- Diseñar para anchos más pequeños primero
- El CSS aborda primero los dispositivos móviles y después tiene media queries para tablets y ordenadores de mesa
Mejora progresiva
- Añadir elementos cuando el tamaño de la pantalla aumenta
Grid
En el diseño gráfico, un grid es simplemente una “estructura formada por una serie de líneas horizontales y verticales usadas para estructurar contenido”.
Con el sistema de grid, responsive y mobile first, de 12 columnas de Bootstrap 3 se hace fácil crear sitios webs complejos y dinámicos.
Si has estado maquetando alguna plantilla que haya utilizado Bootstrap como Framework, es muy posible que hayas visto clases de CSS con nombres tan singulares como “sm”, “md”, “lg”.
Un ejemplo de una sección en un sitio web que tenga una columna para dispositivos más pequeños, 2 columnas para dispositivos pequeños y dispositivos medianos, y cuatro columnas para dispositivos grandes.
<div class="row"> <div class="col-sm-6 col-lg-3"> Grid 1 </div> <div class="col-sm-6 col-lg-3"> Grid 2
</div> <div class="col-sm-6 col-lg-3"> Grid 3 </div> <div class="col-sm-6 col-lg-3"> Grid 4 </div> </div>
¿Qué són los sm, md, lg y para qué sirven?
El sistema de Bootstrap utiliza el “mobile frist”, esto significa que declarando el tamaño de un grid, la grid declarada es para el tamaño especificado y los superiores.
El sistema de grid de Bootstrap tiene cuatro clases: xs, extra small devices, para dispositivos más pequeños que 768px, teléfonos), sm (small devices, para dispositivos más grandes o iguales a 768px, tablets), md (medium devices, para ordenadores de mesa con más de 992px de ancho) y ld (larger desktops y superiores, para ordenadores de mesa con más de 1200px de ancho).
No es necesario definir para tamaño extra-pequeño, pues el sistema muestra una columna por defecto. De la misma forma tenemos que definir el tamaño del grid para dispositivos pequeños, aunque no para dispositivos medianos, ya que el sistema escala para dispositivos de mayor dimensión.
Definiendo un tamaño en sm, este será el tamaño de la grid para sm , md y lg.
Bootstrap 3 también permite utilizar media queries, pero sus Utilidades Responsive también hacen que sea fácil esconder o mostrar elementos de acuerdo con el tamaño del navegador o, de acuerdo con el dispositivo en el que se está navegando. Estas utilidades no soportan tablas de HTML, así que mejor no utilizarlas.
Es cierto que existen otras opciones de frameworks de grid que podemos utilizar hoy día, como ya hemos visto anteriormente aquí, pero el sistema de Bootstrap me parece lo suficiente potente para por lo menos ser testado. Es posible también aprender a través de ejemplos y utilizando la documentación de Bootstrap.
Fuentes:
