Bootstrap.

1. Bootstrap. Framework CSS. Se lo puede definir como un conjunto de plantillas preestablecidas que
podemos incorporar a nuestra página web. Sirve para ahorrar tiempo de trabajo.

2. Funcionamiento de Bootstrap. Se debe incorporar al HTML a través de 3 elementos.

a) Incorporar en el head el Bootstrap (CSS).
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
b) Incorporar al final del body el Jquery (JavaScript).
<script type="text/javascript" src="jquery/jquery-3.6.0.min.js"></script>
c) Incorporar al final del body el Bootstrap (JavaScript).
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

Incorporar plantillas preestablecidas de Bootstrap. Se hace a través de la clase de cada elemento. Por
ejemplo, si le agregamos a un div la clase m-4, le estamos agregando un margin que Bootstrap cataloga con
el número 4 o, si le agregamos a un button la clase btn-success, le estamos agregando un estilo que se
encuentra preestablecido por Bootstrap. Se puede encontrar una lista de plantillas (para incorporar a través
de clases)

3. Maquetación. Absolutamente todo lo puedo hacer con Grid.

Sistema de Filas y Columnas. Se debe crear un contenedor por cada fila y luego debemos determinar cuántas
columnas le otorgamos a cada elemento contenido dentro de la fila. No olvidar que Bootstrap tiene un
máximo de 12 columnas. Si a un elemento, de los que están dentro del contenedor principal (row), se le
incorpora la clase col-12, ocupará toda la fila. Si se le incorpora la clase col-6 y a otro la clase col-6, estarán
uno al lado del otro ocupando la misma fila. Si a un elemento le incorporo la clase col-10 y, a otro elemento
le incorporo la clase col-5, el segundo elemento se colocará debajo del primero. En el caso del header/nav,
no es necesario crear un contenedor dado que no tendrá nada a su lado ya que ocupará la fila entera. Lo
mismo sucede con el footer.

<div class=“row”>
<aside class=“col-3”></aside>
<section class=“col-9”></section>
</div>

Ancho Automático. Se otorga a cada columna el mismo espacio, es decir, funciona de la misma manera que
fr. Por ejemplo, si agrego 3 columnas y, únicamente les agrego la clase col (sin número), se distribuye el
espacio en partes iguales para las 3 columnas. Si agrego otro elemento con la clase col, se dividirá
nuevamente la columna entregando el mismo espacio a cada columna. A su vez, podría agregarle una clase
col-6 a un elemento para darle la mitad del espacio (recordar que hay 12 columnas) y agregarle una clase col
a otros 3 elementos (a los que les quedarán 2 columnas a cada uno).

<div class=“row”>
<div class=“col”></div>
<div class=“col”></div>
<div class=“col”></div>
</div>

Alineación Horizontal. Se debe agregar al contenedor principal la clase justify-content-start/center/end.

<div class=“row justify-content-center”>
<div class=“col”></div>
<div class=“col”></div>
<div class=“col”></div>
</div>

Alineación Vertical.
a) Contenedor. Se debe agregar al contenedor principal la clase align-items-start/center/end.
<div class="row align-items-center">
<div class="col-12"></div>
</div>
b) Elemento. Se debe agregar al elemento la clase align-self-start/center/end.
<div class="row">
<div class="col-6 align-self-center"></div>
<div class="col-6"></div>
</div>

Ordenar Elementos. Se debe agregar a cada elemento la clase order-número.

<div class="lateral row align-items-center">
<div class="col-12 order-3">Elemento 1</div>
<div class="col-12 order-2">Elemento 2</div>
<div class="col-12 order-1">Elemento 3</div>
</div>

Offset. Sirve para meter columnas de espaciado entre distintas columnas. Si queremos que haya X cantidad
de columnas de espacio entre un elemento A y un elemento B, se le debe agregar la clase offset-
cantidaddecolumnas al elemento B. Recordar que el tamaño de todas las columnas no puede ser de ancho
automático dado que, si lo es, no se aplicará el offset.

4. Responsive Web Design.

Diseño Adaptable. Si queremos que todo tenga el 100vw, el contenedor que contenga TODA la página, es
decir, el que se encuentra inmediatamente luego de la etiqueta body, debe tener la clase container-fluid.

Breakpoint XS (<576px) S (≥576px) M (≥768px) L (≥992px) XL (≥1200px)

Características
Max Container None (Auto) 540px 720px 960px 1140px
Width
Dispositivo Celular Celular Tablet Tablet Computadora
Horizontal Horizontal
Prefijo Clase col-número col-sm-número col-md-número col-lg-número col-xl-número
*Break NAV*
Columnas 12
Gutter Width 30px (15px on each side of a column.
Adaptable Sí
Orden de Sí
Columnas

*Si la resolución es menor a M, se recomienda que cada fila de la navbar ocupe las 12 columnas.
Se puede observar a continuación, un ejemplo, en el que establezco que, cuando la resolución sea XS
(celulares), cada columna ocupe las 12 filas, mientras que, cuando la resolución sea M (tablets), cada
columna ocupe 4 filas. Si omito agregar algunas medidas, no funciona bien.

<div class="row">
<div class="col-12 col-sm-12 col-md-4 col- lg-4 col-xl-4">Elemento 1</div>
<div class="col-12 col-sm-12 col-md-4 col- lg-4 col-xl-4">Elemento 2</div>
<div class="col-12 col-sm-12 col-md-4 col- lg-4 col-xl-4">Elemento 3</div>
</div>

Ocultar Elementos al Aplicar Responsive Web Design. Se puede observar en el siguiente link en la sección
de hiding elements https://getbootstrap.com/docs/5.0/utilities/display/.

5. Utilidades. Se incorporan TODAS en las clases y, al hacerlo, se aplican los estilos sin necesidad de CSS.

a) Anchura (width) y Altura (height). Se utiliza la letra w para la anchura y la letra h para la altura. Por
ejemplo, si agrego la clase w-50 h-30, estoy determinando que el elemento tenga un 50% de ancho y un 30%
de alto.

b) Bordes. Se utiliza la palabra border para incorporar un borde a un elemento. Si queremos cambiarle el
color, debemos escribir, por ejemplo, border border-primary.

c) Flotados. Se utiliza la palabra float para modificar la flotación de un elemento. Si queremos que vaya
hacia un lado, debemos escribir float-left/right.

d) Colores.
- Color de texto. Se utiliza la palabra text para modificar el color del texto. Por ejemplo, bg-success.
- Color de fondo. Se utiliza la palabra bg para modificar el color de fondo. Por ejemplo, bg-warning.

e) Márgenes y Paddings.
- Margin. Se utiliza la letra m y una numeración del 0 al 5. Por ejemplo, agregar un m-2. El 0 equivale a
nada de margin, el 1 a 4px (1/4 rem), el 2 a 8px (1/2 de rem), el 3 a 16px (rem), el 4 a 24px (1,5 rem) y el 5
a 48px (3 rem). Por su parte, la medida también puede ser auto. A su vez, si queremos que el margin sea top,
right, bottom o left, debemos agregar las letras t, r b o l. Por ejemplo, ml-2. Se pueden cambiar las letras por
y (para que se agregue margin top y bottom) o x (para que se agregue margin left y right). Por ejemplo, mx-
2. Si queremos centrar una caja, de manera horizontal, lo mejor es escribir mx-auto. También se pueden
agregar márgenes negativos si colocamos la letra n antes del número. Por ejemplo, m-n2.
- Padding. Se utiliza la letra p y una numeración del 0 al 5. Se aplica todo lo mismo que en el margin.

f) Sombras. Se utiliza la palabra shadow y una medida. Por ejemplo, shadow-lg.

g) Visibilidad. Sirve para ocultar elementos. Se utiliza la palabra invisible. Cabe destacar que desaparece
visualmente, pero el espacio que ocupa el elemento queda reservado.

h) Textos.
- Tamaño. Se utiliza la palabra display y una numeración del 1 (mayor tamaño) al 4 (menor tamaño).
- Negrita. Se hace con font-weight-bold.
- Cursiva. Se hace con font-italic.
- Centrado. Se hace con text-left/center/right.
- Mayúscula. Se hace con text-uppercase.
- Minúscula. Se hace con text-lowercase.
i) Mostrar Código.

Cabe destacar que hay muchísimas utilidades más, las cuales se pueden ver en el siguiente link
https://getbootstrap.com/docs/4.0/utilities/borders/.

6. Componentes. Son elementos predesarrollados que podemos incorporar en nuestro sitio. No olvidar que,
al copiar y pegar componentes, sean de la versión 5 de Bootstrap para que funcionen correctamente.

a) Barra de navegación.
b) Alertas.
c) Migas de pan. Indica en qué sección de la página nos encontramos.
d) Tarjetas.
e) Botones.
f) Slider (Carousel).
g) Jumbotron. Caja con texto y un botón. Se debe realizar en CSS dado que no existe en Bootstrap 5.
h) Modals/Pop-Ups/Ventanas Emergentes.
i) Paginación. Indica en qué número de página nos encontramos.
j) Collapse. Botón que, al presionarlo, muestra contenido oculto.
k) Barra de Progreso (JavaScript).
l) Tooltips. Texto observable al pasar por arriba de un botón con el mouse. Sirve para indicarnos la función
de dicho botón.
m) Popovers. Similar al tooltip, pero la información aparece al hacer click.
n) Formularios.
ñ) Tablas.

7. Diferencias entre Bootstrap 4 y Bootstrap 5.