Curso FullStack

Python
Codo a Codo 4.0
Bootstrap
¿Qué es un framework?
Es un conjunto de herramientas, librerías, convenciones y buenas prácticas que pretenden
encapsular las tareas repetitivas en módulos genéricos fácilmente reutilizables.
Un framework CSS es un marco en el que definiremos piezas, en general es cerrado, es decir
que debemos atenernos a las reglas especificadas en él. Contiene herramientas y hojas de
estilos que permiten olvidarse de las tareas repetitivas para centrarse en los elementos
únicos de cada diseño en los que puede aportar valor.
Originalmente fue creado por Twitter y permite crear interfaces web con CSS y
JavaScript, cuya particularidad es la de adaptar la interfaz del sitio web al
tamaño del dispositivo en que se visualice. Es decir, el sitio web se adapta
automáticamente al tamaño de una PC, una Tablet u otro dispositivo (técnica
llamada “responsive design” o diseño adaptativo).
El beneficio de usar responsive design en un sitio web es principalmente que el
sitio web se adapta automáticamente al dispositivo desde donde se acceda.

Bootstrap es el marco de trabajo HTML, CSS y JavaScript más popular para desarrollar sitios
web receptivos y móviles.
 Bootstrap incluye un archivo CSS que se añade en los
proyectos para tener una serie de estilos ya preparados
para utilizar. Este tipo de librerías CSS suelen incluir estilos
para los elementos más comunes de una página web,
como por ejemplo, botones, navbars, etc. Además tiene Su principal objetivo es
una serie de estilos para crear columnas fácilmente. permitir la construcción de
sitios web responsive para
Ventajas de usar Bootstrap dispositivos móviles.

• Fácil de usar: Agregamos las clases de Bootstrap a los elementos HTML y listo.
• Responsive. Con su sistema de grilla dividida en 12 columnas permite crear páginas Web
adaptables a cualquier dispositivo.
• Personalizable: Puedes personalizar su
descarga para usar los elementos que
necesites o utilizarlo online.
• Gran comunidad: Este framework está muy
extendido y si tenemos un problema
podremos encontrar mucha información en
Internet. Tanto en sitios oficiales como en
comunidades.
Bootstrap 4 vs 5
¿Cuáles son las novedades de Bootstrap 5?
• Hay numerosos cambios en la nueva versión de Bootstrap, algunos ya son
funcionales en las versiones Alpha y Beta publicadas hasta el momento
(marzo de 2021).
• Una de las bibliotecas más utilizadas en el desarrollo web es jQuery. Hasta Bootstrap 4
ahora, Bootstrap ha sido compatible con esta biblioteca, pero ahora, en la
versión 5 dejará de usarlo de forma nativa.
• En esta nueva versión de Bootstrap se ha optado por no dar compatibilidad a
los ya casi extintos navegadores web de Microsoft Internet Explorer 9 y 10.
Bootstrap solo será compatible con Microsoft Edge.
• Mejoras en formularios.
• Mejoras en el excelente sistema de rejilla de Bootstrap 4. se ha añadido un
nuevo breakpoint (xxl)
Bootstrap 5
Bootstrap 5 no ha reinventado toda su estructura. Esto concuerda con la intención de sus
desarrolladores, que pretendían hacer una transición fácil de la versión 4 a la 5. Los cambios
prometen unos procesos de trabajo más simples y un código más ligero y rápido.
Instalación
Como buena práctica, las versiones
Hay dos maneras de comenzar a usar Bootstrap: alfa y beta no se suelen usar en sitios
productivos. Siempre se trabaja con la
1. Descargarlo desde:
última versión estable a la fecha.
• https://getbootstrap.com/
• https://getbootstrap.com/docs/4.5/getting-started/download/
• https://getbootstrap.com/docs/4.5/getting-started/introduction/#starter-template
En este caso los archivos deberán estar en la misma carpeta del proyecto y
referenciados como hacemos siempre. Este modo permite trabajar sin conexión.
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>

2. Incluir BootstrapCDN (Content Delivery Network) en el head. El problema es que mi

sitio va a estar comunicándose permanentemente con el sitio Web de Bootstrap,
trayendo de allá los estilos.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.m
in.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" cr
ossorigin="anonymous">

Más info sobre CDN: https://www.hostinger.com.ar/tutoriales/que-es-cdn

Class Container
Los contenedores sirven para crear una “caja” o “contenedor” dentro de la que va el
contenido de una página web.
Cuando le aplicas a un elemento HTML la clase container lo que ocurre es que a ese elemento
se le aplica un ancho y un padding determinado y además se coloca en el centro de la
página web.

Bootstrap viene con tres contenedores diferentes:

• .container (contenedor común), que establece un ancho máximo o max-width para
determinados tamaños de pantalla en todos los breakpoints responsive. Es sensible al
dispositivo que utilicemos. Va a tener un ancho determinado en función del ancho de
viewport, a veces va a ser el 100% y a veces no, va a depender del ancho de viewport.
• .container-fluid, que establece un width: 100% de viewport en todos los breakpoints.
Para cualquier ancho de dispositivo siempre va a ocupar el 100% de la pantalla.
• .container- {breakpoint} es similar al fluido, pero vamos a poder lograr que algo que
son 3 columnas sean 3 columnas en 2 filas, como si fuera un “salto de página en
Word” (breakpoint). También tiene un ancho de 100% hasta el breakpoint definido.

Ver ejemplos: container.html, container-2.html y container-tipos.html

 Class Container (v. 5) Tamaño de pantalla
clases
BOOTSTRAP | Grid
ELEMENTOS
container: Delimita un
ancho máximo de
acuerdo al tamaño de la
pantalla.
row: Grupo horizontal
de columnas.
col: Contenedores de
contenido. Se disponen
12 por fila.
 <div class="container">
<div class="row">
<!-- 2 columnas dentro de un d
BOOTSTRAP | Grid iv -->
<div class="col">
Fila 1 - Columna 1 de 2
ESTRUCTURA JERÁRQUICA:
</div>
container <div class="col">
Fila 1 - Columna 2 de 2
row
</div>
col </div>
<div class="row">
<!-- 3 columnas dentro de un d
iv -->
<div class="col">
Fila 2 - Columna 1 de 3
</div>
Debemos comprender la estructura anidada de <div class="col">
Bootstrap: la clase container actúa de contenedor de Fila 2 - Columna 2 de 3
filas (rows) que en su interior contienen columnas. </div>
<div class="col">
Ver ejemplo bootstrap-grid-1.html Fila 2 - Columna 3 de 3
</div>
Si a la columna no le defino un número (1-12) toma todo </div>
el ancho posible.
</div>
 <div class="container">
<div class="row">
<div class="col">
BOOTSTRAP | Grid 1 de 3
</div>
Podemos establecer el ancho de una columna y hacer que las <div class="col-6">
columnas hermanas tomen una nueva dimensión 2 de 3 (6 col)
automáticamente a su alrededor. Las otras columnas </div>
cambiarán de tamaño sin importar el ancho de la columna <div class="col">
central. 3 de 3
</div>
</div>
<div class="row">
<div class="col">
1 de 3
Achicando el </div>
viewport… <div class="col-5">
2 de 3 (5 col)
</div>
<div class="col">
3 de 3
</div>
Ver ejemplo bootstrap-grid-2.html </div>
</div>
BOOTSTRAP | Layouts
Diferentes layouts para distintos dispositivos

Para cada dispositivo vamos a

poder armar un Layout propio.
Si tenemos un dispositivo chico
podemos hacer que se muestre
con cierto encolumnado, en
cambio si es un dispositivo tipo
<div class="container"> notebook que se muestre con
<div class="row"> otro. De esta manera
<div class="col-sm-6 clo-xs-12 bg-success"> tendremos distintos tipos de
<p>Lorem ipsum dolor...</p> maquetados según el
</div> dispositivo (siempre trabajando
<div class="col-sm-6 clo-xs-12 bg-warning"> desde el estilo, no desde la
<p>Lorem ipsum dolor...</p> estructura HTML).
</div>
</div>
Ver ejemplo layouts.html
</div>
BOOTSTRAP | Sistema de grillas
12 COLUMNAS
Se utiliza una grilla de 12 columnas que se puede dividir en 2, 3, 4 o 6 partes.
BOOTSTRAP | Sistema de grillas
El sistema de grillas de Bootstrap permite hasta 12 columnas en la página. Es posible
agrupar las columnas para crear columnas más amplias. Este sistema es responsive, por
lo tanto, las columnas se reorganizarán automáticamente dependiendo del tamaño de
la pantalla.
Más info: https://getbootstrap.com/docs/4.0/layout/grid/

RECORDEMOS: Siempre deben sumar 12.

BOOTSTRAP | Grid system
Este ejemplo crea tres columnas iguales utilizando las clases del sistema grid
predefinidas. Dichas columnas serán centradas en la página con el componente
padre .container.
<div class="container">
<div class="row"> Las columnas de la cuadrícula que
<div class="col-sm"> Primer columna </div> no tengan un width específico se
<div class="col-sm"> Segunda columna </div> distribuirán automáticamente
<div class="col-sm"> Tercer columna </div> como columnas de igual ancho.
</div>
</div>

Tres columnas de igual ancho en dispositivos pequeños, medianos, grandes y extra grandes

ver ejemplo grid-system.html

BOOTSTRAP | Grid system

Ver ejemplo grilla-columnas.html

BOOTSTRAP | Columnas receptivas
El siguiente ejemplo muestra cómo crear cuatro columnas de igual ancho comenzando en
tablet y escalando a escritorios extra grandes. En teléfonos móviles o pantallas de menos
de 768 px de ancho, las columnas se apilarán automáticamente una encima de la otra:

Ver ejemplo columnas-receptivas.html

BOOTSTRAP | Clases receptivas
El sistema de cuadrícula Bootstrap 4 tiene cinco clases:
• .col- (dispositivos extra pequeños: ancho de pantalla inferior a 576 px)
• .col-sm- (dispositivos pequeños: ancho de pantalla igual o superior a 576 px)
• .col-md- (dispositivos medianos: ancho de pantalla igual o superior a 768 px)
• .col-lg- (dispositivos grandes: ancho de pantalla igual o superior a 992 px)
• .col-xl- (dispositivos xlarge: ancho de pantalla igual o superior a 1200 px)
Las clases anteriores se pueden combinar para crear diseños más dinámicos y flexibles.
Consejo: Cada clase se escala, por lo que si desea establecer los mismos anchos para sm y
md, solo necesita especificar sm.
Bootstrap 5 incorpora una nueva clase para pantallas de dispositivos xxl, en línea con los
avances tecnológicos en cuanto a pantallas muy grandes.

Ver ejemplo clases-receptivas.html

BOOTSTRAP | Otros elementos
| Utilidades: Se aplican estilos para bordes, texto, alineaciones, colores (texto y
fondo), sombras, entre otros. https://getbootstrap.com/docs/4.5/utilities/

| Tablas: https://getbootstrap.com/docs/4.0/content/tables/
| Imágenes: https://getbootstrap.com/docs/4.0/content/images/
| Botones agrupados:
https://mdbootstrap.com/docs/standard/components/button-group/

Para otros elementos ver “Componentes”

Ejemplo de uso de Bootstrap y CSS: abrir aquí

Componentes
Permiten acelerar el proceso de diseño. Son soluciones que ya están programadas para
que funcionen de cierta manera, se “copien y peguen”

https://getbootstrap.com/docs/4.6/components
Navbar
Permite crear un encabezado de navegación o barra de navegación. Ya viene preparado
con el típico icono de hamburger (tres líneas horizontales) que aparece en la versión móvil
sin que tengas que hacer nada.

Desktop

https://getbootstrap.com/docs/4.6/components/navbar/
https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp

Mobile Ver ejemplo navbar.html

Jumbotron
Es un header con información, útil para destacar contenido importante en la página.

Ver ejemplo jumbotron.html

https://getbootstrap.com/docs/4.6/components/jumbotron/
https://www.w3schools.com/bootstrap4/bootstrap_ jumbotron.asp
Alerts
Son como cajas de texto con cierto tipo de diseño.
Se suelen usar para darle información al usuario.
https://getbootstrap.com/docs/4.6/components/alerts/
https://www.w3schools.com/bootstrap4/bootstrap_alerts.asp

Ver ejemplo alertas.html

Carousel
Utiliza un sistema de slide para recorrer varios elementos. Permite contener fotografías
que van pasando dentro del mismo espacio. Es un componente de presentación de
diapositivas para recorrer elementos (imágenes o diapositivas de texto) como un carrusel.

Ver ejemplo carousel.html

https://getbootstrap.com/docs/4.6/components/carousel/
https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp
Dropdowns
Sirven para que el usuario pueda escoger una opción en un conjunto de
posibilidades.
Genera un menú desplegable hacia abajo o hacia a la derecha que
permite incluir vínculos. Con el atributo active se puede marcar alguna
opción del menú.
Se pueden alternar para mostrar listas de enlaces y más.
Ver ejemplo dropdown.html
https://getbootstrap.com/docs/4.6/components/dropdowns/
https://www.w3schools.com/bootstrap4/bootstrap_dropdowns.asp

Breadcrumb
Llamadas también migas de pan, sirven para mostrar la situación del usuario dentro de una página.
Indica al usuario dónde está y de dónde viene.
Se agregan dentro de la etiqueta semántica <nav>. El atributo active es el que indica en qué página
estamos ubicados. Se suelen usar referencias relativas (dentro del mismo sitio).

Ver ejemplo breadcrumbs.html

https://getbootstrap.com/docs/4.6/components/breadcrumb/
Collapse (accordion)
Este elemento sirve para poder añadir un botón cuya funcionalidad sea poder ocultar y
mostrar cierto contenido, es decir, crear elementos colapsables.
Son contenidos que se despliegan. Se suele usar mucho en la sección “preguntas
frecuentes”.

Ver ejemplo collapse.html

https://getbootstrap.com/docs/4.6/components/collapse/
https://www.w3schools.com/bootstrap4/bootstrap_collapse.asp
Buttons

En los colores no hay mucho control, la idea es ofrecer soluciones rápidas de diseño
que permitan resolver ciertas cosas.
Los botones por defecto son elementos inline (en línea, aparecerán uno al lado del
otro), pero si quiero que esos botones se comporten como un div en este caso sería
inline-block podemos aplicar la clase btn-block:

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

block">Block level button</button>

En este caso ocupa todo el ancho de su contenedor

https://getbootstrap.com/docs/4.6/components/buttons/ Ver ejemplo botones.html

https://www.w3schools.com/bootstrap4/bootstrap_buttons.asp
Cards
Las cards o tarjetas, sirven para agrupar contenido. Se suelen utilizar para crear listas de
elementos, por ejemplo, artículos de blog, colecciones de elementos, etc.

Ver ejemplo cards.html

https://getbootstrap.com/docs/4.6/components/card/
https://www.w3schools.com/bootstrap4/bootstrap_cards.asp
Forms
Este elemento sirve para poder añadir un botón cuya funcionalidad sea poder ocultar y
mostrar cierto contenido, es decir, crear elementos colapsables.

https://getbootstrap.com/docs/4.6/components/forms/
https://www.w3schools.com/bootstrap4/bootstrap_forms.asp

Ver ejemplo forms.html

Modal
Los pop ups son ventanas emergentes que se abren cuando el usuario interacciona con
cierto elemento de una página como un botón o un enlace. Para que el modal pueda
funcionar, Bootstrap lo que hace es usar la etiqueta de data-toggle (en este caso modal) y
la etiqueta de data-target (en el ejemplo es el id del modal que se crea abajo, es decir un
id de referencia). Para cerrar el modal se usa la etiqueta html de data-dismiss=”modal”.
Dentro del modal podes colocar el contenido que quieras.

El vínculo entre ambos está marcado de color gris

https://getbootstrap.com/docs/4.6/components/modal/
Ver ejemplo modal.html https://www.w3schools.com/bootstrap4/bootstrap_modal.asp
Tables
Tenemos distintas clases para dar estilo a las tablas, estas son algunas de ellas:
• .table (por defecto)
• .table-hover
• .table-striped

https://getbootstrap.com/docs/4.6/content/tables/
https://www.w3schools.com/bootstrap4/bootstrap_tables.asp

Progress (barras de progreso)

https://getbootstrap.com/docs/4.6/components/progress/
https://www.w3schools.com/bootstrap4/bootstrap_progressbars.asp
Material complementario (sitios y videos)
• ¿Qué es Bootstrap?: https://youtu.be/8nEDw7gGLYM
• ¿Cómo instalar Bootstrap 4?: https://youtu.be/BkuYU7Rm_qg
• Instalación via CDN: https://youtu.be/LoHV4O8PLXc
• Uso y funcionamiento:
https://drive.google.com/file/d/1z8QLWJk9cf-hOBDTZoYbppD48Rtq-7fM/view?usp=sha
ring
• Container y Grid System: https://youtu.be/cI3OnxPXlrA
• Columnas Bootstrap 4 Responsive: https://youtu.be/GiNTQaB4A60
• Bootstrap 4 vs. Bootstrap 5: https://youtu.be/6YT6xgHX3V0
• Tutorial sobre columnas responsivas en Bootstrap: https://youtu.be/GiNTQaB4A60
• Cuadrícula en Bootstrap:
https://drive.google.com/file/d/1z9oH2sYSftYfnH8AMHpceqirEXiL3y4w/view?usp=sharin
g
• Formularios y Botones:
https://drive.google.com/file/d/1qe9CFGIFtpJP2gHWX5ItCkgzcwzAmRz4/view?usp=sha
ring
Material complementario (sitios y videos)
• Usuario y Clave:
https://drive.google.com/file/d/18YhKItqDauZd_eH_HIRxj-P1ODUrh6-q/view?usp=sharin
g
• Examples (getbootstrap.com): https://getbootstrap.com/docs/4.5/examples/
• Bootstrap Themes (w3schools):
https://www.w3schools.com/bootstrap/bootstrap_templates.asp
• Bootstrap Utilities (w3schools):
https://www.w3schools.com/bootstrap4/bootstrap_utilities.asp
• Bootstrap Theme “Company” (w3schools):
https://www.w3schools.com/bootstrap/bootstrap_theme_company.asp
• Bootstrap Theme “Simply Me” (w3schools):
https://www.w3schools.com/bootstrap/bootstrap_theme_me.asp
• Bootstrap Theme “Band” (w3schools):
https://www.w3schools.com/bootstrap/bootstrap_theme_band.asp
• Bootstrap 4 Responsive: https://youtu.be/VoJUGUA7eOQ
• Bootstrap 4 (Espaciados - Estilos de Texto - Colores - Fondos):
https://youtu.be/ZxSKUzpT38k
Herramientas (Vista de diseño adaptativo en Firefox)