Scroll to top
en es

Sistema de Grid de Bootstrap

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:  ]]>

Related posts

1 comment

  1. gabriel araya garcia

    El texto es muy tenue de tu página. Para los viejos como yo, se nos complica poder leer. Creo que le diste importancia a la estética por sobre lo practico dándole importancia extrema a la moda. Si lees las nuevas tendencias de Front End esta se orienta al DARK, y los que implementan esta tendencia argumentan que descansa la vista y ahorra energía y desgaste de hardware.

Post a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.