Bootstrap 3: sistema de cuadrícula y consultas de medios

Todos conocemos Bootstrap, ya que es el marco web de código abierto más popular. Mark Otto y Jacob Thorton lograron crear uno de los marcos de CSS más potentes de la web.

Cuando se lanzó Bootstrap 3, el cambio más interesante de la nueva versión fue la diferencia en el sistema de cuadrícula. Bootstrap 2 tenía dos tamaños del navegador diferentes (escritorio y dispositivos móviles). Con Bootstrap 3, ahora creas pensando primero en el móvil, y el sistema de cuadrícula te permite crear diferentes cuadrículas basadas en el tamaño del navegador. Una tendencia similar se observa en la versión más reciente del marco - Alpha Release de Bootstrap 4.

Ejemplo de columnas de Bootstrap 3

Esto puede ser un poco difícil de entender al principio, así que, te ofrecemos un ejemplo. Digamos que quieres crear un sitio que tenga:

• 1 columna en dispositivos extra pequeños
• 2 columnas en dispositivos pequeños Y medianos
• 4 columnas en dispositivos grandes

El sistema de cuadrícula ahora cae en cascada en los dispositivos móviles.

<div class="row">
<div class="col-sm-6 col-lg-3">
This is part of our grid.
</div>
<div class="col-sm-6 col-lg-3">
This is part of our grid.
</div>
<div class="col-sm-6 col-lg-3">
This is part of our grid.
</div>
<div class="col-sm-6 col-lg-3">
This is part of our grid.
</div>

No tenemos que definir nada para dispositivos extra pequeños ya que el predeterminado es 1 columna. Tenemos que definir el tamaño de cuadrícula para dispositivos pequeños, pero no para dispositivos medianos. Esto se debe a que la cuadrícula se cae en cascada. Entonces, si defines un tamaño en sm, entonces será ese tamaño de cuadrícula para sm, md y lg. Explicaremos diferentes tamaños de cuadrícula y cómo crear ellos y a continuación mostraremos algunos ejemplos.

Tamaños de cuadrículas

Este es lo mejor en el nuevo sistema de cuadrículas. Realmente podrías hacer que tu sitio muestre una cuadrícula diferente en 4 tamaños diferentes de navegador. A continuación se muestra el código de diferentes tamaños.

.col-xs-$	Extra Small	Phones Less than 768px
.col-sm-$	Small Devices	Tablets 768px and Up
.col-md-$	Medium Devices	Desktops 992px and Up
.col-lg-$	Large Devices	Large Desktops 1200px and Up

Los documentos oficiales de Bootstrap ofrecen una comprensión mucho más completa de cómo funciona la cuadrícula. Echa un vistazo a ellos para obtener una descripción más completa de los tamaños de columnas, tamaños de gutter, tamaños máximos de columna y el ancho máximo de tu sitio en general según el tamaño del navegador.

Tamaños predeterminados de cuadrícula de Bootstrap

A veces necesitarás usar consultas de medios para que tu sitio funcione de la manera que te gustaría. Conocer los tamaños de cuadrícula predeterminados es esencial para extender la cuadrícula de Bootstrap. Hemos escrito una guía corta para mostrarte los tamaños predeterminados, así que echa un vistazo a la info a continuación.

Puntos de interrupción de consultas de medios de Bootstrap 3

Bootstrap 3 es un marco de front-end móvil. Hemos incluido el orden correcto para las consultas de medios a continuación, pero también incluimos en la parte inferior los primeros puntos de interrupción no móviles en caso de que algunas personas no estén acostumbradas a la metodología de tecnología móvil, ya que técnicamente ambas funcionarán. Min-Width: se refiere a todo lo que sea mayor o igual a la cantidad determinada. Max-Width: se refiere a todo menos o igual a la cantidad determinada.

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/
 
 
 
 
	/*==========  Mobile First Method  ==========*/
 
	/* Custom, iPhone Retina */
	@media only screen and (min-width : 320px){
 
	}
 
	/* Extra Small Devices, Phones */
	@media only screen and (min-width : 480px){
 
	}
 
	/* Small Devices, Tablets */
	@media only screen and (min-width : 768px){
 
	}
 
	/* Medium Devices, Desktops */
	@media only screen and (min-width : 992px){
 
	}
 
	/* Large Devices, Wide Screens */
	@media only screen and (min-width : 1200px){
 
	}
 
 
 
	/*==========  Non-Mobile First Method  ==========*/
 
	/* Large Devices, Wide Screens */
	@media only screen and (max-width : 1200px){
 
	}
 
	/* Medium Devices, Desktops */
	@media only screen and (max-width : 992px){
 
	}
 
	/* Small Devices, Tablets */
	@media only screen and (max-width : 768px){
 
	}
 
	/* Extra Small Devices, Phones */
	@media only screen and (max-width : 480px){
 
	}
 
	/* Custom, iPhone Retina */
	@media only screen and (max-width : 320px){
 
	}

Puntos de interrupción de consultas de medios de Bootstrap 2.3.2

*=====================================================
=            Bootstrap 2.3.2 Media Queries            =
=====================================================*/
@media only screen and (max-width : 1200px){
 
}
 
@media only screen and (max-width : 979px){
 
}
 
@media only screen and (max-width : 767px){
 
}
 
@media only screen and (max-width : 480px){
 
}
 
@media only screen and (max-width : 320px){
 
}

Utilidades adaptables

Al igual que Bootstrap 2, Bootstrap 3 proporciona utilidades adaptables (responsive) para ocultar y mostrar elementos según el tamaño del navegador. Esto también nos ayudará a definir nuestro sistema de cuadrícula.

<table>
<tbody>
<tr>
<td class="code">
<pre class="php">.visible-xs
.visible-sm
.visible-md
.visible-lg
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg</pre>
</td>
</tr>
</tbody>
</table>

Esto ayuda porque podemos mostrar ciertos elementos según el tamaño. En nuestros ejemplos de hoy, mostraremos una barra lateral adicional en los escritorios grandes.

---

---

Ejemplos

Aquí hay algunos ejemplos de las cuadrículas que puedes crear. Analizaremos algunos sitios básicos que las personas podrían desear y mostraremos la facilidad de su creación con la cuadrícula de Bootstrap 3.

Sencillo: Gran escritorio vs móvil

Supongamos que deseas que un sitio tenga 1 columna en dispositivos extra pequeños (teléfonos) y pequeños (tabletas), 2 columnas en dispositivos medianos (escritorio mediano) y 4 columnas en dispositivos grandes (escritorio).

Aquí está el código para ese ejemplo:

<div class="row">
<div class="col-md-6 col-lg-3">
<div class="visible-lg text-success">Large Devices!</div>
<div class="visible-md text-warning">Medium Devices!</div>
<div class="visible-sm text-primary">Small Devices!</div>
<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="visible-lg text-success">Large Devices!</div>
<div class="visible-md text-warning">Medium Devices!</div>
<div class="visible-sm text-primary">Small Devices!</div>
<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="visible-lg text-success">Large Devices!</div>
<div class="visible-md text-warning">Medium Devices!</div>
<div class="visible-sm text-primary">Small Devices!</div>
<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="visible-lg text-success">Large Devices!</div>
<div class="visible-md text-warning">Medium Devices!</div>
<div class="visible-sm text-primary">Small Devices!</div>
<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
</div>
</div>

Intermedio: Mostrar columna extra en escritorios grandes

Este es un ejemplo interesante. Supongamos que tienes un sitio web con una barra lateral y una sección de contenido principal. Para dispositivos extra pequeños, deseas que tenga una columna con  el contenido principal y con la barra lateral apilada debajo. Para dispositivos pequeños y medianos, queremos que la barra lateral y el contenido principal se coloquen uno al lado del otro. Ahora, para dispositivos grandes, queremos utilizar el espacio en dispositivos más grandes. Queremos aádir una barra lateral adicional para mostrar aún más contenido. Cambiamos el tamaño del contenido principal para que abarque 6 columnas en dispositivos grandes para que haya espacio para nuestra segunda barra lateral. Esta es una gran manera de utilizar el espacio en escritorios más grandes. Y aquí te mostramos el código para hacerlo.

<div class="row">
<div class="col-sm-9 col-lg-6 text-danger">
I am the main content.
</div>
<div class="col-sm-3 text-warning">
I am the main sidebar.
</div>
<div class="col-lg-3 visible-lg text-success">
I am the secondary sidebar that only shows up on LARGE devices.
</div>
</div>

Avanzado: Cuadrícula diferente para cada tamaño

Este será un ejemplo más complejo. Digamos que en ningún punto de nuestro sistema de cuadrícula queremos que se apilen todas nuestras columnas. Para dispositivos extra pequeños, queremos que haya 2 columnas. Para dispositivos pequeños - 3 columnas. Y para dispositivos medianos - 4 columnas. Para dispositivos grandes, queremos que haya 6 columnas (una adicional de las cuales se muestre sólo en dispositivos grandes).

Qué tarea... Echa un vistazo al código.

<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
I'm content!
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
I'm content!
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
I'm content!
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
I'm content!
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
I'm content!
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 visible-lg">
I'm content only visible on large devices!
</div>
</div>

Puedes ver que a medida que el tamaño del navegador se reduce, las columnas comienzan a formarse. Además, el contenido dentro de cada uno comenzará a apilarse.

Puedes ver que es fácil crear sitios complejos y dinámicos con la cuadrícula de Bootstrap 3. Desde los sitios de 2 columnas móviles hasta la ocultación compleja y la visualización de elementos particulares en escritorios grandes, puedes construir cualquier tipo de sitio. Esperamos que estos ejemplos te darán una idea de la flexibilidad del nuevo sistema de cuadrícula y todas las grandes cosas que puedes crear.

Fuente: "Bootstrap 3: The Grid System and Media Queries" por Ahmed Faisal