7 min de lectura

Actualmente existen una gran variedad de herramientas que permiten la creación de páginas web responsivas, ya sea que se utiliza algún Framework o seas tu mismo quien tenga que lidiar con el flujo responsivo de tu página.

En esta ocasión hablaremos sobre una herramienta en especifico: Bootstrap. Esta herramienta que nos permite Crear Grids responsivos de manera fácil y rápida. Creado para cualquier tipo de usuario, dispositivo,etc.

Usando Bootstrap

Existe una versión Preecompilada la cual incluye los archivos necesarios para poder trabajar con Bootsrap

Link descarga : https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip

Una vez descargados los archivos procederemos a agregar Bootstrap a nuestro proyecto, tomando en cuenta que los archivos descargados fueron descomprimidos y copiados a la carpeta principal de nuestro proyecto.

Clases para grids responsivos

Antes de empezar debemos tomar en cuenta las siguientes especificaciones donde se muestra cuando usar cada una de las clases según los dispositivos en los que se va a trabajar.
Imagen tomada de la siguiente direccion http://josemiweb.com/bootstrap-tutorial/assets/img/estructuraColum.JPG

Cada una de las clases nos sirve para trabajar en los distintos dispositivos que hoy en día varian mucho de tamaño, por lo que será necesario explicar el funcionamiento de cada una de las 4 clases.

Ejemplo de uso de los grids responsivos con twitter bootstrap

Para aprender a usar las clases previsas, por medio de este ejemplo podemos ver que se pueden mezclar las clases para generar diseños mas óptimos.

Un ejemplo de esto sería:

Como se puede ver en el ejemplo, el número después del prefijo xs o md indica la variación del porcentaje respecto a las 12 columnas máximas esto quiere decir en el caso de “col-xs-6 col-md-4” que si son 12 columnas entre el valor 6 esto equivale a 2 bloques por columna de igual forma aplica para el valor 4 dando como resultado 3 bloques por columna ,de esta manera el acomodo sera según el dispositivo.

La salida de este ejemplo queda de la siguiente manera

antes

 

Si modificamos la resolución podemos ver el cambio que se genera para dispositivos muy pequeños de resoluciones menores a 768px.

Así se vería la salida después de modificar la resolución o en dispositivos de resoluciones menores 768px este ejemplo sería

despuess

¿Cuándo usar cada una de las clases?

Las clases deben ser utilizadas según el dispositivo en el que desees que se aplique el grid responsivo, por ejemplo, si solo quieres trabajar con resoluciones para dispositivos muy pequeños tendrías que usar únicamente la clase .col-xs- 

Si quieres que los cambios se vean reflejados en las resoluciones de dispositivos pequeños y muy pequeños tendrías que usar .col-xs- y .col-sm- en tu contenedor, esto no quiere decir que no sea compatible con un navegador sino que solo sería aplicado hasta obtener la resolución de dichos dispositivos.

¿Qué pasa si utilizo todas las clases?

En caso de utilizar todas las clases, el resultado sería un acomodo variado para cada resolución donde un cambio en la resolución significaría un cambio posiblemente muy drástico en el acomodo pero siempre ordenando de manera correcta los grids.

¿Qué hacer cuando la medida será la misma para todos los tamaños?

Cuando se planea trabajar con una sola medida, la clase que debe usarse es .col-xs- ya que al ser la que maneja la resolución mas pequeña provee soporte para todas las demás.

Dicho de otra manera, imagina que usáramos la clase .col-sm por ser la clase para dispositivos pequeños, los cambios se afectarían desde la mas grande de las clases hasta dicha clase pero no brindaría soporte para dispositivos muy pequeños ya que el último cambio sería efectuado en dispositivos de resolución mayor a 768px

 

Ejemplo de grids responsivos apilados de manera horizontal con twitter bootstrap

Y ahora un Ejemplo de como tener los grids apilados a horizontales

La salida para este ejemplo sería

Sin título

 

Como mencione antes este ejemplo solo tiene soporte para dispositivos con resolución de 970px en adelante por lo que una reducción en la resolución nos llevaría a…

despues

Descarga el código

https://github.com/Vago123/Grids/archive/master.zip

Compartir

Arturo Avalos Bracamontes estudiante en la universidad de U de G, Guadalajara Jalisco. Actualmente cursa el séptimo semestre de la carrera Licenciado en Informática. Interesado en desarrollo de software.

DEJA UNA RESPUESTA

Please enter your comment!
Please enter your name here