Bootstrap
Bootstrap
Bootstrap
1. Frameworks
2. Bootstrap
a. ¿Qué es Bootstrap?
b. Instalación
3. Container
4. Sistemas de Grillas (GridLayout)
5. Herramientas de Bootstrap
6. Utilización de Componentes.
a. Botones
b. Cards
c. Carousel
d. Navbar
¿Qué es un Framework?
¿Qué es Boostrap?
Entre todas las cosas, Bootstrap nos ofrece soluciones pre establecidas para
dar estilos a botones, listas, formularios, encabezados y texto entre otros.
También nos deja a disposición clases para generar diseños adaptativos frente
a diferentes tamaños de pantalla y además tiene un set de componentes ya
armados para contar con elementos como un carrusel, una barra de
navegación, un tooltip o modales entre otras cosas.
Instalación
Lo primero a saber antes de comenzar es que toda la información que
necesitemos saber sobre Bootstrap se encuentra disponible en su sitio web, en
la parte de docs. Como es común en las herramientas creadas para el
desarrollo, allí encontraremos lo necesario para comenzar (desde la
instalación) y toda la información sobre el uso de framework y sus
propiedades.
Lo primero que tenemos que hacer es copiar el enlace del CSS dentro de la
etiqueta <head></head> de nuestro HTML mediante una etiqueta <link
rel=”stylesheet” /> y el enlace de javascript dentro de una etiqueta <script
src=””></script> justo arriba de la etiqueta de cierre de nuestro </body>.
Es de suma importancia tener en cuenta el órden en el que se agregan estas
etiquetas ya que en caso que deseemos sobrescribir estilos por defecto que
trae el framework, no podremos hacerlo si importamos nuestros estilos antes
que los de Bootstrap. Eso se debe a la propiedad de CSS donde los estilos se
leen en cascada, o de arriba para abajo.
Description URL
CSS https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstr
ap.min.css
JS https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstra
p.bundle.min.js
Normalización de estilos
Bootstrap utiliza la hoja de estilos _reboot.css para normalizar como se ven los
diseños en diferentes navegadores y en algunas oportunidades para aplicar un
estilo por defecto ligeramente diferente a algunos elementos HTML.
Descargando Bootstrap
Bootstrap es compatible con las versiones estables más recientes de todos los
navegadores y sistemas operativos más populares.
Accesibilidad
https://getbootstrap.com/docs/5.2/getting-started/accessibility/
Elementos HTML
Componentes interactivos
Contraste de colores
Reduciendo el movimiento
Bootstrap también soporta el uso de la opción prefers-reduced-motion
mediante la cual los navegadores indican que el usuario prefiere reducir el
movimiento de los elementos de la página. Si está activada, las ventanas
modales por ejemplo no muestran ninguna animación ni al abrirse ni al cerrarse.
Container
Los contenedores son el elemento de diseño más básico en Bootstrap y son
necesarios cuando se utiliza el sistema de cuadrícula predeterminado. Los
contenedores se utilizan para contener, rellenar y (a veces) centrar el
contenido dentro de ellos. Si bien los contenedores se pueden anidar, la
mayoría de los diseños no requieren un contenedor anidado.
Cómo funciona
Tablas
Encabezados
Con Bootstrap, las etiquetas de encabezado tradicionales se ven de la
siguiente manera:
Para poder utilizarlos solo debemos copiar el código brindado por Bootstrap y
modificar la información que trae por defecto, por la de nuestro proyecto, ya
sean textos, imágenes y todo lo que sea configurable.
Botones
Bootstrap incluye varios estilos de botones predefinidos, cada uno con su
propio propósito semántico y con algunos extras incluidos para un mayor
control.
En estos ejemplos podemos ver como cada botón posee una misma clase .btn
que es la que aporta el diseño de botón, pero además tienen una clase
.btn-color donde reemplazamos la palabra color por el nombre del color de
Bootstrap que deseamos.
Por otra parte podemos manejar los tamaños de nuestros botones con las
clases .btn-lg y .btn-sm:
O tener botones transparentes:
Cards
Una card es un contenedor de contenido flexible y extensible. Incluye opciones
para encabezados y pies de página, una amplia variedad de contenido, colores
de fondo contextuales y potentes opciones de visualización.
Carousel de Slides
En este caso solo debemos copiar el código y modificar los atributos scr=”” de
las imágenes para que nuestro carousel funcione. Siempre es recomendable
utilizar imágenes del mismo tamaño para evitar saltos de tamaño inesperados
entre cada slide.
Cierre de componentes
Si bien vimos algunos ejemplos, Bootstrap cuenta con más de 20 componentes
interactivos que nos ayudarán en nuestros proyectos. Además de los que
acabamos de conocer, nos podemos encontrar con modales desplegables,
ventanas offcanvas, tooltips, paginación, dropdowns, badges, alertas,
acordeones entre otros.