Universidad Nacional Autónoma de Nicaragua

UNAN-León
Depto. de Computación

I. OBJETIVOS

Que el estudiante:

1. Conozca los fundamentos del uso de la rejilla de Bootstrap

2. Utilice los componentes y estilos prefabricados disponibles en la versión 3 del framework responsivo
Bootstrap.

II. INTRODUCCION TEORICA

Construir un sitio web responsivo puede ser una tarea muy complicada que requiere de mucho trabajo y de
solidos fundamentos de CSS. Con el objetivo de facilitar el trabajo de construcción de sitios web responsivos,
existen una gran variedad de frameworks CSS disponibles para su uso.

Un framework CSS es un conjunto de estilos y componentes prefabricados que facilitan la creación de sitios web
responsivos. Actualmente existe una gran diversidad de frameworks CSS entre los cuales se pueden mencionar:
 Bootstrap
 Foundation
 Skeleton
 Pure.css
 Materialize
 Un largo etcétera.

Introducción a Bootstrap

Bootstrap es un framework CSS desarrollado inicialmente (en el año 2011) por Twitter que permite dar forma a
un sitio web mediante librerías CSS que incluyen tipografías, botones, cuadros, menús y otros elementos que
pueden ser utilizados en cualquier sitio web.

Aunque el desarrollo del framework Bootstrap fue iniciado por Twitter, fue liberado bajo licencia MIT en el año
2011 y su desarrollo continua en un repositorio de GitHub. A la fecha en que se realizó esta guia la versión actual
de Bootstrap era la 3.3.6.

Bootstrap es una excelente herramienta para crear interfaces de usuario limpias y totalmente adaptables a todo
tipo de dispositivos y pantallas, sea cual sea su tamaño. Además, Bootstrap ofrece las herramientas necesarias
para crear cualquier tipo de sitio web utilizando los estilos y elementos de sus librerías.

1 / 21
Desde la aparición de Bootstrap 3 el framework se ha vuelto bastante más compatible con desarrollo web
responsive, entre otras características se han reforzado las siguientes:
Universidad Nacional Autónoma de Nicaragua
UNAN-León
Depto. de Computación

 Se ha añadido un sistema GRID que permite diseñar usando un GRID de 12 columnas donde se debe
plasmar el contenido.
 Boostrap 3 establece Media Queries para 4 tamaños de dispositivos diferentes variando dependiendo
del tamaño de su pantalla, estas Media Queries permiten desarrollar para dispositivos móviles y tablets
de forma mucho más fácil.
 Boostrap 3 también permite insertar imágenes responsive, es decir, con solo insertar la imagen con la
clase “img-responsive” las imágenes se adaptaran al tamaño.

SISTEMA DE GRID DE BOOTSTRAP

Bootstrap incluye una rejilla fluida pensada para móviles (mobile first) y que cumple con el diseño web
responsivo. Esta rejilla crece hasta 12 columnas a medida que crece el tamaño de la pantalla del dispositivo.

Mobile-first significa que se debe comenzar realizando el diseño para móviles (puesto que es la pantalla más
limitada o restrictiva) y luego ir pensando en el diseño para pantallas más grandes.

Figura 1. Sistema de columnas de Boostrap

Centrando los contenidos de la pagina

Si se desea centrar una pagina respecto a la ventana del navegador, se debe encerrar su contenido dentro de
elemento y aplicarle la clase .container :

<div class="container"> ... </div>

La anchura del contenedor varía en cada punto de ruptura del diseño para adaptarse a la rejilla. Los contenedores
NO se pueden anidar debido a su propiedad padding y a su anchura fija.

2
Universidad Nacional Autónoma de Nicaragua
UNAN-León
Depto. de Computación

Media queries de Bootstrap

Bootstrap utiliza las siguientes media queries para establecer los diferentes puntos de ruptura en los que la rejilla
se transforma para adaptarse a cada dispositivo.

/* Dispositivos muy pequeños (teléfonos de hasta 768px de anchura) */ /*

No se define ninguna media query porque este es el estilo por defecto
utilizado por Bootstrap 3 */
/* Dispositivos pequeños (tablets, anchura mayor o igual a 768px) */
@media (min-width: @screen-sm-min) { ... }
/* Dispositivos medianos (ordenadores, anchura mayor o igual a 992px) */
@media (min-width: @screen-md-min) { ... }
/* Dispositivos grandes (ordenadores, anchura mayor o igual a 1200px) */
@media (min-width: @screen-lg-min) { ... }

Trabajando con la rejilla de Bootstrap

El diseño de páginas basado en rejilla se realiza mediante filas y columnas donde se colocan los contenidos. Así
funciona la rejilla de Bootstrap:

 Las filas siempre se definen dentro de un contenedor de tipo .container (anchura fija) o de tipo
.container-fluid (anchura variable). De esta forma se alinean bien y muestran el padding correcto.

 Las filas se utilizan para agrupar horizontalmente a varias columnas.

 El contenido siempre se coloca dentro de las columnas, ya que las filas solo deberían contener como hijos
elementos de tipo columna.

 Bootstrap define muchas clases CSS (como por ejemplo .row y .col-xs-4) para crear rejillas rápidamente.

 La separación entre columnas se realiza aplicando padding. Para contrarrestar sus efectos en la primera
y ultima columnas, las filas (elementos .row) aplican márgenes negativos.

 Las columnas de la rejilla definen su anchura especificando cuántas de las 12 columnas de la fila ocupan.
Si por ejemplo se desea dividir una fila en tres columnas iguales, se utilizaría la clase .col-xs-4 (el 4 indica
que cada columna ocupa 4 de las 12 columnas en las que se divide cada fila).

3
Universidad Nacional Autónoma de Nicaragua
UNAN-León
Depto. de Computación

Tabla 1. Datos relevantes sobre el grid de Bootstrap

Estructura básica del grid

A continuación se muestra la estructura básica del grid de Bootstrap:

4
Universidad Nacional Autónoma de Nicaragua
UNAN-León
Depto. de Computación

< div
class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>

</div>
<div class="row">

...

</div>
</div
>
<div class="container">

...
</div
>

Contenedor de anchura variable

Si se desea transformar una rejilla de anchura fija en una rejilla de anchura variable que ocupa toda la anchura
del navegador, se debe reemplazar la clase CSS .container por .container-fluid en el elemento que encierra
a todos los demás elementos de la rejilla:

<div class="container-fluid">
<div class="row"> ...
</div>
</div>

Acomodación de columnas

Si hay más de 12 columnas dentro de una sola fila, cada grupo de columnas adicional se colocará en una nueva
fila.

Desplazamiento de columnas

La clase .col-md-offset-* permite desplazar cualquier columna hacia su derecha. Estas clases aumentan el tamaño
del margen izquierdo de la columna en una cantidad equivalente a esas * columnas. Por ejemplo, la clase .col-
md-offset-4 desplaza la columna una anchura equivalente a 4 columnas.
5
Universidad Nacional Autónoma de Nicaragua
UNAN-León
Depto. de Computación

Anidando columnas

Bootstrap 3 también permite anidar columnas dentro de otras columnas. Para ello, dentro de una columna con
la clase col-md-* se debe crear un nuevo elemento con la clase .row y luego se debe añadir una o más columnas
con la clase .col-md-*.

Las columnas anidadas siempre tienen que sumar 12 columnas de anchura.

Reordenando las columnas

Bootstrap 3 introduce la posibilidad de reordenar las columnas para cambiar su posición, lo que es muy
importante para los diseños web responsive.

 .col-md-push-X permite reordenar las columnas desplazándolas X unidades hacia la derecha.

 .col-md-pull-X permite reordenar las columnas desplazándolas X unidades hacia la izquierda.

TIPOGRAFIA

Los estilos relacionados con la tipografía y el texto de los contenidos son esenciales en cualquier framework CSS.
Por esa razón, Bootstrap 3 incluye decenas de estilos para los principales elementos utilizados en los sitios y
aplicaciones web.

Texto

El tamaño de letra (font-size) por defecto de Bootstrap 3 es 14px y el interlineado (line-height) es 1.428. Estos
valores se aplican tanto al <body> como a todos los párrafos. Estos últimos también incluyen un margen inferior
cuyo valor es la mitad que su interlineado (10px por defecto).

Texto destacado

Para destacar un párrafo sobre los demás, se debe añadir la clase .lead.
´
Clases CSS para alinear texto

Bootstrap 3 define varias clases CSS para alinear de diferentes formas el contenido de texto de los elementos.

<p class="text-left">Texto alineado a la izquierda.</p>

<p class="text-center">Texto centrado.</p>

6
Universidad Nacional Autónoma de Nicaragua
UNAN-León
Depto. de Computación

<p class="text-right">Texto alineado a la derecha.</p>

<p class="text-justify">Texto justificado</p>

Listas sin estilo

Como resulta muy habitual mostrar las listas sin viñetas y sin margen izquierdo, Bootstrap 3 incluye una clase
CSS llamada .list-unstyled para aplicar esos estilos.

La única desventaja de esta clase es que sólo se aplica a los elementos de una lista y no a los elementos de sus
listas anidadas. Así que si se desea aplicar los estilos a todos los elementos, de debe añadir la clase .listunstyled
también a las listas anidadas.

Listas en línea

También resulta habitual mostrar los elementos de una lista horizontalmente, como por ejemplo en el menú
principal de navegación. Para ello, Bootstrap 3 define una clase CSS llamada .inline-block.

IMÁGENES

Imágenes responsivas

Bootstrap 3 no adapta el tamaño de las imágenes automáticamente. Para que las imágenes se comporten de
manera responsiva (es decir se adapten al ancho del contenedor), se debe aplicar la clase .img-responsive. Esta
clase hace que la imagen tenga un ancho máximo del 100% y una altura automática.

<img src="..." class="img-responsive" alt="Imagen responsive">

Decorando imágenes

Bootstrap 3 define algunas clases CSS para decorar las imágenes.

 .img-rounded, añade unas pequeñas esquinas redondeadas en todos los lados de la imagen aplicando el
estilo border-radius: 6px.
 .img-circle, convierte la imagen en un círculo aplicando el estilo border-radius: 50%

<img src="img/adele.jpg" alt="Adele" class="img-rounded">

7
Universidad Nacional Autónoma de Nicaragua
UNAN-León
Depto. de Computación

<img src="img/adele.jpg" alt="Adele" class="img-circle">

UTILIDADES CSS

Elementos flotantes

Flotar un elemento a la derecha o a la izquierda es muy habitual en la mayoría de diseños web. Por eso Bootstrap
3 define dos clases CSS llamadas .pull-left y .pull-right que se pueden aplicar sobre cualquier elemento:

<div class="pull-left">...</div>
<div class="pull-right">...</div>

Este es el código CSS aplicado a cada clase (la palabra reservada !important se utiliza para evitar posibles
problemas con la especificidad de los selectores):

.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}

Elementos centrados

Para centrar horizontalmente cualquier elemento basta con aplicar la clase center-block (el elemento centrado
se convierte en un elemento de bloque):

8
Universidad Nacional Autónoma de Nicaragua
UNAN-León
Depto. de Computación

<div class="center-block">...</div>

El código CSS aplicado a esta clase es el siguiente:

.center-block {
display: block; margin-
left: auto; margin-right:
auto;
}

Limpiando floats

Cuando un diseño utiliza muchos elementos flotantes, es común tener que limpiar un elemento para que no le
afecten otros elementos flotantes. Para realizar esta tarea, Bootstrap dispone de la clase clearfix.

<div class="clearfix">...</div>

Mostrar/ocultar elementos

Bootstrap dispone de algunas clases que permiten mostrar u ocultar elementos en función del tipo de dispositivo
que utiliza el usuario para navegar. Estas clases solo funcionan para los elemento de bloque y las tablas.

9
Universidad Nacional Autónoma de Nicaragua
UNAN-León
Depto. de Computación

BOTONES

Bootstrap dispone de una buena cantidad de clases para darle estilo a los botones.

<!-- Botón normal -->

<button type="button" class="btn btn-default">Normal</button>

<!-- Muestra el botón de forma destacada para descubrir fácilmente el botón

principal dentro de un grupo de botones -->
<button type="button" class="btn btn-primary">Destacado</button>

<!-- Indica una acción exitosa o positiva -->

<button type="button" class="btn btn-success">Éxito</button>

<!-- Botón pensado para los mensajes con alertas informativas -->

<button type="button" class="btn btn-info">Información</button>

<!-- Indica que hay que tener cuidado con la acción asociada al botón -->

<button type="button" class="btn btn-warning">Advertencia</button>

<!-- Indica una acción negativa o potencialmente peligrosa -->

<button type="button" class="btn btn-danger">Peligro</button> <!--

Resta importancia al botón haciéndolo parecer un simple enlace

aunque conserva tu comportamiento original de botón -->

<button type="button" class="btn btn-link">Enlace</button>

Botones de diferente tamaño

Cuando se necesite crear botones más grandes o más pequeños que el tamaño estándar, es preciso utilizar las
clases .btn-lg (grande), .btn-sm (pequeño) y .btn-xs (extra pequeño).

<button type="button" class="btn btn-primary btn-lg">Botón grande</button>

<button type="button" class="btn btn-primary">Botón normal</button>
<button type="button" class="btn btn-primary btn-sm">Botón pequeño</button>
<button type="button" class="btn btn-primary btn-xs">
Botón extra pequeño

10
Universidad Nacional Autónoma de Nicaragua
UNAN-León
Depto. de Computación

</button>

Botones de bloque

Bootstrap permite convertir el botón en un elemento de bloque para hacer que ocupe toda la anchura del
elemento en el que se encuentre. Para ello, se debe añadir la clase .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">

Botón de bloque
</button>
<button type="button" class="btn btn-default btn-lg btn-block">
Botón de bloque
</button>

Etiquetas para botones

Gracias a los estilos de Bootstrap 3, es posible utilizar cualquiera de las siguientes etiquetas para mostrar
botones: <a>, <button> e <input>.

<a class="btn btn-primary" href="#“>Enlace</a>

<button class="btn btn-primary" type="submit">Botón</button>
<input class="btn btn-primary" type="button" value="Campo input">
<input class="btn btn-primary" type="submit" value="Enviar">

III. MATERIALES Y EQUIPO

No. Cantidad Descripción

11
Universidad Nacional Autónoma de Nicaragua
UNAN-León
Depto. de Computación

1 1 PC con uno de los editores de páginas Web: Sublime Text, Brackets, Notepad ++,
BlueFish y HTML Kit y cualquiera de los navegadores siguiente: Internet Explorer 7
u 8, Firefox (última versión disponible), Google Chrome (última versión disponible),
Opera (última versión disponible), Safari (última versión disponible).
2 1 Guía de Laboratorio #13 de Lenguajes de Marcado y Estilo Web
3 1 Recursos para laboratorio práctico.
4 1 Memoria USB

IV. PROCEDIMIENTO

INDICACIONES GENERALES

1. Crear una carpeta en “mis documentos” y colocarle el nombre N°Carnet_Guia13_LME, Nota: Cambiar
N°Carnet por su número de carnet brindado por la Universidad.

2. Descargar los recursos de la guía, descomprimirlos y colocar todas las carpetas y archivos dentro de su
carpeta de trabajo.

Ejercicio 1. Entendiendo el sistema de grid de Bootstrap

1. Creé un archivo HTML llamado “grid.html”.
2. Guardar el archivo en su carpeta de trabajo.
3. Escribir la estructura básica de un documento HTML en el archivo creado en el paso anterior.
4. Colocar como título de la página el texto “Uso del grid de Bootstrap”.
5. Escribir la etiqueta meta-etiqueta viewport en el head de su página web.

6. Vincule la hoja de estilo de Bootstrap (se encuentra dentro de la carpeta “css”) con su página web.

7. Coloque el siguiente código HTML dentro del cuerpo de su página web.

12
Universidad Nacional Autónoma de Nicaragua
UNAN-León
Depto. de Computación

8. Observe los resultados en su navegador. Notará que cada una de las cajas cubre exactamente una de las
12 columnas del sistema de grid de Bootstrap.

9. Para mejorar un poco la claridad de los ejemplos presentados vamos a colocarle un borde a cada una de
las cajas, para ello debemos crear una hoja de estilo llamada “estilo1.css” que deberá contener las
siguientes reglas de estilo.

13
Universidad Nacional Autónoma de Nicaragua
UNAN-León
Depto. de Computación

10. Vincule la hoja de estilo creada en el paso anterior con su página web. Asegúrese que el llamado a la hoja
de estilo “estilo1.css” este inmediatamente después del llamado de la hoja de estilo de Bootstrap.

11. Visualice los resultados en su navegador. Debería obtener un resultado similar al siguiente:

12. Modifique el ancho del navegador y note que independientemente del ancho del viewport, cada caja
ocupa exactamente una columna. Esto se debe a que se ha especificado el “tamaño” de las cajas para la
media query más pequeña (la de dispositivos móviles, prefijo “xs”) y dado que Bootstrap es un framework
“first-mobile”, los otras medias queries asumirán el valor inferior más cercano (en este caso, el del prefijo
xs).

13. Para facilitar la identificación de la media query que se está aplicando en un momento específico vamos
a cambiar el color de fondo de la página para cada media query escribiendo las siguientes reglas de estilo
dentro de su archivo “estilo1.css”.

14
Universidad Nacional Autónoma de Nicaragua
UNAN-León
Depto. de Computación

14. Pruebe los resultados en su navegador y asegúrese que el color de fondo de la página cambia en los
distintos puntos de ruptura (NOTA: Los puntos de ruptura ocupados en las media queries de las reglas
de estilo anteriores son los mismos puntos de ruptura de Bootstrap ) .

15. Agregue el siguiente código HTML dentro de su página web (ASEGURESE QUE ESTE CODIGO QUEDE
DENTRO DE LA CAJA CON CLASE “CONTAINER”).

15
Universidad Nacional Autónoma de Nicaragua
UNAN-León
Depto. de Computación

16. Visualice los resultados en su navegador. Notará que cuando se está en la media query con prefijo “md”
(fondo verde) cada caja ocupa 4 de las 12 columnas disponibles. Lo mismo ocurre cuando se aplica la
media query con prefijo “lg” (fondo azul) puesto que este “hereda” los estilos de la media query
inmediatamente inferior que se haya definido. Ahora note lo que pasa cuando se está en las media
queries de celulares y de tablets. Cada caja ocupa las 12 columnas disponibles. Esto sucede porque la
herencia solo ocurre de las pantallas de menor tamaño a las pantallas de mayor tamaño, no viceversa. Al
no tener un tamaño que presentar para las dos media queries más pequeñas, Bootstrap mostrará esas
cajas mediante las 12 columnas disponibles.

Media query con prefijo lg

Media query con prefijo lg

Media query con prefijo sm

16
Universidad Nacional Autónoma de Nicaragua
UNAN-León
Depto. de Computación

Media query con prefijo xs

17. Agregue el siguiente código HTML dentro de su página web (ASEGURESE QUE ESTE CODIGO QUEDE
DENTRO DE LA CAJA CON CLASE “CONTAINER”).

18. Visualice los resultados en su navegador. Note que en la media query más pequeña cada caja cubre 6
Columnas (es decir, la mitad del contenedor); mientras que en la media query para escritorio (prefijo md)
cada caja cubre 3 columnas (la cuarta parte del ancho de contenedor) ¿Qué sucede con las media queries
con prefijo lg y sm?

17
Universidad Nacional Autónoma de Nicaragua
UNAN-León
Depto. de Computación

19. Agregue el siguiente código HTML dentro de su página web (ASEGURESE QUE ESTE CODIGO QUEDE
DENTRO DE LA CAJA CON CLASE “CONTAINER”).

20. Realice las modificaciones necesarias de tal forma que se cumplan los siguientes requerimientos:

• Para la media query con prefijo xs cada caja debe cubrir el ancho del contenedor.
• Para la media query con prefijo sm la caja 1 y la caja 2 deben cubrir 6 columnas cada una y las cajas 3, 4,5
y 6 deben cubrir 3 columnas cada una.
• Para la media query con prefijo md cada caja debe cubrir 4 columnas.
• Para la media query con prefijo lg cada caja debe cubrir 2 columnas.

Media query con prefijo xs

18
Universidad Nacional Autónoma de Nicaragua
UNAN-León
Depto. de Computación

Media query con prefijo sm

Media query con prefijo md

Media query con prefijo lg

Desplazando columnas

La clase .col-prefijo-offset-* permite desplazar cualquier columna hacia su derecha. Estas clases
aumentan el tamaño del margen izquierdo de la columna en una cantidad equivalente a esas * columnas. Por
ejemplo, la clase .col-md-offset-4 desplaza la columna una anchura equivalente a 4 columnas.

21. Agregue el siguiente código HTML dentro de su página web (ASEGURESE QUE ESTE CODIGO QUEDE
DENTRO DE LA CAJA CON CLASE “CONTAINER”).

22. Realice los cambios necesarios para conseguir el siguiente resultado dentro de la media query con prefijo
md.

19
Universidad Nacional Autónoma de Nicaragua
UNAN-León
Depto. de Computación

Anidando columnas

23. Agregue el siguiente código HTML dentro de su página web (ASEGURESE QUE ESTE CODIGO QUEDE
DENTRO DE LA CAJA CON CLASE “CONTAINER”).

24. Note que la suma de las columnas anidadas debe ser 12. Visualice los resultados en su navegador, debería
obtener el siguiente resultado:

Reordenando columnas

20
Universidad Nacional Autónoma de Nicaragua
UNAN-León
Depto. de Computación

Bootstrap 3 introduce la posibilidad de reordenar las columnas para cambiar su posición, lo que es muy
importante para los diseños web responsivos.

 .col-prefijo-push-X permite reordenar las columnas desplazándolas X unidades hacia la derecha.

 .col-prefijo-pull-X permite reordenar las columnas desplazándolas X unidades hacia la izquierda.

25. Agregue el siguiente código HTML dentro de su página web (ASEGURESE QUE ESTE CODIGO QUEDE
DENTRO DE LA CAJA CON CLASE “CONTAINER”).

26. Realice las modificaciones necesarias de tal forma que se cumplan los siguientes requerimientos:

• Para la media query con prefijo xs las cajas deben mostrarse en su orden original.

• Para la media query con prefijo sm las cajas deben mostrarse en el siguiente orden:

AYUDA: Las cajas 1 y 3 deben desplazarse 3 columnas a la derecha y las cajas 2 y 4 deben desplazarse 3 columnas
a la izquierda.

• Para la media query con prefijo md las cajas deben mostrarse en el siguiente orden:

21
Universidad Nacional Autónoma de Nicaragua
UNAN-León
Depto. de Computación

Ocultando columnas

27. Agregue el siguiente código HTML dentro de su página web (ASEGURESE QUE ESTE CODIGO QUEDE
DENTRO DE LA CAJA CON CLASE “CONTAINER”).

28. Realice las modificaciones necesarias de tal forma que se cumplan los siguientes requerimientos:

• Para la media query con prefijo xs la caja 1 debe ocultarse (ayuda: debe aplicar la clase hidden-xs)
Para la media query con prefijo sm la caja 2 debe ocultarse.
• Para la media query con prefijo md la caja 3 debe ocultarse.
• Para la media query con prefijo lg la caja 4 debe ocultarse.

Ejercicio 2. Diseñando un formulario de login.

1. Creé un archivo HTML llamado “login.html”. 2.

Guardar el archivo en su carpeta de trabajo.
3. Escribir la estructura básica de un documento HTML en el archivo creado en el paso anterior.
4. Colocar como título de la página el texto “Inicio de sesión”.
5. Escribir la etiqueta meta-etiqueta viewport en el head de su página web.

6. Vincule la hoja de estilo de Bootstrap dentro de su página web.

22
Universidad Nacional Autónoma de Nicaragua
UNAN-León
Depto. de Computación

7. Coloque el siguiente código HTML dentro del cuerpo de su página web.

8. Visualice los resultados en su navegador.

23
Universidad Nacional Autónoma de Nicaragua
UNAN-León
Depto. de Computación

9. Realice las modificaciones necesarias para que el botón tenga color verde (clase btn-success) y ocupe el
ancho completo del contenedor (clase btn-block). Ahora su formulario debería lucir de la siguiente
manera:

V. ANALISIS DE RESULTADOS

24
Universidad Nacional Autónoma de Nicaragua
UNAN-León
Depto. de Computación

1. Realice un ejemplo en el que haga uso de las siguientes clases de Bootstrap para imágenes: imgresponsive,
img-rounded, img-rounded.

VI. EJERCICIOS COMPLEMENTARIOS

1. Investigue y presente un ejemplo de uso de cada uno de los siguientes componentes de Bootstrap:

• Iconos.
• Grupos de campos de formularios.
• Menús de navegación.
• Migas de pan. Paginadores. Jumbotron
• Mensajes de alerta. Barras de progreso.
• Lista de elementos.
• Paneles.

Fecha de entrega: Próxima semana.

25