Bootstrap:

Conceptos, Instalación y Componentes

Link a la presentación Prof. Ramiro Estigarribia

¿Qué es Bootstrap?
Es el marco de trabajo HTML, CSS y JavaScript más popular
para desarrollar sitios web adaptables.

Inicialmente creado como una solución interna para Twitter y

posteriormente liberado al público en agosto del 2011 como
un proyecto Open Source en GitHub.
¿Por qué usar Bootstrap?
Ventajas de Bootstrap:
➔ Adaptable: se ajusta a teléfonos, tabletas y computadoras
de escritorio.
➔ Enfoque móvil primero: los estilos para dispositivos
móviles tienen prioridad.
➔ Es compatible con todos los navegadores modernos
(Chrome, Firefox, Edge, Safari y Opera).
¿Dónde conseguir Bootstrap?
Hay dos formas de comenzar a usar Bootstrap:
1. Incluir Bootstrap desde el CDN oficial.
2. Descargar Bootstrap desde https://getbootstrap.com
 Incluir Bootstrap desde el CDN oficial.
Puede incluirlo desde un CDN (Content Delivery Network).
Se puede encontrar el CDN actualizado en getbootstrap.com
<!-- Parte CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
rel="stylesheet">
<!-- Parte JavaScript -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js">
</script>
Bootstrap Texto / Tipografía
Bootstrap establece estilos básicos de visualización,
tipografía y enlaces globales.

Además estiliza los textos en general y hace que sean

responsivos (adaptables a dispositivos móviles).

Más información:

Bootstrap 5 Text/Typography

Typography · Bootstrap v5.0

Display Headings
Se utilizan para destacar más que los encabezados normales
(tamaño de fuente más grande y peso de fuente más ligero),
y hay cuatro clases para elegir: .display-1, .display-2,
.display-3, .display-4

Typography · Bootstrap v5.0

Colores
Bootstrap tiene algunas clases que se pueden usar para
proporcionar colores a un sitio:

Algunas clases para colores de texto son: .text-muted,

.text-primary, .text-success, .text-info, .text-warning.

Más información: Colors · Bootstrap v5.0

Tablas
Las tablas no traen un estilo por defecto y es necesario
agregar una clase, para mejorar el aspeto.

Más información: Tables · Bootstrap v5.0

Imágenes
Las imágenes son responsivas con la clase .img-fluid.

Esto aplica max-width: 100% y height: auto para que escale a

pantalla completa del dispositivo de forma automatica.

Más información: Images · Bootstrap v5.0

Alertas
Permite mostrar mensajes de alerta:
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
Más información: Alerts · Bootstrap v5.0
Botones
Permite mostrar distintos botones personalizados de para
acciones en formularios, cuadros de diálogo y más.

Más informatición: Buttons · Bootstrap v5.0

Barra de Progreso
Se puede usar para mostrar a un usuario qué tan avanzado
está en un proceso.

Más información: Progress · Bootstrap v5.0

Spinners
Es ideal para mostrar que algo está cargando.

Indique el estado de carga de un componente o página.

Más información: Spinners · Bootstrap v5.0