Bootstrap - Introducción
Bootstrap - Introducción
Bootstrap - Introducción
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.
Frameworks CSS
Un framework CSS es un conjunto de estilos que permiten olvidarse del código
repetitivo para centrarse en los elementos únicos de cada diseño en los que puede
aportar valor.
https://getbootstrap.com/docs/5.2/getting-started/introduction/
No todo lo que brilla es oro
Si bien el uso de CDN’s es bastante
práctico, puede que no sea lo más
recomendable para proyectos grandes
o muy importantes, ya que no
podemos saber si esos enlaces estarán
siempre activos y funcionando
correctamente.
Descarga de archivos compilados.
Consiste en descargar el código fuente de bootstrap desde su sitio oficial y linkearlo
a nuestro sitio como una hoja de estilos CSS y scripts Javascript más de nuestro
proyecto.
“container” establece
un max-width, genera un margen
tanto a la izquierda como a la
derecha y también se centra.
.container-{breakpoint}
Grid System
Bootstrap incluye su propia solución a los diseños responsive.
Esta característica es una de las que hizo que sea uno de los
Frameworks más famosos y utilizados de CSS.
Se basa en un sistema de columnas que se ajustan
dinámicamente frente a los distintos tamaños de pantalla.
Grid System
El sistema de grillas de Bootstrap divide nuestras cajas en 12 columnas que
se utilizan para repartir los elementos hijos de cada contenedor.
Para eso se utilizan un conjunto de clases que se aplican tanto a padres
como a hijos.
Grid System
Las clases a utilizar son .row y .col solo que esta última se puede
utilizar de diversas maneras.
.row
.col
Esta clase tiene diversas variantes
y puede utilizarse más de una vez
en un mismo elemento.
Si la usamos sola, entonces le
indica al elemento que tiene que
ubicarse en fila y repartir las
columnas uniformemente junto
con los demás elementos de
clase .col
Por otra parte, podemos agregarle un breakpoint de pantalla y la
cantidad de columnas. Esto nos permite decidir cuántas columnas
queremos que ocupen nuestras cajas dependiendo el tamaño de la
pantalla, generando diseños adaptativos y muy dinámicos.
Breakpoints
Son los puntos de quiebre (media queries) usadas por bootstrap para distribuir sus
diseños. Estos se aplican en diversas clases pero como mencionamos recién, el caso más
conocido es para el Grid System.
Veamos cómo aprovechamos los breakpoints para crear
distintos layouts con las mismas cajas.
Grid System
Vamos a conocerlos...
Buttons
Con una simple línea HTML obtenemos botones de formulario muy
estéticos y en distintos colores para cada ocasión:
Cards
Un set de tarjetas prediseñadas multiuso. Son útiles para productos, entradas de blog,
mensajes y mucho más.