Utilización de Twitter bootstrap en nuestro página web de cara a un diseño adaptivo y eficiente
La primera inquietud que se presenta al trazar un website, es si diseñamos una estructura con ancho fijo u otra que se expanda para todo tamaño de pantalla. Al inicio teníamos un estándar de 960 pixeles, pero en esta época la mayoría de las pantallas modernas son más grandes, obviamente buena parte de la pantalla quedaría desperdiciada. Por otra parte, los dispositivos móviles con pantallas pequeñas son utilizados cada vez con mayor frecuencia para navegar la web, por eso mismo resultaría impráctico 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 requiere hacer zoom a fin de ver el contenido.
Una salida sería diseñar variadas versiones de nuestro website para dispositivos móviles, tablets y computadoras de escritorio, pese a que eso nos provoca problemas de mantenimiento y se volvería tedioso al variar información. Otra solución serían 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. Algunas características que brinda son:
– Diseño de doce columnas
– Tamaño reducido de diez kb (compactado)
– Plantilla adjustable
– Añadidos personalizados de Jquery
– Válido con todos los navegadores modernos tales como IE7
– Soporta HTML5
– Funciona con CSS3
Dentro de muchas utilidades que tiene, es que ya posee abundante funcionalidad integrada, eludiando que tengas que inventar de nuevo el hilo negro cada vez que diseñas un website. Puedes incorporar una importante variedad de elementos en 1 2 por 3:
– navegación con menús ajaxeados
– tabs con ajax
– acordeones
– ventanas o popups
– porcentaje de progreso
– tooltips
– botones
– paginación
– carrusel
– autocompletado
Todo ello ya queda dispuesto para verse excelente en cada browser, y se degrada de manera apropiada para browsers antiguos.
Gracias a bootstrap, por ejemplo, podras contar con un diseño de 2 columnas expandidas al 100% normalmente, y siempre que usas un celular, una columna se une a otra logrando una sola, facilitando la navegación sin tener que hacer zoom.
Bootstrap asimismo te proporciona la ventaja de añadir a las imágenes una clase de manera que nunca sobrepasen el 100% del tamaño de la columna en la que se encuentran, de esa manera nunca 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.
Te estarás preguntando ¿cómo lo hace?, Bootstrap hace uso de los identificados como media queries, básicamente tal cosa es código CSS condicional, y tan sólo aplica según el tamaño de la pantalla.
En seguida 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:
