BootStrap, diseño adaptable

Extracto

Los media queries permiten la personalización de la presentación basada en un número de condiciones, tales como proporciones, anchos, tipos de diseño, etcétera. Trabajar con Bootstrap permite la definción del comportamiento de nuestras distintas presentaciones para distintos medios.

Abreviaturas usadas

• Píxel, píxeles (px)
• Bootstrap (BS)

Dispositivos soportados

Etiqueta	Ancho de plantilla	Ancho de columna	Ancho de separación
Smartphones	480px e inferiores	Columnas fluidas, sin ancho fijo
Smartphones a Tablets	767px e inferiores	Columnas fluidas, sin ancho fijo
Tablets (horizontal)	768px y superiores	42px	20px
Default	980px and up	60px	20px
Pantallas anchas	1200px y superiores	70px	30px

Clases de soporte

Aquí se ve una tabla de las clases que incluimos y su efecto en un diseño media query dado (etiquetado por dispositivo). Se pueden encontrar en responsive.less.

Clase	Smartphones480px and below	Tablets767px and below	Desktops768px and above
.visible-phone	Visible	Hidden	Hidden
.visible-tablet	Hidden	Visible	Hidden
.visible-desktop	Hidden	Hidden	Visible
.hidden-phone	Hidden	Visible	Visible
.hidden-tablet	Visible	Hidden	Visible
.hidden-desktop	Visible	Visible	Hidden

Etiqueta META requerida

Para asegurar que los dipositivos muestran las páginas adecuadamente, incluye el viewport de etiqueta meta así:

A la hora de trabajar...

BS no incluye automáticamente estos media queries, pero entenderlos y añadirlos es muy fácil. Tienes un par de opciones para incluir las características  adaptables de BS:

1. Usa la versión compilada receptiva bootstrap-responsive.css
2. Añade @import "responsive.less" y recompila BS.
3. Modifica y y recompila responsive.less como un archivo separado.

Leo en el manual de BS que por diseño y optimización piensan que todo no debe ser responsive, esa es la causa por la que no lo incluyeron desde el inicio.