Qué es Bootstrap y como funciona en el diseño web

Bootstrap, el framework para hacer tus diseños con responsive design

Bootstrap, es un framework originalmente creado por Twitter, que permite crear interfaces web con CSS y JavaScript, cuya particularidad es la de adaptar la interfaz del sitio web al tamaño del dispositivo en que se visualice. Es decir, el sitio web se adapta automáticamente al tamaño de una PC, una Tablet u otro dispositivo. Esta técnica de diseño y desarrollo se conoce como “responsive design” o diseño adaptativo.

El beneficio de usar responsive design en un sitio web, es principalmente que el sitio web se adapta automáticamente al dispositivo desde donde se acceda. Lo que se usa con más frecuencia y que a mi opinión personal me gusta más es el uso de media queries, que es un módulo de CSS3 que permite la representación de contenido para adaptarse a condiciones como la resolución de la pantalla y si trabajas las dimensiones de tu contenido en porcentajes, puedes tener una web muy fluida capaz de adaptarse a casi cualquier tamaño de forma automática.

Que es bootstrap y como ayuda a hacer tus sitios web responsivos

 

Pero si no quieres nada que ver con los media queries, otra muy buena opción es el uso del framework de Bootstrap, que como te dije te ayudará a desarrollar tus sitios adaptativos.

Aun ofreciendo todas las posibilidades que ofrece Bootstrap a la hora de crear interfaces web, los diseños creados con Bootstrap son simples, limpios e intuitivos, esto les da agilidad a la hora de cargar y al adaptarse a otros dispositivos. El Framework trae varios elementos con estilos predefinidos fáciles de configurar: Botones, Menús desplegables, Formularios incluyendo todos sus elementos e integración jQuery para ofrecer ventanas y tooltips dinámicos.

Bootstrap, el framework para hacer tus diseños con responsive design

 

Aquí te mostraré algunos ejemplos de sitios web que utilizan Bootstrap. Twitter, es el ejemplo más conocido que usa este framework, sin embargo aquí te mostramos otros ejemplos que también lo usan.

getflywheel.com

ejemplo de sitios que usan bootstrap

 

atmail.com

ejemplo de sitio web que usa bootstrap para diseño responsivo

 

sugarsync.com

ejemplo de sitio web que usa bootstrap para diseño adaptativo

 

monitorbacklinks.com

ejemplo de sitio web con bootstrap para diseño responsivo

 

learndot.com

ejemplo de sitio web con bootstrap para diseño responsive

 

Pero por si fuera poco Bootstrap también puede ser integrado a  WordPress, de hecho existen muchas plantillas que implementan Bootstrap en este conocido Gestor de Contenidos, puedes revisar toda la información en este enlace, http://strappress.com/demo/shortcodes/


Particularmente yo prefiero trabajar con media queries, me gusta más tener el control completo del código y los resultados que generen lo cambios, pero me parece una excelente opción el uso de Bootstrap, de hecho lo voy a probar en un diseño y veremos cómo me va. Tú también, anímate a probarlo y usarlo en alguno de tus proyectos.

Para más información puede visitar la web de Bootstrap aquí, http://getbootstrap.com

Espero que les haya gustado este pequeño artículo. Saludos y que la pasen muy bien!

Puedes ver también el artículo sobre las ventajas y desventajas de usar Bootstrap

 

Artículos que también te interesarán

Un comentario en “Qué es Bootstrap y como funciona en el diseño web

  1. Super claro! gracias por la data!!!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> 

Close