Comenzando con Bootstrap – Parte 1

21 agosto, 2016
CSS, HTML, JS
by DiMaNacho

Algún día tenía que arrancar con mi blog, como no se me ocurría de qué hablar, se me ocurrió explicar los primeros pasos comenzando con Bootstrap, algo que seguro muchos lo saben, o lo sacan “de taquito” si leen la documentación, pero que igualmente muchos conocidos sé que no lo tienen claro y no conocen las ventajas.

Primero que todo:

¿Qué es Bootstrap?

Según nuestro gran amigo Google, al poner especificamente esa pregunta nos dice:

Bootstrap es un framework de css, en otras palabras es un conjunto de archivos CSS que incluyes en tu página y puedes empezar a maquetar el sitio web en minutos, sin tocar una sola linea de CSS. Lo puedes bajar haciendo click aquí.

Cómo creo que eso no deja muy claro, voy a ponerlo con mis palabras, capaz que a alguno no le gusta la explicación, pero voy a hacer una pequeña explicación con términos para que cualquiera lo pueda entender:

¿Qué es Bootstrap (en criollo)?

Bootstrap es una plantilla o template (hablando mal pero para que se entienda), es decir un conjunto de hojas de estilo y archivos javascript (estos últimos opcionales) que creó Twitter y que nos permiten armar una web responsive de una manera muy rápida y sencilla, sin tener que estar pendiente de las media queries si precisamos maquetar o prototipar algo rápido ya que cuenta con un diseño que te ayuda a tener botones, menús, listas, elementos de formulario, entre otras cosas, que son atractivos para el usuario promedio. A su vez, si miramos la documentación e incluímos los JS opciones en nuestro proyecto, podemos contar con tabs, acordeones, carouseles, popups, alertas, y varias “soluciones de vida” más que te pueden sacar de varios apuros.

Habiendo dicho esto que seguramente muchos me van a querer matar entramos en la siguiente pregunta:

¿Bootstrap me sirve para cualquier web?

La respuesta es totalmente relativa al gusto de la consumidora o el consumidor.

La verdad es que en mi caso trato siempre de usarlo, pero no por el diseño (algo que voy a comentar luego) o porque quiera prototipar, sino por lo fácil que me hace implementar cambios que contemplen una solución responsive, además de contar con una extensa lista de clases (de css) que me ahorran pila de tipeo. Eso si, siempre tratando de no usar el diseño base, ya es un diseño muy quemado y caractéristico, luego de que veas como es vas a empezar a notar que muchas webs usan bootstrap, y que no se queman en retocar los elementos prediseñados, ahi es donde considero está la diferencia. Pero no quiero aburrir más, vamos a lo que rinde.

¿Qué ofrece Bootstrap?

Voy a tratar de enlistar todo lo que me iré acordando que tiene y explicar brevemente por si no conocés el término:

  • Mobile First: Es una metodología de diseño y desarrollo donde arrancás pensando en el tamaño más chico y luego vas “agrandando” las cosas. Se dice que te hace enfocar en el contenido más importante e indispensable. En este caso es importante tenerlo en cuenta porque siempre se arranca pensando en la resolución más chica, y las clases luego van a funcionar sobre escribiendo la siguiente más grande, y luego la otra más grande y así suscesivamente.
  • Grilla de 12 columnas: Es un sistema de columnas que se empezó a implementar hace varios años cuando empezaron a aparecer distintos tipos de resoluciones de pantalla, pensar en cuantas columnas va a utilizar un elemento en vez de pensar cuantos pixeles o porcentaje tiene que usar, termina siendo bastante cómodo y fácil de entender después de que le agarrás el chiste.
  • Soporte para LESS y SASS: Si tu intención es aprender a optimizar tanto tu tiempo maquetando y usando buenas practicas y herramientas, optimizar resultados, está bueno que investigues esto que son conocidos como “preprocesadores”, en este caso de CSS. Si ya los conocés, te recomiendo que aproveches a usarlos con Bootstrap.
  • Glyphicons: Esto sería una tipografía de iconos, que tan solo poniendo un span y determinadas clases, va a mostrar simplemente un icono, y contamos con bastantes muy útiles para el diseño de una interfase “coqueta”.
  • Elementos de interfaz bien trabajados: Es bueno no tener que depender de lo que tu browser (o explorador) te devuelve, ya sea un input que chrome te lo muestra de una manera y en firefox de otra, acá se resetea y estandariza el diseño de todos los elementos, etiquetas o grupos de etiquetas teniendo en cuenta incluso los eventos del mismo, es decir, si hacés foco en un input, va a tener una “luz” (box-shadow) celeste que va a hacer darse cuenta al usuario que input tiene seleccionado en un formulario que capaz tiene muchos de estos.
  • Muchas clases de ayuda (de css): tan solo precisás revisar la documentación de css para encontrar cosas útiles como la clase “text-center” que te va a centrar automáticamente el texto (o los elementos con display-block) que están dentro del mismo, o si tenés un link o botón con el class “btn” y si le sumás “btn-primary”, que si no le diste tu “toque personal” y dejaste el CSS de fábrica, te va a mostrar el mismo botón que tenias, pero con el color primario que es celeste en bootstrap, y hay otras variantes como “success”, “alert”, “error” y más (que serían “btn-success” “btn-alert”… bueno, entendiste), o “text-uppercase” que te pasa todo el texto a mayúsculas, y está “capilize” y “lowercase”. Capaz que pensás “Eso lo hacés con CSS”, si, es CSS, obviamente, pero sabés lo que agiliza hacer esto sin tener que tocar mucho la hoja de estilos? Tan solo decirle un conjunto de clases a un elemento, vas a notar la diferencia.
  • Componentes JS: Si bien ya lo mencioné más arriba, es necesario incluirlo en esta lista, dentro de la documentación de JS muy bien presentada, podés encontrar desde el slider que mencioné, hasta los conocidos “tooltips” (esos cartelitos tipo globitos de historieta que podés meterlos arriba de una palabra como para brindar una ayudar al usuario con algunos elementos de tu web), modales (conocidos erroneamente como popups), que cuentan con barra de título, botón para cerrar y ciertas personalizaciones bastante copadas.

Hay un montón más de cosas que van a tener que descubrir, son son embolantes enlistar todas si es tan solo entrar a su web para ver todo lo que brinda.

¿Qué preciso para arrancar?

Si llegaste hasta acá y estás copado con meterte en bootstrap, voy a explicarte una manera muy sencilla para arrancar con tu proyecto incluyendo bootstrap, pero ignorando de momento la parte de SASS o LESS, que eso lo dejaré para un próximo post.

Vamos a crear una carpeta, donde para este caso vamos a crear un index.html con lo siguiente:

No tiene gran misterio ni tiene mucha cosa para no entreverar, un documento con el DOCTYPE de HTML5, un head donde le indico el charset para no tener que estar peleando con los tíldes o caracteres raros, un título hermoso para recordarte del bobo de casa y luego simplemente el body.

Ahora vamos a tener que incluirle 1 un archivo de CSS, el de bootstrap, y para eso vamos a usar algo llamado CDN.

CDN: Esto sería “Content Delivery Network” o “Red de distribución de contenido”, hablando nuevamente en criollo, esto sería un conjunto de servidores que se encargan de alojar gratuitamente (aunque también hay algunos pagos) determinadas librerías, para este caso, Bootstrap al ser una librería popular, podemos encontrar CDN populares que nos brindan un acceso a la librería sin tener que alojarlo nosotros. Si bien son unos solos kb, muchas veces rinde pila usar un CDN por el hecho de que vamos a hacer un request externo, el cual no va a estar en la misma cola de petición que los locales, a su vez, es mucho más seguro que el servidor del CDN tenga mejor acceso el usuario que al hosting de nuestro sitio, por lo que es muy seguro que lo cargue más rápido y al ser algo popular, corremos también con el viento a favor de que ya tenga en caché ese archivo, porque capaz que tampoco tiene que descargarlo.

Explicando el CDN volvamos a su uso.

Bootstrap en su web recomienda usar el siguiente link:

Si prestan atención, no tiene mucho misterio, un <link> como el de cualquier archivo de CSS que podemos incluir en nuestro head, la particularidad que tiene son los atritbutos “crossorigin” y “integrity”, que en este caso voy a hacer un comentario sin conocimiento, pero de una experiencia que tuve, que fue a raíz de esos dos atributos algunas librerias no me querían cargar, simplemente borrando ambos atributos, volvió todo a la normalidad, no supe encontrar la razón aunque tampoco busqué mucho al respecto, por lo que si ven que tienen un problema similar, prueben borrando el integrity y el crossorigin a ver si no lo soluciona.

Luego de que tenemos este link copiado (y recomiendo que cada proyecto nuevo revisen en la web si no hay una versión nueva de bootstrap, no sean boludos), vamos a ponerlo ANTES que nuestra propia hojas de estilo en el head, por lo que ahora nuestro index sería algo así:

Aunque te parezca muchísima vuelta hacer ese <link>, eso es todo, si, es todo, con eso ya podés usar lo básico que brinda Bootstrap.

¿Vamos a dejarlo un poco mejor?

Incluyamos el theme base y el js necesario para poder usar todo lo que mencioné de alertas, modales, y demás.

Nuevamente en la documentación de Bootstrap, todavía seguimos en el “Getting Started“, ahora veamos el resto de archivos que sugiere incluir:

Tenemos un <link> de CSS, y un <script> para JS.

Vamos por partes, el theme vamos a linkearlo ANTES de NUESTRO CSS pero DESPUÉS DE BOOTSTRAP por lo que resultaría lo siguiente:

Ahora quedaría el <script>.

Yo soy de los que lo usan antes de cerrar el body, soy de los que considera que es mejor dejar el JS al final para que renderice el maquetado antes y el usuario pueda ver “algo” antes de que cargue toda la lógica JS de la web o app, digo “yo” porque sé que hay quién piensa que es mejor arriba y tiene sus argumentos, yo pienso que es mejor ahi y tengo argumentos (para otro post :D) por lo que ahora simplemente voy a ponerlo abajo y ustedes deciden donde lo hacen, si ahi o en el head, funcionar va a funcionar, así que nos resultará lo siguiente:

Y nuevamente, si te cansaste “copypasteando” tanto, me alegro decirte que eso es todo, ya tenemos bootstrap en su 100%, como mencioné arriba no es el único método, hay otras maneras de incluirlo, esta es la forma rápida y sin tener que descargar nada, pero tené en cuenta que para probarlo precisás si o si estar conectado a internet.

 

Ya llegamos hasta acá, ahora viene la parte divertida que es maquetar, pero creo que lo mejor va a ser hacer otra publicación para no hacer tan extensa esta (además de que una de mis gatas ya se durmió).

Dejá tu comentario y decime que te parece este tipo de tutoriales y si querés que siga con una segunda parte. Tu comentario va a servirme para saber si sigo o me dedico a otra cosa 🙂

¡Gracias por llegar hasta acá!

About

Gamer de ❤, Desarrollador Web/Mobile, super fanático de la tecnología, emprendedor, me gusta ayudar y enseñar, siempre tratando de no faltar a ningún evento! Dirigiendo el team Guiik y esperando no tener que usar cheats para pasar al siguiente nivel ?
  • Buenas, me resulto interesante el tutorial (con imágenes y con todo). Yo en la facultad manejamos C++ por lo que web no he manejado nada, con esto voy a ver si me animo a empezar 😀

    Saludos

    • Me alegro, eso me animá a continuar entonces 😀

  • Muy bueno, a seguir. saludos

  • Mathias Moscardi

    Excelente Nacho!! Espero mas tutoriales, un abrazo!!