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
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

Etiqueta META requerida

Para asegurar que los dipositivos muestran las páginas adecuadamente, incluye el viewport de etiqueta meta así:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

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.
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: