Bootstrap (Parte I)

Introducción a Bootstrap

Competencias

● Reconocer qué son los framework CSS y las ventajas del uso de Bootstrap para el
desarrollo web.
● Identificar los aspectos claves de la filosofía “mobile first”, su implicancia en la
construcción de sitios web responsivos y la experiencia del usuario.

Introducción

Hasta ahora hemos aprendido cómo crear páginas web utilizando HTML y CSS, estos
conocimientos son la base que nos permitirá construir sitios cada vez más profesionales.

Un aspecto importante para cualquier desarrollador, es optimizar el tiempo en aquellos

aspectos que resultan recurrentes y dedicar sus esfuerzos en dar valor a las características
particulares de cada proyecto. Simplificando el concepto, los frameworks vienen a
apoyarnos a resolver estas tareas repetitivas.

En esta unidad conoceremos qué son los frameworks CSS, cuáles son las ventajas de su
utilización y tendremos un primer acercamiento a Bootstrap. Además, abordaremos una
filosofía muy utilizada actualmente al construir sitios web, que es el “mobile first”.

_ 1

www.desafiolatam.com
Conociendo los frameworks CSS

Comencemos por aprender qué es un framework. En desarrollo nos referimos a un

framework como un conjunto de conceptos, prácticas y criterios enfocados en solventar una
problemática particular y común a los desarrolladores.

Un framework CSS provee una estructura básica que nos ayudará a resolver problemas
típicos de estilo dentro del desarrollo web.

Dentro de los Frameworks CSS, existe una gran cantidad de opciones para elegir como:

● Bootstrap.

● Foundation.

● Bulma.

● Semantic UI.

● UI kit.

La mejor opción para elegir dependerá de lo que queramos hacer y lo que ya conozcamos
preliminarmente.

En nuestro caso, usaremos uno de los framework CSS más completos para crear páginas
web responsivas llamado Bootstrap, que además hoy en día es el más popular.

_ 2

www.desafiolatam.com
¿Qué es Bootstrap?

Bootstrap es un framework CSS, desarrollado y liberado por Twitter, que sirve para maquetar
páginas web de manera rápida y sencilla. Es de código abierto, por lo que lo podemos usar
de forma gratuita y sin restricciones.

¿Qué hace tan popular a Bootstrap?

Las características que hacen de Bootstrap el framework CSS más popular de la web son:

● Fácil de integrar: Para integrar bootstrap a nuestro proyecto necesitaremos ingresar

a Get Bootstrap, copiar el CDN, pegarlo dentro del proyecto y ¡listo!.

● Sistema de grillas: Bootstrap también incluye un sistema de grillas muy completo

con el cual podremos crear layout de manera muy fácil.

● Estilos en la mayoría de los elementos HTML: Los elementos HTML como listas,
botones, formularios, entre otros., vienen estilizados y mejorados con clases. De
manera que nosotros no debemos escribir mucho CSS para estilizar los elementos.

● Una gran lista de componentes: Contiene una gran cantidad de componentes que
podremos usar en nuestra página web.

● Gran documentación: Dentro de la página de Bootstrap podremos encontrar una

excelente documentación, donde nos enseñan con ejemplos a utilizar Bootstrap.
Ésta es mantenida por su gran comunidad y desarrolladores.

_ 3

www.desafiolatam.com
Ejemplos de sitios realizados con Bootstrap

Agence Lincorn Publishing:

Imagen 1. Sitio desarrollado con Bootstrap - Licorn Publishing.

Fuente: licornpublishing.com.

Neat:

Imagen 2. Sitio desarrollado con Bootstrap - Neat.

Fuente: thisisneat.com.

_ 4

www.desafiolatam.com
Kingdom Rush:

Imagen 3. Sitio desarrollado con Bootstrap - Kingdom Rush.

Fuente: kingdomrush.com.

Como hemos visto, Bootstrap es una gran herramienta con la que podremos hacer
atractivos sitios y no necesariamente todos se van a ver igual.

En el siguiente contenido conoceremos un método de trabajo muy importante para crear

sitios web responsivos, que de hecho será la base de todo lo que haremos en el proyecto.

_ 5

www.desafiolatam.com
Conociendo Mobile First

Conoceremos uno de los conceptos más importantes a la hora de crear páginas web
responsivas, o pensadas para ser adaptadas a los distintos tamaños de dispositivo.

De hecho, es tan reconocida que Bootstrap se basó en esta filosofía para crear todo sus
componentes y características. Conocerlo nos dará todas las bases para poder trabajar de
manera óptima con Bootstrap.

¿Qué es mobile first?

Mobile first es una filosofía de desarrollo que apunta a diseñar prioritariamente la

visualización y estructura del sitio en dispositivos móviles.

Luego de tener el diseño establecido para las pantallas reducidas, se irá escalando hacia
pantallas de mayor tamaño.

Imagen 4. Mobile First.

Fuente: Blog Usabilla.com.

Algo importante a saber de esta filosofía es que es completamente opuesta al diseño

responsivo, el que considera primero, el diseño en pantalla de escritorio y luego va
escalando a tamaños más pequeños.

_ 6

www.desafiolatam.com
Desarrollar una página pensando en dispositivos móviles es una gran estrategia, debido al
gran uso que han alcanzado estos dispositivos el último tiempo.

Imagen 5. Número de usuarios de teléfonos móviles entre el 2015 y el 2020 (en millones)
Fuente: Statista.com.

De hecho, se han vuelto tan esenciales para nuestra vida diaria que la cantidad de personas
que tienen un dispositivo móvil es, a la fecha, de 4.93 billones, esto es casi el 63% de la
población mundial.

Entender estos números es importante ya que las tecnologías están apuntando hacia esa
dirección.

_ 7

www.desafiolatam.com
¿Cómo podemos comenzar a trabajar con mobile first?

Para comenzar a trabajar con mobile first en nuestro código, debemos entender cómo
trabajar con diferentes resoluciones de pantalla. Esto conlleva a que debemos aprender a
cómo normalizar los tamaños sobre los cuales trabajaremos mientras desarrollamos la
página.

Trabajar en un mundo donde las resoluciones no tienen un estándar es todo un desafío.

Imagen 6. Trabajar con Mobile First.

Fuente: GTS.com.

Afortunadamente, existen los frameworks CSS, como Bootstrap, que nos pueden ayudar a
lidiar con esto. Dentro de su página existen media queries que contienen tamaños
específicos para diferentes anchos de pantalla y ventanas de visualización.

Imagen 7. Media queries.

Fuente: Desafío Latam.

_ 8

www.desafiolatam.com
Trabajar usando características de los diseños responsivos

Se debe trabajar con funcionalidades usadas en los diseños responsivos, esto incluye:

● Usar la etiqueta meta viewport: El meta viewport es una etiqueta HTML usada para
darle al navegador instrucciones sobre cómo controlar las dimensiones y la escala
de la página. Ésta se pone dentro de la etiqueta <head>.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<width=device-width>: Establece el ancho de la página para seguir el ancho de pantalla

del dispositivo (que variará dependiendo del tamaño del dispositivo y del ancho de la
ventana de visualización del navegador).

<initial-scale=1.0>: Establece el nivel de zoom inicial, cuando el navegador carga la

página por primera vez.

Esta etiqueta nos puede ayudar a mejorar drásticamente la usabilidad de una página web,
puesto que el contenido de la página se escalará dependiendo del tamaño.

En el siguiente ejemplo podemos ver una página no utilizando la etiqueta meta viewport y
otra que sí.

Imagen 8. Ejemplo sin utilizar viewport. Imagen 9. Ejemplo utilizando viewport.

Fuente: w3schools.com. Fuente: w3schools.com.

_ 9

www.desafiolatam.com
Como podemos observar, al no utilizar viewport, tanto la fuente como la imagen no se
adaptan al dispositivo desde el cual se está consultando, lo que ocasiona una mala
experiencia al usuario que está visitando el sitio.

En este enlace puedes experimentar con el código de ambos ejemplos: w3schools -

Responsive Web Design.

● Usar grillas: Las grillas son un componente de estructura, que nos ayuda a disponer
los elementos de una página web de forma óptima, sencilla y rápida.

Imagen 10. Grilla.

Fuente: Weebly.com.

Para hacerlo tenemos dos opciones:

● Nosotros creamos la grilla usando CSS.

● O usamos una grilla prefabricada.

En el caso de este proyecto usaremos la grilla que incluye Bootstrap, debido a que es fácil
de implementar en la diagramación del sitio web.

● Usar imágenes responsivas: El siguiente punto es simple, puesto que para crear
imágenes responsivas sólo debemos usar unidades de medida relativas.

Esto quiere decir que estas medidas estarán basadas en tamaños relativos al tamaño del
viewport o su contenedor. A través de las clases que nos entrega Bootstrap podremos darle
esa propiedad.

_ 10

www.desafiolatam.com
Considerar la experiencia que tendrá el usuario con la página web

El siguiente paso es reconocer la experiencia que tendrá el usuario con nuestro sitio web en
diversos dispositivos.

Reconocer el cómo interactúa el usuario con nuestro sitio es esencial, ya que al saberlo
podremos desarrollar una mejor experiencia al usar características específicas de un
dispositivo en concreto.

Por ejemplo: Podemos aprovechar los gestos de un teléfono para hacer scroll más rápido, o
usar un atajo de teclado para abrir un link en nuestro computador. Tener en consideración
esto hará que nuestras páginas sean más cómodas, demostrando que fueron hechas
pensando en los usuarios.

Priorizar el contenido de la página web

El último punto importante para trabajar con mobile first, es el priorizar el contenido basado
en la importancia que tiene dentro de la página web.

Esto quiere decir, que nosotros debemos ser capaces reconocer cuándo es mejor mostrar o
no un contenido, dependiendo de la resolución de pantalla del dispositivo. Por lo general los
dispositivos móviles, al tener menor tamaño, deben tener un contenido simplificado, que se
enfoque en el objetivo principal del sitio web.

_ 11

www.desafiolatam.com
Ejercicio guiado: Sitio Web Olivia Ros

En esta unidad trabajaremos con un proyecto, pensado en dar énfasis a la marca personal
de su dueña, llamada Olivia Ros. En ella podremos encontrar una barra de navegación,
cuatros secciones que presentan un header donde aparecen dos botones, una sección que
presenta lo que hace, sus últimos trabajos y una sección de contacto, junto con un footer.

Para crear esta página usaremos distintos conceptos que nos servirán para hacer de esta
página un sitio responsivo, es decir, que busca la correcta visualización en distintos
dispositivos.

Partamos por recordar aspectos importantes de HTML y CSS e implementar algunos

conceptos de la filosofía mobile first, para hacer páginas responsivas.

_ 12

www.desafiolatam.com
 Imagen 11. Sitio Web Olivia Ros.
Fuente: Desafío Latam.

_ 13

www.desafiolatam.com
Comencemos a construir el proyecto.

Antes de comenzar, debemos descargar los archivos que se encuentran dentro de los assets
que usaremos en la página web. Con eso listo, comencemos a crear la estructura de
directorios del proyecto.

● Paso 1: Crear un nuevo directorio al cual llamaremos olivia-ros, podemos crearlo

donde más nos acomode, en nuestro caso lo pondremos dentro del Escritorio.

● Paso 2: Entrar a Atom y crear el index.html, en la raíz de la carpeta olivia-ros.

● Paso 3: Agregar todos los directorios que falten en el proyecto. En este caso sería la
carpeta assets, que contendrá todos los diferentes archivos de nuestro proyecto
como las imágenes, los archivos CSS, entre otras cosas.

● Paso 4: Crear la carpeta assets presionando "botón derecho" y luego nueva carpeta.

● Paso 5: Crear dentro de la carpeta assets una carpeta llamada img, donde irán todas
las imágenes del proyecto (descargadas desde assets).

● Paso 6: Mover las imágenes a la carpeta img.

● Paso 7: Crear la carpeta css.

● Paso 8: Crear el archivo style.css presionando nuevo archivo.

Ya hemos terminado de crear todas las carpetas y archivos necesarios para comenzar con
nuestro proyecto.

Imagen 12. Estructura de carpetas.

Fuente: Desafío Latam.

_ 14

www.desafiolatam.com
 ● Paso 9: Lo siguiente que haremos será agregar la estructura HTML de nuestro
proyecto, para hacerlo agregaremos el doctype de la versión HTML5.

<!DOCTYPE html>

● Paso 10: Luego irá la etiqueta HTML.

<html>
</html>

● Paso 11: Y dentro de la etiqueta HTML agregaremos el atributo de idioma llamado

lang. Esta etiqueta ayudará al navegador a reconocer el idioma de nuestra página
web.

<html lang="es">
</html>

● Paso 12: Lo siguiente como sabemos es la etiqueta <head>.

<!DOCTYPE html>
<html lang="es">
<head>
​
</head>
</html>

● Paso 13: Dentro pondremos el meta charset="utf-8" para no tener problemas con
los caracteres especiales.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
</head>
</html>

_ 15

www.desafiolatam.com
 ● Paso 14: Debajo agregaremos el meta visto anteriormente, llamado meta viewport.
Esta meta, como sabemos, nos ayudará a escalar el tamaño del viewport
dependiendo del espacio que dispongamos dentro la ventana del navegador.

● Paso 15: La etiqueta meta viewport contiene en su interior un atributo

width=device-width que establece el ancho de la página basado en el ancho del
dispositivo, además de initial-scale=1.0, que establece el zoom inicial de la
página web al ser cargada la primera vez por el navegador.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
</html>

● Paso 16: Lo último que nos falta es agregar el título de la página usando la etiqueta
<title>. Escribamos como título Olivia Ros | Food Blogger

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Olivia Ros | Food Blogger</title>
</head>
</html>

_ 16

www.desafiolatam.com
Ejercicio propuesto (1)

Contexto

Como vimos, el viewport nos permite controlar las dimensiones y la escala de la página.
Experimentemos qué ocurre al definir distintos tipos de viewport.

Agrega un par de párrafos al código que hemos creado para el sitio de Olivia Ros y abre el
sitio en el navegador. En el inspector de código, visualiza el sitio en versión móvil.

Ve qué ocurre cuando fijamos estas configuraciones:

- content="width=500, initial-scale=1".
- content="width=device-width, maximum-scale=2".
- content="height=device-height".
- Eliminando el meta del viewport.

Intenta resolverlo y luego revisa el paso a paso para comparar tus resultados.

_ 17

www.desafiolatam.com
Solución Ejercicio Propuesto (1)

● Paso 1: Al código HTML que recién creamos, agreguemos un texto de ejemplo, de la

siguiente manera:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Olivia Ros | Food Blogger</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</body>
</html>

● Paso 2: Guardamos. Iremos al navegador y veremos cómo se ve el sitio en versión

móvil.
Esto lo hacemos con el botón derecho sobre la pantalla, en la opción inspeccionar.
En Chrome, para ver la versión móvil, basta con presionar sobre el icono a la
izquierda.

_ 18

www.desafiolatam.com
 Imagen 13. Viewport.
Fuente: Desafío Latam.

Observemos que el contenido se adapta al ancho del dispositivo y mantiene el

tamaño del texto.

_ 19

www.desafiolatam.com
 ● Paso 3: Probemos la siguiente configuración: content="width=500, initial-scale=1"
Para esto, solo modificaremos la línea del viewport, como sigue:

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=500, initial-scale=1">
<title>Olivia Ros | Food Blogger</title>
</head>

Guardamos y vemos qué ocurre, refrescando la página.

Imagen 14. Viewport.

Fuente: Desafío Latam.

Observemos que parte del contenido se pierde, debido a que fijamos un ancho de
500px y, por ejemplo, el Iphone X del ejemplo que estamos viendo, tiene un máximo
de 375px.

_ 20

www.desafiolatam.com
 ● Paso 4: Probemos la siguiente configuración: content="initial-scale=1,
maximum-scale=1"
Para esto, solo modificaremos la línea del viewport, como sigue:

<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title>Olivia Ros | Food Blogger</title>
</head>

Al guardar y refrescar, podemos ver que nos permite hacer zoom-in solamente hasta
2 veces el tamaño del contenido.

Imagen 15. Viewport.

Fuente: Desafío Latam.

_ 21

www.desafiolatam.com
 ● Paso 5: Probemos la siguiente configuración: content="height=device-height"
Para esto, solo modificaremos la línea del viewport, como sigue:

<head>
<meta charset="utf-8">
<meta name="viewport" content="height=device-height">
<title>Olivia Ros | Food Blogger</title>
</head>

Si guardamos y refrescamos la vista, podemos observar que toma por defecto el

máximo alto del dispositivo, lo que hace que se pierda parte del texto hacia los
costados:

Imagen 16. Viewport.

Fuente: Desafío Latam.

_ 22

www.desafiolatam.com
 ● Paso 6: Finalmente, probaremos cómo se visualiza el texto sin configurar el viewport.
Para esto, eliminaremos la etiqueta del HTML:

<head>
<meta charset="utf-8">
<title>Olivia Ros | Food Blogger</title>
</head>

Vemos que al guardar y recargar la página, el contenido se ve correctamente, pero al

hacer zoom-in se pierde la escala del texto y parte del contenido.

Imagen 17. Viewport.

Fuente: Desafío Latam.

Es por esto que es importante el uso del viewport en nuestros sitios, pues nos
permite controlar cómo el usuario va a interactuar con el contenido y evitar
comportamientos inesperados en la visualización del mismo.

_ 23

www.desafiolatam.com
Integrando Bootstrap

Competencias

● Implementar adecuadamente Bootstrap en un proyecto web, utilizando el CDN y los

script externos necesarios, para la utilización de los recursos del framework en la
construcción de sitios web.

Introducción

En el capítulo anterior vimos las bases de la filosofía “mobile first” y aprendimos sobre la
utilidad de los frameworks CSS para el desarrollo web. Ya es momento de que vayamos
conociendo Bootstrap, cómo integrarlo en nuestros proyectos y cómo leer su
documentación.

De acá en adelante, comprenderemos la importancia de saber leer la documentación

disponible de cada uno de los recursos que utilicemos, una habilidad clave para cualquier
desarrollador. Bootstrap en particular tiene todo el contenido disponible en su web, con un
buscador amigable y ejemplos de código para implementar. Comencemos por conocer
cómo agregar sus recursos al proyecto.

_ 24

www.desafiolatam.com
Integrando el CDN de Bootstrap

Para integrar Bootstrap a nuestro proyecto, debemos incluir algunos recursos externos que
requiere para operar.

Una de las herramientas clave tanto para este paso como para los siguientes, es conocer la
documentación de Bootstrap. Para ello iremos a su página oficial: https://getbootstrap.com/

Ahí seleccionaremos la opción “documentation”, donde encontraremos todos los enlaces y

detalles relacionados a los recursos que necesitaremos para trabajar con el framework y
sus componentes.

Imagen 18. Documentación oficial Bootstrap.

Fuente: Getbootstrap.com.

Para integrar Bootstrap a nuestro proyecto, Bootstrap nos propone un template de inicio, que
incluye las referencias y etiquetas necesarias para trabajar. También podemos agregarlas
manualmente a nuestro proyecto previamente creado.

_ 25

www.desafiolatam.com
 1. CSS.

Lo primero es agregar el recurso CSS de bootstrap en la etiqueta <HEAD>, de la

siguiente manera:

<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.cs
s"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqK
I2xXr2" crossorigin="anonymous">

Como aprendimos en la unidad anterior, es importante el orden en que cargamos los

recursos. En este caso, el CSS de Bootstrap debe estar al final de los otros recursos
de estilo del programa.

2. Javascript

Para estos recursos, existe un recurso “bundle” que contiene todo lo necesario para
que funcionen los componentes de Bootstrap:

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrC
XaRkfj" crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.m
in.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7
ZeZDyx" crossorigin="anonymous"></script>

_ 26

www.desafiolatam.com
 O podemos agregar Jquery, Popper.js y Bootstrap por separado, de la siguiente
forma:

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrC
XaRkfj" crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu73
5Sk7lN" crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5
D92v7s" crossorigin="anonymous"></script>

● jQuery Es una librería de JavaScript que permite agregar interactividad y

efectos visuales en un sitio web.

● Popper JS: Es una librería de JavaScript que permite añadir tooltips y

popovers en elementos HTML.

● Bootstrap JS: Es una serie de componentes de JavaScript para Bootstrap.

Necesita de jQuery y Popper JS para funcionar.

Estos scripts según la propia documentación de Bootstrap, deben ir antes del cierre
de la etiqueta <body> y en ese orden, ya que va leyéndolos desde arriba hacia abajo.

Además, Bootstrap provee una plantilla de base que podemos utilizar al iniciar nuestros
proyectos:

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">

<!-- Bootstrap CSS -->

<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.cs

_ 27

www.desafiolatam.com
s"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqK
I2xXr2" crossorigin="anonymous">

<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>

<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrC
XaRkfj" crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.m
in.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7
ZeZDyx" crossorigin="anonymous"></script>

<!-- Option 2: jQuery, Popper.js, and Bootstrap JS

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrC
XaRkfj" crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu73
5Sk7lN" crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5
D92v7s" crossorigin="anonymous"></script>
-->
</body>
</html>

_ 28

www.desafiolatam.com
Integrando Bootstrap mediante descarga

Otra forma de integrar Bootstrap a nuestro proyecto, es descargando los archivos y

agregandolos a nuestras carpetas.

Para hacer esto, debemos ir a la opción “download” dentro del menú derecho de la
documentación y descargar los archivos bajo la opción de “compiled CSS and JS”:

Imagen 19. Descarga de archivos de bootstrap.

Fuente: Getbootstrap.com.

Una vez que hemos descargado los archivos, vemos que contiene dos carpetas: “js” y “css”.
Copiaremos ambas y la llevaremos a la carpeta assets del proyecto en el que estemos
trabajando:

Imagen 20. Descarga de archivos de bootstrap.

Fuente: Desafío Latam.

_ 29

www.desafiolatam.com
La forma de integrarlo al proyecto es referenciando los archivos a la ruta local de nuestro
proyecto, de esta manera:

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">

<!-- Bootstrap CSS -->

<link rel="stylesheet" href="assets/css/bootstrap.min.css">

<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>

<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew
+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>

<!-- Option 2: jQuery, Popper.js, and Bootstrap JS

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew
+OrCXaRkfj" crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.j
s"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7n
iu735Sk7lN" crossorigin="anonymous"></script>
<script src="assets/js/bootstrap.min.js"></script>
-->
</body>
</html>

_ 30

www.desafiolatam.com
CSS de Bootstrap

Es importante que entendamos qué hacemos al poner el código CSS de Bootstrap:

<!-- Bootstrap 4.1.3 CSS -->

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.m
in.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ
8ERdknLPMO" crossorigin="anonymous">

Lo que hicimos fue llamar, desde CDN, el código CSS de Bootstrap minificado, o sea,
condensado para reducir su tamaño. Esto se logra eliminando los caracteres superfluos, sin
que deje de funcionar.

Este código minificado tiene sólo 7 líneas de código, ya que al estar minificado evita
caracteres como espacios adicionales, saltos de línea, sangrías y comentarios. Con el
objetivo de que pese menos.

Cuando se desarrollan sitios web uno de los aspectos importantes a tomar en cuenta es la
experiencia del usuario. Los archivos minificados mencionados anteriormente, aportan en
cierta medida que la experiencia sea positiva, disminuyendo el tiempo de carga de nuestro
sitio y optimizando los recursos, frameworks y librerías que se estén ocupando.

_ 31

www.desafiolatam.com
En la siguiente imagen veremos un ejemplo de cómo se vería un archivo CSS minificado:

Imagen 21. CSS Bootstrap.

Fuente: Desafío Latam.

Pero si este código no estuviese minificado sería muchísimo más largo, en específico
tendría 9030 líneas de código.

Imagen 22. CSS Bootstrap 2.

Fuente: Desafío Latam.

_ 32

www.desafiolatam.com
Como pueden ver, el CSS que hemos integrado de Bootstrap es nada más ni nada menos
que una gran hoja de estilo. Lo que hace Bootstrap es proveer propiedades definidas para
las distintas etiquetas HTML, además de características definidas para diversas clases
creadas que se pueden utilizar en distintos elementos desde el HTML.

Desde ahora en adelante debemos plantearnos la idea de siempre leer la documentación de

lo que estemos utilizando. En el caso de Bootstrap también debemos leer la documentación
para sacarle el mayor provecho al framework y no reescribir código.

Imagen 23. Documentación Bootstrap.

Fuente: Getbootstrap.com.

_ 33

www.desafiolatam.com
Navbar

Para utilizar componentes de Bootstrap, podemos consultar la documentación y copiar el

código donde queramos utilizarlo.

Para hacer esto, vamos a la página oficial GetBootstrap.com y dentro de documentación

(Documentation) escogemos Components.

Ahora, en el menú de la izquierda, buscamos la opción Navbar.

Para integrarlo dentro de un proyecto, ya teniendo todos los recursos agregados en archivo
HTML, copiamos el snippet de código que se encuentra bajo el encabezado Nav.

Imagen 24. Navbar.

Fuente: Getbootstrap.com.

_ 34

www.desafiolatam.com
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div style="page-break-after: always;"></div>

_ 35

www.desafiolatam.com
Ejercicio guiado: Integrando Bootstrap al Sitio Web Olivia Ros

En el siguiente ejercicio integraremos todos los archivos externos que usaremos en el

proyecto, utilizando el CDN de Bootstrap (con sus scripts necesarios), además, incluiremos
el componente navbar, para probar cómo trabajar con los snippets de código que nos ofrece
la documentación oficial del framework.

Entender estos flujos es muy relevante, ya que son la base para construir proyectos más
complejos utilizando Bootstrap para manejar los aspectos de estilo de nuestro sitio web.

Lo primero que haremos será integrar Bootstrap 4 dentro de nuestra página web.

● Paso 1: Debemos ir a getbootstrap.com. Dentro de la página revisaremos si nos

encontramos en la versión actual de Bootstrap.

Si miramos debajo del botón "get started" podremos ver cuál es la versión más
reciente de este framework. También lo podremos hacer buscando en la barra de
navegación.

Para nuestros ejercicios utilizaremos la versión 4.5.

Nota importante: Bootstrap ha tenido varios cambios de versiones recientemente, de

modo que es importante conocer sus últimas novedades visitando el blog.

● Paso 2: Volvamos al home del sitio de Bootstrap, clickeamos "get started", ahí nos
darán el paso a paso para incorporar Bootstrap.

● Paso 3: Copiamos el link de los recursos CSS y la pegamos debajo del meta
viewport.

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Olivia Ros | Food Blogger</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.mi
n.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg
6uqKI2xXr2" crossorigin="anonymous">
</head>

_ 36

www.desafiolatam.com
 ● Paso 4: Agregamos arriba un comentario con la versión de Bootstrap. El hacer esto
nos ayudará a reconocer de manera más rápida el código incluido en nuestro HTML.
Para incluir un comentario debes escribir:

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Olivia Ros | Food Blogger</title>
<!-- Bootstrap 4.5.3 CSS -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.mi
n.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg
6uqKI2xXr2" crossorigin="anonymous">
</head>

● Paso 5: El siguiente paso será copiar jQuery, Popper.js y el JavaScript de Bootstrap

para pegarlo en index.html, pero esta vez lo pegaremos debajo, justo antes del cierre
de la etiqueta <body>. La razón del por qué dejaremos estos archivos ahí es porque
los navegadores leen los scripts de forma secuencial, bloqueando el renderizado de
la página hasta leerlos completamente.

La solución a esto es poner estos archivos debajo de todos los scripts, puesto que el
navegador cargará primero el HTML, luego el CSS y finalmente los archivos
JavaScript. Suena muy técnico, pero aplicarlo nos ayudará a cargar nuestra página
web de manera más rápida.

● Paso 6: Sabiendo esto, es momento de pegar los scripts antes del cierre de la
etiqueta <body>:

<body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew
+OrCXaRkfj" crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.j
s"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7n
iu735Sk7lN" crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.
js"

_ 37

www.desafiolatam.com
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBN
mNb5D92v7s" crossorigin="anonymous"></script>
</body>

Se debe tener en cuenta cuál es la etiqueta usada para integrar los archivos
JavaScript.
Esta etiqueta se llama <script> y es la encargada de contener los scripts de
JavaScript. Se puede usar para llamar un archivo externo o escribir directamente los
script dentro de la etiqueta. Con esto interiorizado, sigamos mejorando nuestro
código.

● Paso 7: Agreguemos un comentario arriba de cada script mencionando qué contiene

cada archivo.

● Sobre el primero escribiremos: <!--jQuery 3.5.1→.

● Sobre el segundo escribiremos: <!--Popper JS 1.16.1→.
● Sobre el último escribiremos: <!--Bootstrap JS 4.5.3→.

<!--jQuery 3.5.1-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew
+OrCXaRkfj" crossorigin="anonymous"></script>
<!--Popper JS 1.16.1-->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.j
s"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7n
iu735Sk7lN" crossorigin="anonymous"></script>
<!--Bootstrap JS 4.5.3-->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.
js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBN
mNb5D92v7s" crossorigin="anonymous"></script>

_ 38

www.desafiolatam.com
 ● Paso 8: Bien, ya solo nos falta agregar los CDN de las fuentes e íconos que
usaremos dentro del proyecto.

En la maqueta del proyecto podemos ver que se ocupa la tipografía:

● Raleway Regular (400).

● Raleway Bold (700).

Así que iremos a Google Fonts y haremos los pasos ya conocidos para vincular la
tipografía con nuestro proyecto.

Paso 9: Buscaremos y seleccionaremos la tipografía "Raleway". Con la fuente

seleccionada, debemos customizar los estilos que necesitamos descargar. En
custom marcamos la opción de los pesos que requerimos: Regular y Bold.

En embed copiaremos la URL que necesitamos añadir a nuestro archivo HTML:

<link href="https://fonts.googleapis.com/css?family=Raleway:400,700"
rel="stylesheet">

● Paso 10: También iremos a Font Awesome a copiar el código para llamarlo en
nuestro archivo y así tener a disposición los íconos de Font Awesome.

<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3
Gp2irVfcrp" crossorigin="anonymous">

● Paso 11: Lo último que haremos antes de probar si funciona Bootstrap es agregar el
archivo con nuestros estilos.

Agreguemos la etiqueta <link> y luego agreguemos la ruta de nuestro archivo CSS.

La ruta es la siguiente:

<link rel="stylesheet" href="assets/css/style.css">

Con esto hemos terminado con la integración de todo lo que necesitaremos en este
proyecto, ahora vamos a probar si está todo OK para comenzar.

_ 39

www.desafiolatam.com
 ● Paso 12: Para probar si funcionó la integración de Bootstrap, debemos copiar algún
componente de Bootstrap y ver si se están respetando los estilos que le entrega a
las distintas clases del contenido en sí, es decir, un contenido que en HTML no
debería tener formato, con Bootstrap se le atribuye.

Para este ejercicio utilizaremos un componente interesante: navbar, ya que tenemos

uno en la maqueta del proyecto.

Entonces como vimos en la lectura, iremos a la opción ‘navbar’ en la documentación

de Bootstrap: Components.

● Paso 13: Allí dentro, copiemos todo el snippet de código que se encuentra bajo el
encabezado Nav y lo pegaremos dentro de la etiqueta <body>, justo cuando empieza:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Olivia Ros | Food Blogger</title>
<!-- Bootstrap 4.5.3 CSS -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.mi
n.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg
6uqKI2xXr2" crossorigin="anonymous">
<!--Google Font: Raleway (Regular, Bold)-->
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700"
rel="stylesheet">
<!--Font Awesome 5.15.1-->
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3
Gp2irVfcrp" crossorigin="anonymous">
<!--Mi estilo-->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!--Navbar agregado-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"

_ 40

www.desafiolatam.com
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<!--jQuery 3.5.1-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew
+OrCXaRkfj" crossorigin="anonymous"></script>
<!--Popper JS 1.16.1-->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.j
s"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7n
iu735Sk7lN" crossorigin="anonymous"></script>
<!--Bootstrap JS 4.5.3-->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.
js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBN
mNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>

Recordemos indentar de forma que podamos identificar visualmente cuál etiqueta

pertenece a un bloque de código determinado.

_ 41

www.desafiolatam.com
 ● Paso 14: Ahora guardamos y luego vamos a abrir index.html dentro de nuestro
navegador.

Imagen 25. Index.

Fuente: Desafío Latam.

Podemos ver que hemos escrito un navbar con estilo, colores, tipografía y tamaños
-todo gracias a Bootstrap- entonces podemos comprobar que el CSS de Bootstrap
está bien incorporado.

_ 42

www.desafiolatam.com
 ● Paso 15: Ahora, para comprobar que los scripts están bien incorporados,
achiquemos el tamaño de resolución del navegador. Podemos ver que el menú se
transformó en el llamado "menú hamburguesa".

Imagen 26. Menú hamburguesa.

Fuente: Desafío Latam.

_ 43

www.desafiolatam.com
 Probemos presionando la hamburguesa del menú para ver si se despliega el menú.

Imagen 27. Desplegar menú.

Fuente: Desafío Latam.

Efectivamente, los ítems del menú se desplegaron. Eso sólo se puede lograr con
JavaScript, por lo tanto podemos asumir que también está bien incorporado.

Con esto hemos comprobado que hemos integrado todo lo que necesitaremos en
este proyecto, preliminarmente.

_ 44

www.desafiolatam.com