Sistema de Grid de Bootstrap

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

1 Comment


gabriel araya garcia
02/02/2021 at 01:30
Reply

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.


Leave A Reply

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

*

Déjate sorprender...

Gestionar el consentimiento de las cookies

Para ofrecerte la mejor experiencia de uso, utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. El consentimiento a estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.

Funcional

Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.

Estadísticas

El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos. El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos anónimos. Sin una requerimiento, el cumplimiento voluntario por parte de su proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarlo.

Marketing

El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en un sitio web o en varios sitios web con fines de marketing similares.