BOOSTRAP

Prof. Carmen C. Cortés

http://www.free-powerpoint-templates-design.com
Agenda
01 Qué es Bootstrap

02 Por qué Bootstrap

03 Cómo instalar Bootstrap

04 Componentes
BOOSTRAP
Bootstrap es una
herramienta de trabajo
para desarrolladores
Front-end, contiene un
conjunto de estilos CSS y
script JS para desarrollar
web a la velocidad de la
luz.
 Qué es Bootstrap

 Conjunto de herramientas de código abierto para el diseño de

sitios y aplicaciones web

 Desarrollado por Mark Otto y Jacbod Thornton de Twitter

 En agosto de 2011 Twitter liberó Bootstrap como código abierto

y en febrero de 2012 se convirtió en el proyecto de desarrollo
más popular de Github.

 Se distribuye bajo Apache 2 license

 Por qué Bootstrap
 Fácil de usar: Cualquier persona con conocimientos básicos de HTML y
CSS puede comenzar a usar Bootstrap
 Funciones responsivas: El CSS responsivo de Bootstrap se ajusta a
teléfonos, tabletas y computadoras de escritorio
 Enfoque mobile-first: En Bootstrap, los estilos mobile-first forman parte
del marco principal. Priorización del diseño y el desarrollo para
dispositivos móviles por encima del diseño y desarrollo para pantallas de
escritorio
 Compatibilidad con navegadores: Bootstrap 5 es compatible con todos
los navegadores modernos (Chrome, Firefox, Edge, Safari y Opera).
 Cómo instalar Bootstrap

https://getbootstrap.com/

https://getbootstrap.com/docs/5.3/getting-started/introduction/
 Como administrar el espacio
Bootstrap tiene una sencilla pero a su vez poderosa forma de administrar el espacio permitiendo realizar
diferentes acciones dependiendo del tamaño de la pantalla en el que nos encontremos, esto hace que
podamos no solo mantener nuestro sitio web accesible a todo tipo de dispositivo si no también a mejorar
su presentación dependiendo del mismo.
Como administrar el espacio
Como administrar el espacio
 COMPONENTES DESTACADOS
CDN
La manera más sencilla de comenzar
con Bootstrap es utilizar el CDN. Los
archivos están alojados en un servidor
externo.

Breakpoints
Hace referencia a los puntos de interrupción,
dependiendo del tamaño del dispositivo que esté visitando
nuestro sitio web
 container
Contenedores Bootstrap 5
Bootstrap requiere un elemento contenedor para encapsular el contenido del sitio.

Los contenedores se usan para rellenar el contenido dentro de ellos y hay dos clases de
contenedores disponibles:

La clase .container proporciona un contenedor de ancho fijo con capacidad de respuesta

La clase .container-fluid proporciona un contenedor de ancho completo, que abarca todo
el ancho de la ventana.
 container
Contenedor fijo
Use la clase .container para crear un contenedor interactivo de ancho fijo.

Tenga en cuenta que su ancho (max-width) cambiará en diferentes tamaños

de pantalla:
 container
Contenedor fluid
Use la clase .container-fluid para crear un contenedor de ancho
completo, que siempre abarcará todo el ancho de la pantalla (el
ancho siempre es del 100%):
 Grid
Sistema de cuadrícula Bootstrap 5
El sistema de cuadrícula de Bootstrap está construido con flexbox y permite
hasta 12 columnas en toda la página.

Si no desea utilizar las 12 columnas individualmente, puede agruparlas para

crear columnas más anchas:
 Grid
El sistema de cuadrícula es responsive y las columnas se
reorganizarán automáticamente según el tamaño de la
pantalla.

Asegúrese de que la suma suma 12 o menos (no es

necesario que utilice las 12 columnas disponibles).

Clases de cuadrícula
 Grid
.col- (extra small devices - dispositivos extra pequeños - ancho de pantalla
inferior a 576px)
.col-sm- (small devices - dispositivos pequeños - ancho de pantalla igual o
superior a 576px)
.col-md- (medium devices - dispositivos medianos - ancho de pantalla igual
o superior a 768px)
.col-lg- (large devices - dispositivos grandes: ancho de pantalla igual o
superior a 992px)
.col-xl- (xlarge devices - dispositivos xlarge - ancho de pantalla igual o
superior a 1200px)
.col-xxl- (xxlarge devices - ancho de pantalla igual o superior a 1400px)
Las clases anteriores se pueden combinar para crear diseños más
dinámicos y flexibles.
 Otros componentos de Personal-
ización y Diseño

Exploremos en:
https://getbootstrap.com/docs/5.3/getting-started/introduction/
PRACTICA