El toolkit Twitter bootstrap te ayuda a mejorar el diseño de el Sitio Web
Una de las primeras interrogantes que nos planteamos cada vez que se lleva a cabo un website, es si deseamos alguna estructura con ancho fijo, o que se expanda para todo tamaño de pantalla. Previamente el estándar era de 960px, pese a que, la mayoría de las pantallas actualmente son más grandes, por lo que quedaría mucha pantalla desperdiciada. Por otro lado, cada vez se ocupan más los dispositivos móviles para navegar la web con pantallas pequeñas, por lo que resultaría impráctico navegar un website de 960px. Un ancho de 100% tampoco se vuelve práctico para dispositivos móviles por que todo se hará muy pequeño y debemos hacer zoom para ver el contenido.
Esta situación podríamos resolverla desarrollando distintas versiones de nuestro website para dispositivos móviles, tablets y computadoras de escritorio, aún cuando ésto supone problemas de mantenimiento y es muy tedioso al cambiar información. Igualmente se podría acudir a los llamados “responsive layout”, quiere decir que la estructura del website cambia de acuerdo al tamaño de la pantalla en la que se visualiza. diseño web. Ciertas características que brinda son:
– Plantilla de 12 columnas
– Peso pequeño de 10kb (compactado)
– Plantilla adjustable
– Complementos customizados de Jquery
– Válido con todos los navegadores actuales incluído IE7
– Funciona con HTML5
– Funciona con CSS3
Aparte de distintas virtudes que posee, es que ya posee mucha funcionalidad integrada, eludiando que tengas que reinventar el hilo negro cada vez que creas un website. Podrás agregar una excelente variedad de elementos en 1 2 por 3:
– navegación con dropdown menus
– pestañas con ajax
– textos dinámicos
– modal windows o ventanas emergentes
– barras de progreso
– tooltips
– botones
– paginación
– carrusel
– autocompletado
Todo ello ya queda dispuesto para verse excelente en todo browser, y se degrada de forma adecuada para browsers antiguos.
Mediante bootstrap, por ejemplo, contarás con un diseño de 2 columnas expandidas al 100% normalmente, y siempre que empleas un celular, una columna se une a otra creando una sola, facilitando la navegación sin necesidad de hacer zoom.
Bootstrap además te permite 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 no 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 utiliza toda el área de pantalla.
Pero, ¿cuál es el truco? Bootstrap emplea los llamados media queries, que básicamente 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:
