Acompáñanos en este tutorial para aprender un poco más sobre bootstrap, este increíble framework que nos hace la vida un poco más fácil.

La web ha ido evolucionando de manera acelera y a su vez el desarrollo de esta ha ido volviéndose un tanto más complejo. Por eso han aparecido una amplia variedad de frameworks que nos hacen la vida más sencilla, algunos muy útiles y otros no tanto. Hoy hablaremos de un framework en específico llamado Bootstrap.

Inicialmente creado como una solución interna para twitter y posteriormente liberado al público en agosto del 2011 como un proyecto Open Source en GitHub, en los meses siguientes a su liberación la comunidad apoyó activamente este proyecto hasta convertirlo en lo que es hoy “the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.” como lo indica en su página web.

Boostrap facilita la maquetación de sitios web, además de ser compatible con preprocesadores como Less y Saas, nos ofrece las herramientas para que nuestro sitio web se vea bien en toda clase de dispositivos, ahorrandonos así el trabajo de tener que rediseñar un sitio web.

Para usar Bootstrap en nuestros proyectos podemos hacerlo de diferentes maneras, ya sea agregando el código CDN a nuestro HTML para usarlo de manera remota, descargando bootstrap de su página web o usando alguna de las otras opciones que nos muestra.

Si utilizas las opción de descargar bootstrap, deberás descomprimir y agregar las carpetas a tu proyecto para que funcione, además de linkear los archivos de bootstrap y jquery para que los plugins funcionen correctamente.

Un ejemplo de cómo quedaría tu proyecto sería el siguiente.

Con esto ya podremos comenzar a trabajar con bootstrap.

Ahora veamos un ejemplo sencillo de lo que podemos hacer con Bootstrap, utilizando codepen.io.

Para habilitar el uso de bootstrap en codepen.io, deberemos ir a Settings  y luego a la pestaña de CSS y en Add External CSS agrar bootstrap con Quick-add

Con esto ya podremos comenzar a trabajar con bootstrap.

Ahora veamos un ejemplo sencillo de lo que podemos hacer con Bootstrap, utilizando codepen.io.

Para habilitar el uso de bootstrap en codepen.io, deberemos ir a Settings  y luego a la pestaña de CSS y en Add External CSS agrar bootstrap con Quick-add

Ya  con esto podremos usar bootstrap en codepen.io.

Como se ve en el ejemplo, hemos usado las clases que nos brinda Bootstrap para dar algunos estilos a nuestro HTML, escribiendo en este caso muy poco CSS. Este ejemplo es solo una pequeña muestra de lo que podemos hacer con bootstrap.

Puedes revisar la guía de inicio de bootstrap para ir aprendiendo más sobre su uso, en próximos tutoriales tocaremos un poco más de Bootstrap.

¡Y con esto terminamos este breve tutorial! Recuerda que en Devcode tenemos una serie de cursos que complementarán tu aprendizaje, para acceder a ellos solo tienes que registrarte en la plataforma.

Espero que haya sido de tu agrado y si fue así, no olvides compartirlo con tus amigos y en tus redes sociales, y registrarte a la plataforma para acceder a más contenido. Si tienes dudas u opiniones, déjala en los comentarios.