Introducción a Bootstrap

Descripción

Bootstrap es una librería “open source” para el desarrollo Web Front End con
interfaces “responsive” que se pueden hacer de una manera fácil y rápida. Durante
estas cuatro partes que componen el camino a través de esta tecnología, te
iremos llevando de la mano para que te familiarices con esta librería, que se ha
convertido en una de las herramientas de programación de uso libre más usada
por los programadores alrededor del mundo.

Iniciamos explorando las rejillas como soporte estructural al proceso de

diagramación de las Interfaces Web. Bootstrap incluye un amplio conjunto de
componentes que son manejados como clases o clases extendidas, que a su vez
tienen atributos y modificadores. Iremos trabajando con los principales
componentes de la tecnología, tales como los botones, las insignias (badges),
alertas, toast, barras de navegación, menús, formularios, migajas de pan
(breadcrumbs), modales, tooltips y popovers, de forma tal que te vayas
acostumbrando a su uso. Para ello te suministramos una serie de ejemplos y
actividades prácticas para que diseñes tus propias interfaces.

Además de muchas ganas de aprender y compromiso en tu rutina de estudio,

necesitarás un computador o portátil donde puedas realizar tus ejercicios y
visualizar el material que hemos diseñado para ti. En cuanto a las herramientas,
no te preocupes, cada vez que se requiera alguna te iremos indicando cómo
instalarla y configurarla.

Objetivos de aprendizaje

1. Describir las características de Bootstrap que lo hacen una herramienta

para el desarrollo de interfaces Web responsive.
2. Usar la librería Bootstrap con la finalidad de construir interfaces Web
adaptativas.
3. Aplicar el concepto de rejillas de Bootstrap para la diagramación de
interfaces Web básicas.
4. Desarrollar formularios para interfaces Web usando las clases definidas en
Bootstrap apropiadamente.
5. Emplear la librería Bootstrap para construir tablas con diferentes
características, estilos y propiedades adaptativas.
6. Crear notificaciones a los usuarios usando las diferentes formas soportadas
por Bootstrap.
 Configuración de Bootstrap
¡Te felicitamos por seguir avanzando en tus conocimientos acerca de Bootstrap!
En este caso queremos que configures Bootstrap para una página HTML
siguiendo los siguientes pasos:

1. Crea una página index.html

2. Descarga o enlaza las librerías necesarias para Bootstrap 4:
o CSS de Bootstrap
o JavaScript de JQuery
o JavaScript de popper
o JavaScript de Bootstrap

Puntos de verificación

Verifica que las librerías estén cargadas y que cambie el tipo de fuente
predeterminada del navegador.

Interfaces Responsive, Mobile First

¡Estamos complacidos por encontrarnos de nuevo! En esta oportunidad vamos a
explorar el diseño Mobile First en Bootstrap.

Bootstrap es un framework que permite diagramar y crear componentes

adaptables a distintos tamaños de pantalla y resoluciones, que podemos encontrar
en dispositivos, tales como: celulares, tabletas, desktop y monitores grandes, así
como también los modos: vertical y horizontal, comúnmente presentes en equipos
móviles.
Para ello, Bootstrap se basa en los distintos “breakpoints” que definen cuándo se
considera un tamaño u otro. A continuación se definen los breakpoints:

Dispositivo Ancho de pantalla (px) Nombre en Bootstrap

Celulares menor que 576 xs
Celulares / Tabletas 576 a 768 sm
Tabletas 768 a 992 md
Laptop / Desktops 992 a 1200 lg
Desktops mayor que 1200 xl
Además, cuando un programador desarrolla un programa, usualmente lo hace
utilizando una estrategia llamada “mobile first” que se refiere a programar
pensando primero en la interfaz que se va a desplegar en un celular, luego en
tabletas y finalmente en desktops.

La idea es crear la interfaz con más restricciones (celular) ya que esto facilita el
diseño para dispositivos más grandes, en lugar de hacerlo en sentido contrario.
Las estrategias que se aplican más comúnmente para adaptar la interfaz son:

 Apilar elementos o cambiar la diagramación, tal como, llevar elementos de

dos columnas a una.
 Ocultar / mostrar elementos, tal como, quitar opciones para móviles.
 Sustituir elementos, por ejemplo, cambiar un menú de hamburguesa para
celulares, por un menú horizontal en desktop.

Aprende haciendo
Rejillas en Bootstrap
¡Saludos! Te damos la bienvenida a aplicar lo visto en relación a las rejillas en
Bootstrap. A continuación te animamos a que crees una interfaz básica para una
página Web usando dichas rejillas.

Logo
Col1 Col2
Pie
Puedes usar las clases: .border y .text-center en las columnas para visualizar la
diagramación.

Puntos de verificación

Verifica que la aplicación luzca de la manera sugerida.

Desafío práctico - Diagramación
¡Felicitaciones por llegar hasta aquí! Eso significa que ya revisaste el material
correspondiente a las rejillas en Bootstrap. ¡Estás avanzando muy bien! Con este
recurso podrás consolidar y aplicar los conocimientos adquiridos. Así que a
continuación crea una interfaz con la siguiente diagramación:

Logo
Col1 Col2
A B C
Pie

 La primera sección (logo+título) ocupa el ancho de la pantalla: El logo

ocupa ⅓ del ancho mientras que el título ocupa el resto
 La sección interna tiene dos columnas y la sección final tiene tres
columnas.
 El pie de página ocupa todo el ancho de la pantalla.

Puedes usar las clases: .border y .text-center en las columnas para visualizar la
diagramación.

Interfaces con Bootstrap

¡Saludos! Estamos felices porque seleccionaste el mejor momento para afianzar lo
estudiado acerca de Bootstrap. A continuación deseamos que completes el
siguiente reto donde deberás crear la siguiente interfaz:

Título
Menú I1 I2 I3 I4
C1 C2
Puntos de verificación

Que los elementos estén dispuestos como se muestran en el diagrama.

Desafío práctico
¡Felicitaciones! Nos satisface el ritmo de trabajo e interés que has puesto en
descubrir Bootstrap. A continuación, te animamos a codificar la siguiente
diagramación, de forma tal que sirva tanto para desktop como para celular.

Vista Desktop
Título

Menú I1 I2 I3 I4

C1 C2

Vista Celular
Título

Menú

I1

I2

I3

I4

C1

C2
 Manejo de Colores
¡Qué alegría estar juntos de nuevo para seguir conociendo Bootstrap! En esta
oportunidad nos centraremos en la lista de colores usados en esta herramienta.

Bootstrap maneja una lista de colores que pueden ser usados en nuestra
aplicación. A continuación se muestran los más importantes:
Estos colores se pueden emplear para establecer el color de texto con las
clases: .text-<color>

También pueden ser usados como colores de fondo con las clases: .bg-<color> o
en otros elementos como botones y bordes.
Aprende haciendo
Tablas en Bootstrap
¡Felicitaciones! Nos satisface el ritmo de trabajo e interés que has puesto en
descubrir Bootstrap. A continuación te animamos a codificar la siguiente
diagramación, de forma tal que sirva tanto para desktop como para celular.

Vista Desktop
Título
Párrafo

Columna Columna Columna Columna

Columna 1 Columna 2 Columna 3 Columna 4

Pie

Puntos de verificación

Verifica que los elementos luzcan como el boceto. La tabla debe ser responsive.
Desafío práctico
¡Saludos! Te damos la bienvenida a aplicar lo estudiado en relación a las tablas,
tipografía e imágenes en Bootstrap. A continuación te animamos a crear la
siguiente interfaz:

Para celulares

Para Desktop
Observa que la imagen y la tabla deben ser responsive.
 Jumbotron
¡Saludos! Excelente momento para seguir descubriendo las clases, atributos y
opciones que ofrece Bootstrap. En esta oportunidad explicaremos dos
componentes que ofrece la herramienta para ser usados en las páginas
principales con contenido a resaltar: Jumbotron y Cards (Tarjetas).

Jumbotron

El Jumbotron es un componente diseñado para ocupar el ancho de la página y su

intención es presentar un contenido destacado (es usado para mostrar el
producto).

Mi producto
Este grandioso producto te brindará una gran calidad de vida

Comienza a usarlo

Ver más
En general es una caja para resaltar un contenido.

Para usarlo debes agregar la clase .jumbotron y colocar un título y su contenido. A

continuación un ejemplo:

<div class="jumbotron">
<h1 class="display-4">Mi producto</h1>
<p class="lead">
Este grandioso producto te brindará una gran calidad de vida.
</p> <hr class="my-4" />
<p>
Comienza a usarlo
</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Ver
más</a>
</div>

El código para una caja se muestra a continuación:

<div class="card">
<div class="card-header">
Oferta
</div>
<div class="card-body">
<h5 class="card-title">Producto 1</h5>
<p class="card-text">La descripción de este producto</p>
 <a href="#" class="btn btn-primary">Detalle</a>
</div>
</div>
y este puede meterse en cualquier rejilla según nuestra conveniencia.

Artículo de medicina
¡Te damos la bienvenida! ¡Qué bueno que ya estés aplicando lo visto acerca de
Bootstrap! Con base en eso, te animamos a crear una página que represente un
artículo de medicina con los siguientes elementos:

 Título
 Subtítulo
 Migaja de pan
 Texto del artículo
 Una imagen

Puntos de verificación

Verifica que tu artículo tenga todos los elementos y que sea responsive.
Desafío práctico
¡Te damos la bienvenida a aplicar tus primeros conocimientos acerca de
Bootstrap! A continuación te animamos a construir una interfaz que cumpla con los
siguientes requerimientos.

Una empresa tiene un sistema administrativo y una sección para gestionar los
usuarios; se te ha solicitado crear una interfaz como la siguiente. Recuerda tomar
en cuenta:

 La palabra usuario con h3

 El badge que indica la cantidad de usuarios
 La tabla
 Los botones de acciones
 El botón de agregar usuario
 Carrusel
¡Saludos! Con este recurso vas a seguir profundizando en los aspectos más
importantes de Bootstrap; en este sentido, vamos a destacar el carrusel, el cual es
un elemento que sirve para mostrar láminas que van rotando contenido. En
general, el contenido se va rotando automáticamente a través de controles del
mismo carrusel.

Viajes

PreviousNext
Ejemplo de controles son las flechas que permiten movernos a la siguiente lámina
o a la anterior. También tenemos los indicadores que muestran atajos para
cualquier lámina en el carrusel.

Para construir un carrusel debemos crear un div con la clase .carousel y .slide,
que puede tener los indicadores (opcional), las láminas, y los botones (opcional).

<div id="ejemploCarrusel" class="carousel slide" data-

ride="carousel">
<-- aqui van los indicadores -->
<-- aqui van las laminas -->
<-- aqui van los botones -->
</div>
Los indicadores tienen la siguiente estructura:

<ol class="carousel-indicators">
<li data-target="#ejemploCarrusel" data-slide-to="0"></li>
<li data-target="#ejemploCarrusel" data-slide-to="1"></li>
...
</ol>
Las láminas tienen el siguiente formato:

<div class="carousel-inner">
<div class="carousel-item active">
<img src="./i1.jpg" class="d-block w-100" />
</div>
<div class="carousel-item">
<img src="./i2.jpg" class="d-block w-100" />
</div>
...
</div>
Los botones tienen la siguiente estructura:

<a class="carousel-control-prev" href="#ejemploCarrusel"

role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-
hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#ejemploCarrusel"
role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"
></span> <span class="sr-only">Next</span> </a>
Esperamos que este contenido acerca de los carruseles en Bootstrap sea de tu
utilidad para ir creciendo en los recursos que facilitan la construcción de interfaces
usables.
 Formulario de registro
¡Felicitaciones! Nos complace el ritmo de trabajo e interés que has puesto en
descubrir los formularios en Bootstrap. A continuación te presentamos una
empresa que necesita crear un formulario de registro con los siguientes campos:

 nombre
 correo
 género (masculino o femenino)
 hobbies (fútbol, leer, cine, música)
 descripción

Te invitamos a crear el formulario usando Bootstrap.

Puntos de verificación

Verifica que todos los campos mencionados estén en tu página y que sea
responsive.

Desafío práctico
¡Felicitaciones por llegar hasta aquí! Eso significa que ya revisaste el material
correspondiente a formulario y entradas complejas en Bootstrap. ¡Estás
avanzando muy bien! Con esta actividad podrás consolidar y aplicar los
conocimientos adquiridos.
Un amigo tiene una agencia de viajes y te ha pedido que hagas un carrusel de
imágenes para los viajes. Este carrusel debe cumplir los siguientes
requerimientos:

 El carrusel debe ir rotando las imágenes automáticamente cuando se

cargue la página.
 Se deben rotar tres imágenes cuadradas.
 Deben aparecer los controles para avanzar o retroceder en el carrusel.
 Debe ser responsive:
1. Ocupar 11 espacios de rejilla centrado en dispositivos pequeños.
2. Ocupar 7 espacios de rejilla centrado en dispositivos medianos o
grandes.

Conclusión
Introducción a Bootstrap
Bootstrap es una librería para crear interfaces Web que se adaptan a dispositivos
con diversos tamaños de pantallas (diseño responsive). Esta tecnología surge de
un proyecto interno de Twitter y con el tiempo se puso a la disposición de los
desarrolladores alrededor del mundo, como una herramienta open source.

Bootstrap está basado en JavaScript, CSS, HTML y JQuery, y está desarrollado

en SASS el cual permite escribir los estilos CSS de forma más compacta y con
más funcionalidades.

Luego de haber culminado exitosamente el curso de Introducción a

Bootstrap has desarrollado las capacidades siguientes:

 Describir las características de Bootstrap que lo hacen una herramienta

para el desarrollo de interfaces Web responsive.
 Usar la librería Bootstrap con la finalidad de construir interfaces Web
adaptativas.
 Aplicar el concepto de rejillas de Bootstrap para la diagramación de
interfaces Web básicas.
 Desarrollar formularios para interfaces Web usando las clases definidas en
Bootstrap apropiadamente.
 Emplear la librería Bootstrap para construir tablas con diferentes
características, estilos y propiedades adaptativas.
 Crear notificaciones a los usuarios usando las diferentes formas soportadas
por Bootstrap.

Entre las características de Bootstrap encontramos que proporciona facilidades

para el desarrollo de interfaces responsive, agiliza la interoperabilidad de las
interfaces Web que pueden funcionar en diversos navegadores, sin necesidad de
cambios en el código, provee un conjunto de interfaces pre hechas que acortan el
tiempo de diseño de una página Web, soporta el diseño basado en la
diagramación usando rejillas y se ha convertido en un estándar para los
desarrollos Front End.

Para instalar Bootstrap debemos ir al sitio oficial de esta librería, y tenemos la

opción de descargar la versión local o la versión que se encuentra en la nube.
Como parte de la instalación se bajan tres librerías necesarias para iniciar
Boostrap: JQuery, popper y JavaScript.

Los breakpoints en Bootstrap se basan en la especificación de diversos anchos y

altos los cuales son adaptados a los tamaños de las pantallas de los dispositivos
móviles, lo que nos permite pasar de una dimensión de pantalla a otra cuando
estamos programando de una forma más fácil. Ellos son parte del sustento de lo
que se conoce Mobile First, que se refiere a programar pensando primero en la
interfaz que se va a desplegar en un celular, luego en tabletas y finalmente en
desktops.

Las rejillas constituyen parte importante en el proceso de construir interfaces

adaptativas. Como su nombre lo indica, ellas representan una especie de
cuadrícula para diagramar el aspecto de nuestra interfaz, y en particular hacerla
adaptable o responsive. Básicamente las rejillas incluyen columnas cuyos
tamaños pueden ser configurados de acuerdo al aspecto que deseamos darle a
nuestra interfaz.

Explorando los Componentes

Por defecto, los navegadores despliegan los elementos de una interfaz de forma
predeterminada. Bootstrap sobreescribe estos estilos para permitir una manera
homogénea de dibujar estos elementos, sin importar el navegador que se esté
empleando.

Otro aspecto importante en esta herramienta es el manejo de tablas. Bootstrap

proporciona soporte para hacer que estas se adapten al tamaño de las pantallas
de los dispositivos, a través del uso de los modificadores de tamaño (e.g. sm y
md) y sean más fáciles de recorrer a través del empleo de la barra de
desplazamiento del navegador.

Otro aspecto relevante de Bootstrap es la nomenclatura de colores. Esto agiliza la

asignación de colores a diversos componentes de nuestra interfaz, tal como a los
textos. En esta nomenclatura encontramos que, por ejemplo, al color de éxito
(success) le podemos asignar el color verde.

Bootstrap se caracteriza por disponer de una serie de atributos y modificadores

que se pueden aplicar a los componentes estructurales de una interfaz, tal como
las rejillas y las tablas. Estos se usan para alterar los márgenes y espaciados de
las columnas en la pantalla de forma adaptativa.
Usando Bootstrap podemos insertar imágenes en una interfaz. El aspecto de la
imagen en la pantalla se puede cambiar a través de la utilización de modificadores
que la hacen adaptativa, o que tenga bordes redondeados entre muchas otras
opciones.

Las migajas de pan o breadcrumbs son componentes que nos indican dónde
estamos posicionados dentro de la jerarquía de navegación de nuestra página, por
ejemplo, podemos estar en la página de libros, dentro de categorías, dentro de
Historia. Otro elemento de navegación ampliamente utilizado es el botón. Hay
varios tipos de botones, tal como el botón más simple al que podemos cambiarle
el aspecto, el color de relleno y el borde. Hay otra opción que hace que un enlace
luzca como un botón o viceversa, es decir que un botón sea un enlace. Varios
botones a su vez se pueden agrupar para formar un botón grupal.

A continuación conocemos que existen una serie de componentes de Bootstrap

para trabajar con etiquetas y notificaciones. El primero de ellos es el Alert que
despliega un mensaje para el usuario; el segundo es la insignia o badge que actúa
como una etiqueta que se puede adjuntar a algún elemento en nuestra interfaz.
Finalmente, encontramos los toasts que se emplean para definir notificaciones
más elaboradas que el alert y se despliegan como resultado de algún evento, tal
como la creación de un usuario.

A través de Bootstrap también es posible diseñar formularios con diversos arreglos

y aspectos. Los campos de un formulario pueden desplegarse uno debajo del otro,
de manera tal que cada campo tiene una etiqueta localizada encima. Otra forma
de presentar un formulario es ordenando los campos en una grilla (o matriz).
Adicionalmente, los campos se pueden dibujar en una línea, uno a continuación
del otro. Los campos del formulario pueden también organizarse de forma tal que
las etiquetas estén en una columna y los campos en otra, que es un formulario
horizontal.

Además, Bootstrap facilita nuestro trabajo con los campos de un formulario a

través del uso de prefijos, tal como un símbolo de @ que anteceden el contenido
del campo, o los sufijos como las unidades de medida (e.g. cm, mm) que pueden
seguir un valor introducido en un campo numérico. El sufijo también puede ser un
botón. Bootstrap además personaliza otros campos, tal como el campo rango,
empleado para seleccionar un valor en un rango de valores determinados.
Adicionalmente otorga una manera de customizar algunos tipos de checkboxes, tal
como el switch que solemos encontrar en las interfaces de configuración de los
dispositivos móviles, y la selección de archivos usando una interfaz independiente
del navegador.