Manejo de Twitter bootstrap en nuestro sitio web para un diseño dinámico y eficiente
Una de las primeras preguntas que nos hacemos siempre que se diseña un website, es si pretendemos alguna estructura con ancho fijo, o que se expanda para todo tamaño de pantalla. Antes el estándar era de 960px, sin embargo, la mayoría de las pantallas actuales son más grandes, por lo que queda mucha pantalla desperdiciada. Aparte, cada vez se emplean más los dispositivos móviles para navegar la web con pantallas pequeñas, debido a eso resultaría dificultoso navegar un website de 960px. Un ancho de 100% tampoco se vuelve práctico para dispositivos móviles ya que todo se vuelve muy pequeño y debemos hacer zoom para verificar el contenido.
Dicha situación podemos resolverla diseñando varias versiones de nuestro website para dispositivos móviles, tablets y computadoras de escritorio, aún cuando eso provoca problemas de mantenimiento y es muy tedioso al cambiar información. También se podría 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. Ciertas características que brinda son:
– Diseño de doce columnas
– Peso reducido de diez kilobytes (comprimido)
– Diseño adjustable
– Plugins personalizados de Jquery
– Compatible con todos los browsers de hoy en día incluído IE7
– Funciona con HTML5
– Soporta CSS3
Respecto a distintas ventajas que posee, es que ya trae bastante funcionalidad integrada, evitando que tengas que inventar de nuevo el hilo negro cada vez que diseñas algún website. Podrías agregar una gran variedad de elementos en 1 2 por 3:
– navegación con menús desplegables
– tabs con ajax
– textos dinámicos
– modal windows o ventanas emergentes
– barras de progreso
– tooltips
– botones
– paginación
– carrusel
– autocompletado
Todo eso ya queda preparado para verse bien en cada browser, y se degrada correctamente para navegadores antiguos.
Un ejemplo de lo que se logra efectuar con bootstrap: podríamos tener un diseño de 2 columnas expandidas al 100% normalmente, sin embargo toda vez que se visualiza por medio de un celular, se apila una columna encima de otra y se vuelven 1 sola, de forma que resulta mucho más fácil de navegar y sin tener que hacer zoom.
Otra de las ventajas es que a las imágenes se les podría agregar una clase de manera que nunca excedan el 100% del tamaño de la columna en la que se hallan, de esa manera nunca excederán el ancho de pantalla de un celular. Bootstrap extiende cada columna a la proporción correcta, no interesa el ancho de pantalla, todo el tiempo se verá bien en todo dispositivo y aprovechando al máximo toda el área de pantalla.
Pero, ¿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 de acuerdo al tamaño de pantalla.
Ahora mismo 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:
