Utilización de Twitter bootstrap en nuestro sitio web para un diseño adaptivo y veloz
Una primera inquietud que se da al proyectar un website, es si creamos una estructura con ancho fijo u otra que se expanda para cualquier tamaño de pantalla. Al comienzo teníamos un estándar de 960 pixeles, no obstante en la actualidad la mayoría de las pantallas modernas podrían ser más grandes, obviamente buena parte de la pantalla quedaría desperdiciada. Por otro lado, los dispositivos móviles con pantallas pequeñas son utilizados cada vez con más frecuencia para navegar la web, por esto mismo se volverí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 reduce y se requiere hacer zoom para ver el contenido.
Esa situación podemos resolverla haciendo diferentes versiones de nuestro website para dispositivos móviles, tablets y computadoras de escritorio, no obstante tal cosa implica problemas de mantenimiento y es muy fastidioso al cambiar información. Igualmente se puede acudir a los llamados “responsive layout”, quiere decir que la estructura del website varía de acuerdo al tamaño de la pantalla en la que se visualiza. diseño web. Algunas características que ofrece son:
– Estructura de doce columnas
– Tamaño pequeño de 10 kilobytes (compactado)
– Diseño adaptable
– Añadidos customizados de Jquery
– Válido con todos los browsers de hoy en día incluído IE7
– Soporta HTML5
– Funciona con CSS3
Otras de las ventajas que presenta es que ya cuenta con abundante funcionalidad integrada, eso te evita que tengas que volver a inventar la rueda cuanta vez diseñas un website. Podrás agregar una inmensa diversidad de elementos en un abrir y cerrar de ojos:
– navegación con menús dinámicos
– pestañas dinámicos
– acordeones
– modal windows o ventanas emergentes
– barras de progreso
– tooltips
– botones
– paginación
– carrusel
– autocompletado
Todo ello ya viene dispuesto para verse bien en cualquier navegador, y se degrada de manera apropiada para navegadores más viejos.
Un ejemplo de lo que se puede efectuar con bootstrap: podríamos tener un diseño de 2 columnas expandidas al 100% normalmente, no obstante siempre que se visualiza a través de un celular, se apila una columna arriba de otra y se hacen una sola, de forma que se vuelve mucho más fácil de navegar y sin tener que hacer zoom.
Bootstrap además te facilita 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 hallan, de esa forma no excederán el ancho de pantalla de un celular. Sin importar el ancho de pantalla, bootstrap expande cada columna en la proporción adecuada, en cualquier dispositivo toda vez se verá bien a la vez que se aprovecha toda el área de pantalla.
Te estarás preguntando ¿cómo lo logra?, Bootstrap hace uso de los llamados media queries, esencialmente tal cosa es código CSS condicional, y tan sólo aplica de acuerdo al 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:
