Bootstrap: Introducción y primeros pasos

¡Bienvenidos queridos lectores! No es de nuestro agrado publicar un rootie los viernes, velamos por vuestra integridad lectora. En ohmyroot! sabemos que trabajáis duro durante la semana y los viernes ya estáis cansados, agotados, con ganas de que empiece el fin de semana y disfrutar de vuestra familia, amigos… Pero a veces las cosas se nos complican a mi compañero Merkury y a mí, imposibilitándonos hacer las publicaciones en días más idóneos.

Hoy vamos a introducir Bootstrap, un estupendo framework CSS con múltiples funcionalidades CSS y JS que nos harán la vida más fácil.

Cuéntame más, qué es eso de Bootstrap

Bootstrap es un conjunto de archivos HTML, CSS y Javascript bien definidos y exhaustivamente testados que componen una sólida estructura sobre la cual construir tu proyecto web o aplicación. Si estás metido en el mundo del desarrollo web ya habrás oído hablar de él. Actualmente la última versión estable es la 3.3.7

Este framework nos ayuda a agilizar la creación del interfaz de nuestra página web. Con la particularidad, que usando Bootstrap, nuestro sitio estará adaptado a la pantalla del dispositivos con el que accedemos, ya sea un ordenador, tablet, smartphone, television…. Esto significa que tendremos una Web responsive o adaptativa, y desde hace pocos meses, es fundamental de cara al posicionamiento en Google.

Además de agilizar la creación de nuestra web, con Bootstap conseguiremos crear un diseño limpio, intuitivo, usable y de poco peso. Por lo que la carga de nuestra web será muy rápida. Es muy cómodo, porque muchas de las funcionalidades que necesitaremos ya están desarrolladas. También ofrecen acceso a una gran cantidad de documentación en varios idiomas y una comunidad que dará respuestas a todas tus dudas.

En definitiva, obtendremos una serie de ventajas:

  1. Tendremos una web responsive, se verá bien en todos los dispositivos y ayudará al posicionamiento en buscadores.
  2. Cómodo, tendremos gran cantidad de funcionalidades creadas.
  3. La velocidad de carga de la web es rápida.
  4. Compatibilidad con la mayoria de navegadores.
  5. En constante desarrollo, tiene una gran comunidad detrás y va mejorando cada vez mas.

¿Por qué debo utilizar Bootstrap en mi proyecto?

Empezar un proyecto web desde cero puede ser laborioso y te puede llevar bastante tiempo mientras vas construyendo los diferentes componentes y testándolos en los diversos navegadores.

Bootstrap te provee de una biblioteca de componentes reusables que puedes usar en cada proyecto, como:

  • un sistema de rejilla o “grid”
  • una barra de navegación
  • botones o estilos tipográficos

Preparados para funcionar en todos los navegadores; adaptándose a todos los tipos de pantalla, tanto de móvil, como tablet o escritorio.

Con Bootstrap te ahorras todo el trabajo inicial de estructuración CSS. Además de proporcionar un código revisado y testado que es mantenible y escalable. Sin duda una sólida estructura sobre la cual construir tu proyecto.

Práctica común

Hoy en día su uso se encuentra muy extendido. No es extraño encontrar ofertas de trabajo en las cuales además de conocimientos de HTML y CSS y Javascript se exige el dominio de Bootstrap. La suave curva de aprendizaje hace que sea una herramienta sencilla de usar por todos los miembros de un equipo de desarrollo, lo que incrementa la productividad.

¿Por dónde empezar?

Para descargar la última versión debes acudir a la página http://getbootstrap.com/ y pulsar el botón “Download Bootstrap”. Te dirigirá a la sección “Getting started” de la página. Hay diferentes maneras de integrar Bootstrap en tu proyecto. En este rootie hablaremos de la primera de ellas, que es descargarnos la carpeta comprimida.

En el apartado “Getting started” pulsamos el botón “Download Bootstrap”. Se descargará una carpeta comprimida compuesta por tres carpetas:

  • css: Incluye todos los estilos predefinidos por Bootstrap.
  • fonts: Incluye una fuente de iconos svg listos para usar.
  • js: Con todo el javascript necesario para que los componentes y efectos de Bootstrap funcionen.

Nuestro primer ejemplo

Vamos a crear una pequeña web HTML5 utilizando Bootstrap.

  1. Descargamos Bootstrap tal y como he explicado antes
  2. Creamos la carpeta de nuestro proyecto
  3. Copiamos el contenido de la carpeta descargada dentro de nuestro proyecto
  4. Generamos un archivo index.html y lo abrimos con cualquier editor de texto

Código del index.html

Todo es cuestión de conocer las reglas y pautas que ofrece el framework; cuanto más lo usemos, más fácil será adaptarnos a sus clases y sintaxis.

Hasta aquí el rootie de hoy, ¡espero que os haya gustado y que tengáis un buen fin de semana!

 

2 Comments

Deja un comentario

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