El toolkit Twitter bootstrap te permite optimizar el esquema de tu Blog
La primera inquietud que surge al proyectar un website, es si elaboramos una estructura con ancho fijo u otra que se expanda para cualquier tamaño de pantalla. Antes contábamos con un estándar de 960 pixeles, no obstante actualmente la mayoría de las pantallas modernas se presentan más grandes, obviamente buena parte de la pantalla quedaría desperdiciada. A la vez, los dispositivos móviles con pantallas pequeñas son usados cada vez con más frecuencia para navegar la web, por eso mismo resultaría difícil navegar un website de 960px. Y para dispositivos móviles un ancho del 100% no se vuelve muy apropiado, pues toda imágen se minimiza y se necesita hacer zoom a fin de ver el contenido.
Dicha circunstancia podríamos resolverla haciendo múltiples versiones de nuestro website para dispositivos móviles, tablets y computadoras de escritorio, aún cuando eso acarrea problemas de mantenimiento y es un tanto tedioso al cambiar información. También se podrá acudir a los llamados “responsive layout”, que se refiere a que la estructura del website cambia de acuerdo al tamaño de la pantalla en la que se visualiza. diseño web. Distintas características que proporciona son:
– Estructuración de 12 columnas
– Tamaño reducido de diez kb (comprimido)
– Plantilla flexible
– Plugins personalizados de Jquery
– Válido con todos los browsers actuales incluído IE7
– Soporta HTML5
– Funciona con CSS3
Otras de las ventajas que brinda es que ya posee mucha funcionalidad integrada, ello te evita que tengas que reinventar la rueda cuanta vez creas un website. Podrás agregar una importante variedad de elementos en un abrir y cerrar de ojos:
– navegación con menús ajaxeados
– tabs dinámicos
– acordeones
– ventanas o ventanas emergentes
– barras de progreso
– tooltips
– botones
– paginación
– carrusel
– autocompletado
Todo eso ya está dispuesto para verse bien en cualquier browser, y se degrada de forma adecuada para browsers antiguos.
Un ejemplo de lo que se puede hacer con bootstrap: podemos tener un diseño de 2 columnas expandidas al 100% normalmente, sin embargo siempre que se visualiza a través de un celular, se forma una columna arriba de otra y se hacen una sola, de modo que resulta mucho más factible de navegar y sin tener que hacer zoom.
Otra de las ventajas es que a las imágenes se les puede agregar una clase de manera que nunca excedan el 100% del tamaño de la columna en la que se encuentran, de ese modo nunca excederán el ancho de pantalla de un celular. Bootstrap expande cada columna a la medida correcta, no interesa el ancho de pantalla, siempre se verá bien en cualquier dispositivo y aprovechando al máximo toda el área de pantalla.
Te estarás preguntando ¿de qué manera lo hace?, Bootstrap hace uso de los identificados como media queries, esencialmente tal cosa es código CSS condicional, y tan sólo aplica según el tamaño de la pantalla.
Ahora mismo puede ver un ejemplo de una página que se expande al 100% de la pantalla y en la segunda imagen se adapta dependiendo del dipositivo con el que se visualiza:
