Bootstrap: modificando el modelo de rejilla. Uso de las Media Queries

Área: Diseño Web & Ecom

No siempre el modelo de rejilla de 12 columnas de Bootstrap nos resulta adecuado. En ocasiones, podemos necesitar modelos de rejilla con otra subdivisión. Por ejemplo, para crear un layout de 5 columnas. Usaremos este caso como ejemplo de desarrollo y como excusa para introducir el uso de las Media Queries, que nos permitirán  adaptar el sistema Bootstrap resonsive base a nuestras necesidades..

Qué son las Media Queries

Las Media Queries son un componente nativo de CSS3 a través del cual podemos especificar diferentes comportamientos en diferentes soportes. Sin ellas, todo el concepto de responsive que utilizamos en Bootstrap u otros frameworks CSS sería sencillamente imposible.

Una Media Querie básica tiene una sintaxis así:

@media (max-width: 500px) {
  .estilo1 {
    border:4px;font-size:15px;
    }  
  }

Es decir, establecemos que para cualquier dispositivo cuya anchura sea como máximo 500px, el estilo1 se comporte como ahí especificamos.

Complicándolo un poquito más, podemos combinar resoluciones máximas y mínimas:

@media (min-width: 500px) and (max-width:800px) {
   ….
  }

Con esto podríamos establecer comportamientos específicos para los estilos, que se producirían sólo en dispositivos entre 500 y 800px de anchura.

Utilidad de las Media Queries en el uso diario de Bootstrap

Las Media Queries son una opción, que no una obligación. De hecho, Bootstrap se ha diseñado intentando cubrir un gran abanico de casos y necesidades, y por tanto intentando que el maquetador tenga que recurrir lo menos posible a ellas. Pero hay una serie de casos en que será muy habitual usarlas. Por ejemplo:

  • Para reducir tamaños de texto en dispositivos pequeños: si usamos pixels para definir nuestros textos, un título de 20px de tamaño de fuente puede ser muy adecuado en un Ipad. Pero en un móvil, podemos encontrarlo demasiado grande. Bastará con establecer para este estilo un font-size más pequeño para resoluciones menores que 768px (el tamaño XS en Bootstrap), para conseguir el resultado esperado
  • Para modificar márgenes o paddings: el modelo de rejilla de Bootstrap establece 4 tamaños de pantalla. Eso hace que en el salto de uno a otro haya una cierta discontinuidad, es decir, un cambio de comportamiento algo brusco. Una zona que ocupando 3 de 12 columnas quedaba bien, cuando pasa a ocupar 4 de 12 puede resultar demasiado diferente en su visualización. Una forma de modificar esto suavizando el efecto de los cambios de resolución es utilizar los Media Queries para retocar los margins y paddings. Por ejemplo:
@media (max-width: 992) { 
 .bloque1 { 
    margin-left:10px; 
    } 
}

Modificando el modelo de Rejilla de Bootstrap con Media Queries: ejemplo del layout de 5 columnas

Vamos a ver cómo utilizar las media queries para generar un grid de 5 columnas, que con el uso estándar de Bootstrap sería imposible (permite 1-2-3-4-6-12).

Primero, vamos a definir nuestras columnas. Para ello vamos a crear 5 estilos específicos para ello, y a dotarlos de unas cuantas características básicas (que ya tienen las columnas estándar de Bootstrap):

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
}

Ahora, vamos a establecer que una columna XS ocupe un 20% de la anchura total de su contenedor:

.col-xs-5ths {
  width: 20%;
  float: left;
}

Y análogamente, usando media queries, vamos a establecer que las columnas SM, MD y LG hagan lo mismo cuando se muestren en dispositivos con la anchura adecuada:

@media (min-width: 768px) {
  .col-sm-5ths {
    width: 20%;
    float: left;
    }
  }
@media (min-width: 992px) {
  .col-md-5ths {
    width: 20%;
    float: left;
    }
  }
@media (min-width: 1200px) {
  .col-lg-5ths {
    width: 20%;
    float: left;
    }
}

Voilá !! Lo tenemos. Vamos a utilizarlo para crear una fila que en pantallas MD o LG tenga 5 columnas, que al pasar a SM se conviertan en 2 filas de 3 y 2 columnas, y al pasar a XS se conviertan en 3 filas de 2 columnas (obviamente en esos tamaños pequeños la ultima celda quedará vacía, pues son 5 a repartir)


<div class=”row”>
  <div class=”col-md-5ths col-lg-5ths col-xs-6 col-sm-4″>
    Contenido 1
  </div>
  <div class=”col-md-5ths col-lg-5ths col-xs-6 col-sm-4″>
    Contenido 2
  </div>
  <div class=”col-md-5ths col-lg-5ths col-xs-6 col-sm-4″>
    Contenido 3
  </div>
  <div class=”col-md-5ths col-lg-5ths col-xs-6 col-sm-4″>
    Contenido 4
  </div>
  <div class=”col-md-5ths col-lg-5ths col-xs-6 col-sm-4″>
    Contenido 5
  </div>
</div>

Las Media Queries pueden utilizarse para infinidad de modificaciones adicionales sobre Bootstrap, pero sólo debemos para recurrir a ellas cuando el propio Framework no nos deja otra salida. Bootstrap incluye muchos componentes pre-diseñados que nos pueden ser igual de útiles o más, y sobre todo mucho más ágiles de utilizar.

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja una respuesta

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

*