Empleo de Twitter bootstrap en tu página web para un diseño dinámico y veloz
Una de las primeras interrogantes que nos planteamos siempre que se diseña un website, es si pretendemos cierta estructura con ancho fijo, o que se expanda para cualquier tamaño de pantalla. Previamente el estándar era de 960px, sin embargo, la mayoría de las pantallas actualmente son más grandes, por lo que queda mucha pantalla desperdiciada. Por otra parte, cada vez se ocupan más los dispositivos móviles para navegar la web con pantallas pequeñas, y resultaría difícil navegar un website de 960px. Un ancho de 100% tampoco será práctico para dispositivos móviles por que todo se torna muy pequeño y vamos a hacer zoom para verificar el contenido.
Una salida debería ser crear diversas versiones de nuestro website para dispositivos móviles, tablets y computadoras de escritorio, sin embargo esto nos provoca problemas de mantenimiento y se hará tedioso al cambiar información. Otra solución vendrían a ser los llamados “responsive layout”, lo cual significa que la estructura de nuestro website cambia dependiendo del tamaño de pantalla en el cual se visualiza. diseño web. Muchas características que ofrece son:
– Estructuración de doce columnas
– Peso optimizado de diez kilobytes (comprimido)
– Plantilla adaptable
– Plugins customizados de Jquery
– Válido con todos los navegadores modernos tales como IE7
– Soporta HTML5
– Funciona con CSS3
Otras de las ventajas que permite es que ya cuenta con abundante funcionalidad integrada, ésto te evita que tengas que reinventar la rueda cuanta vez desarrollas un website. Puedes incorporar una importante diversidad de elementos en un abrir y cerrar de ojos:
– navegación con dropdown menus
– pestañas con ajax
– textos dinámicos
– modal windows o popups
– barras de progreso
– tooltips
– botones
– paginación
– carrusel
– autocompletado
Todo esto ya viene listo para verse bien en cualquier navegador, y se degrada de forma adecuada para navegadores más viejos.
Por medio de bootstrap, por ejemplo, podras contar con un diseño de 2 columnas expandidas al 100% normalmente, y una vez que utilizas un celular, una columna se une a otra creando una sola, facilitando la navegación sin necesidad de hacer zoom.
Bootstrap también te proporciona la ventaja de agregar a las imágenes una clase de manera que nunca sobrepasen el 100% del tamaño de la columna en la que se hallan, de esa forma jamás excederán el ancho de pantalla de un celular. Sin interesar el ancho de pantalla, bootstrap expande cada columna en la medida adecuada, en todo dispositivo siempre se verá bien a la vez que se aprovecha toda el área de pantalla.
Aunque, ¿cuál es el truco? Bootstrap utiliza los llamados media queries, que más que todo es código CSS condicional, y nada más aplica dependiendo del tamaño de pantalla.
En seguida podrá 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:
