Unidad I Unidad II Unidad III

DISEÑO WEB

Caso de aplicación: Bootstrap 5.x

SESIÓN

26
Ing. Ernesto Nicho Córdova
ncordova@usat.edu.pe
www.usat.edu.pe
www.usat.edu.pe
 Propósito de la sesión
Objetivo de la sesión:
✓ Framework para diseño de sitios web. Bootstrap

Contribuye al logro

Resultado de Aprendizaje de la Unidad 02:

R2: Diseña páginas web con herramientas de maquetado avanzado.

Contribuye al logro

Competencia del perfil de egreso : La asignatura DISEÑO WEB, que corresponde al área de
estudios de Especialidad, contribuye al logro del perfil de egreso, específicamente a la(s)
competencia(s):
- CE3: DESARROLLO DE SOFTWARE
- CG4: COMUNICACIÓN ORAL Y ESCRITA
2 www.usat.edu.pe
 Contenidos

Caso de
aplicación

3 www.usat.edu.pe
 Caso de aplicación

5 www.usat.edu.pe
 Estructura básica

Starter template

Puede usar estilos y

javaScript locales o usar
CDN

6 www.usat.edu.pe
 display-3
Caso de aplicación: Portada
lead
Justificación de contenido
(Justify content)
Alineación de contenido
(Align items)

7 www.usat.edu.pe
 Formulario

Formulario (form)

Botones (buttons)

8 www.usat.edu.pe
 Barra de navegación

Barra de navegación
(Navbar)

9 www.usat.edu.pe
 Lista agrupada

Lista
agrupada
(List-Group)

10 www.usat.edu.pe
 Carrusel de imágenes

Carrusel (Carousel)

11 www.usat.edu.pe
 Tarjetas (cards)

Tarjetas (cards)

Tarjetas (grupos)

Estilos (card Style)

12 www.usat.edu.pe
 Footer

Códigos para footer (visitar)

Códigos para iconos (visitar)
13 www.usat.edu.pe
 Conclusiones
• Bootstrap es un conjunto de partes de sitios web ya
programadas, como por ejemplo: botones, menús de
navegación, formularios y muchos más que podemos
usar para crear sitios web en muy poco tiempo.
• El grid de Bootstrap es el componente más importante y
con el que podrás hacer sitios web que se adapten a
cualquier tamaño de pantalla.
• Es rápido y aunque no en un primer momento,
simplemente con realizar dos o tres proyectos se
convierte en una herramienta realmente intuitiva.
• Cuenta con un gran número de elementos ya
personalizados con una apariencia al día de las páginas
web más actuales.
14 www.usat.edu.pe
 Próxima sesión

• Examen Práctico

15 www.usat.edu.pe
 Referencias
[1] Bootstrap team, «Build fast, responsive sites with Bootstrap,» 2020. [En línea].
Disponible: https://getbootstrap.com/. [Último acceso: 28 junio 2020].
[2] Bootstrap team, «Documentation,» 2020. [En línea]. Disponible:
https://getbootstrap.com/docs/4.5/getting-started/introduction/. [Último acceso: 28
junio 2020].
[3] J. Gallego, «Boostrap 4,» 2020. [En línea]. Disponible:
https://ajgallego.gitbook.io/bootstrap-4/. [Último acceso: 28 junio 2020].

16 www.usat.edu.pe
Ing. Ernesto Nicho Córdova
ncordova@usat.edu.pe

http://www.facebook.com/usat.peru

https://twitter.com/usatenlinea

https://www.youtube.com/user/tvusat

https://plus.google.com/+usateduperu

www.usat.edu.pe