Bootstrap

Descargar como pdf o txt
Descargar como pdf o txt
Está en la página 1de 31

Contenidos a Trabajar

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?

Es un entorno de trabajo que incluye herramientas prefabricadas con


soluciones a problemas comunes que deben usarse mediante la aplicación de
ciertas reglas definidas por el mismo framework.

Este conjunto de reglas y soluciones nos otorgan un estándar de trabajo que


nos permite trabajar de forma ordenada y reducir ampliamente nuestra
cantidad de código redundante.

En el caso de CSS los framework principalmente son una solución a la creación


de estilos, aportando clases con estilos ya pensados y diseñados como por
ejemplo, para aplicar a una etiqueta <button> y que esta adopte una apariencia
tradicional de botón.

A diferencia de los Frameworks, tenemos las librerías donde su función


principal es dar solución a un problema específico importando el código fuente
en nuestro proyecto y utilizando solo lo que necesitamos. Un ejemplo claro es
la librería Animate.style con la cual podemos añadir animaciones a nuestros
elementos pero no brinda mayores soluciones a nivel de estilos que en ese
aspecto.
BOOTSTRAP

¿Qué es Boostrap?

Es un Framework que permite generar en forma más sencilla y con menos


código un FrontEnd de una página web en forma responsive y basándose en
las cualidades de CSS.

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.

El sitio oficial es https://getbootstrap.com y actualmente se encuentra en su


versión 5.2.

Existen 4 formas de contar con Bootstrap en nuestros proyectos:


● CDN (enlace desde nuestro HTML)
● Descargando el código compilado
● Descargando el código sin compilar
● A través de un gestor de paquetes.

En este caso aprenderemos las 2 más comunes, CDN y código compilado.

Los archivos CSS de Bootstrap

A través de un servicio CDN (content delivery network) podemos traernos a


nuestro proyecto todo el CSS y Javascript de bootstrap sin necesidad de
bajarnos el código fuente.

Esta opción si bien es cómoda y bastante rápida, no es la recomendada para


proyectos robustos o reales ya que dejamos en manos de los servidores donde
están alojados esos archivos que nuestro proyecto funcione con bootstrap o
no. Eso se debe a que los errores pueden suceder y estos servicios no
funcionar debido a caídas del servidor.

Para los efectos prácticos de nuestros proyectos, esta opción resulta de


verdadera utilidad.

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

De esta manera ya tendremos habilitado bootstrap en nuestro proyecto y para


chequearlo sencillamente abrimos nuestro HTML donde podremos observar
que la fuente tipográfica y algunos estilos han cambiado por los que integra
Bootstrap por defecto.

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

Además de enlazar directamente los archivos CSS y JavaScript ofrecidos por


BootstrapCDN (tal y como se explicó anteriormente), veremos como agregar
Bootstrap a nuestro proyecto descargando el código fuente.

Puede visitar la página oficial de descargas de Bootstrap


(https://getbootstrap.com/docs/5.2/getting-started/download/) para descargar
un archivo ZIP comprimido con los archivos CSS y JavaScript listos para usar.
Los archivos se entregan compilados y minimizados. Una vez descargados
debemos linkear a nuestro proyecto únicamente los archivos llamados
bootstrap.min.css y bootstrap.min.js, de esta manera obtendremos el mismo
resultado que mediante CDN pero sin el miedo que algún día los enlaces
pudieran caerse y dejar a nuestro sitio sin estilos.
Compatibilidad con los navegadores

Bootstrap es compatible con las versiones estables más recientes de todos los
navegadores y sistemas operativos más populares.

Accesibilidad

La accesibilidad de un proyecto diseñado con Bootstrap depende


fundamentalmente del código HTML y los estilos/plugins que añadas tú mismo.
Aún así, Bootstrap hace todo lo posible para ayudarte a conseguir que tus
sitios sean accesibles.

https://getbootstrap.com/docs/5.2/getting-started/accessibility/
Elementos HTML

La documentación de Bootstrap siempre muestra en sus ejemplos los


elementos y atributos HTML recomendados para hacer tus aplicaciones
accesibles. Sin embargo, siempre puedes modificar las etiquetas utilizadas por
Bootstrap para lograr resultados en función de la semántica de tus
componentes, esto se debe a que usualmente los ejemplos de Bootstrap se
centran en el uso de divs para todo lo que sean cajas contenedoras.

Componentes interactivos

Los componentes interactivos, como las ventanas modales y los menús


desplegables han sido diseñados para que funcionen con el ratón, el teclado y
también las pantallas táctiles de los móviles. Gracias al uso de los atributos
WAI-ARIA, estos componentes también son accesibles mediante dispositivos
como lectores de pantalla.

Contraste de colores

Desafortunadamente, la mayoría de colores de las paletas generadas por


Bootstrap no tienen un nivel de contraste suficiente según el estándar WCAG
2.0, que requiere un ratio de 4.5:1 cuando se utiliza un color de fondo claro. Así
que tendrás que definir tus propios colores si quieres lograr ese objetivo.

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.

Bootstrap viene con tres contenedores diferentes:

.container: que establece un ancho máximo en cada breakpoint de respuesta.

.container-{breakpoint}: que es ancho: 100 % hasta el breakpoint


especificado.

.container-fluid: que es ancho: 100% en todos los breakpoints.

La siguiente tabla ilustra cómo se compara el ancho máximo de cada


contenedor con el .container y el .container-fluid originales en cada breakpoint.
Tal como se muestra en la imagen, dependiendo el tamaño de la pantalla
(breakpoint) es el ancho que va a tomar la etiqueta HTML que tenga asignada
la clase .container y que cambiará si en su lugar utilizamos algunas de sus
variantes.
Sistema de Grillas

La cuadrícula basada en flexbox (una forma de maquetado en CSS) para


dispositivos móviles y para crear diseños de todas las formas y tamaños
gracias a un sistema de doce columnas, cinco niveles de respuesta
predeterminados y decenas de clases predefinidas.

Gracias a este sistema podemos generar layouts adaptativos sin necesidad de


código CSS o media queries.

Cómo funciona

El sistema de cuadrícula de Bootstrap utiliza una serie de contenedores, filas y


columnas para diseñar y alinear el contenido.

A continuación se muestra un ejemplo y una mirada en profundidad de cómo se


utiliza la cuadrícula.
El ejemplo anterior crea tres columnas de igual ancho en dispositivos
pequeños, medianos, grandes y extra grandes utilizando nuestras clases de
cuadrícula predefinidas. Esas columnas están centradas en la página con la
clase padre .container.

Desglosando, así es como funciona:

• Los contenedores proporcionan un medio para centrar y rellenar


horizontalmente el contenido de su sitio. Utilizando .container para un ancho
de píxel receptivo o .container-fluid para width: 100% en todos los tamaños de
vista y dispositivo.

• La clase “row” representa un contenedor de fila, dividido en 12 columnas.


• En un diseño de cuadrícula, el contenido debe colocarse dentro de las
columnas (elemento con class=”col”) y solo las columnas pueden ser hijos
inmediatos de una fila (elementos con class=”row”).

• Los elementos con class=”col” representan columnas. Esta clase distribuye


uniformemente todos los elementos que se encuentre dentro de un elemento
con class=“row”, como en el primer ejemplo donde cada caja ocupa 4
columnas o un 33% del contenedor .row.

• Los elementos con class=”col” se les puede indicar la cantidad de columnas


que le gustaría usar de las 12 posibles por fila, en lugar de dejar que lo calcule
automáticamente. Entonces, si deseas tres columnas de igual ancho, podés
usar .col-4 o si prefieres tener una caja de 6 columnas y otras dos cajas de 3
columnas puedes hacer lo siguiente:
• Para que la cuadrícula se adapte a los distintos tamaños de pantallas, hay
cinco breakpoints de la cuadrícula (como si fueran media queries): extra
pequeños <xs>, pequeños <sm>, medianos <md>, grandes <xl> y
extragrandes <xxl>.

• Además de indicar la cantidad de columnas, es posible indicar frente a qué


tamaños de pantalla mi caja debe ocupar esas columnas. Por ejemplo si utilizo
la clase .col-md-4 ese elemento ocupará 4 columnas desde el breakpoint
<medium - 768px> en adelante mientras que en un tamaño de pantalla inferior,
se calculará automáticamente o tomará el 100% del ancho de la pantalla.
• Es posible usar más de una clase .col-xx-x por caja, cada clase definirá el
comportamiento o cantidad de columnas que debe ocupar un elemento frente
a los distintos breakpoints (puntos de quiebre de la pantalla) disponibles.

Hay que tener en cuenta que existen limitaciones en flexbox , como la


imposibilidad de utilizar algunos elementos HTML como contenedores flexibles.
Herramientas de Bootstrap
Bootstrap nos trae herramientas, propiedades y estilos propios ya diseñados
que simplemente debemos copiar y pegar en nuestro proyecto. Esta es una de
las grandes ventajas del framework aunque a veces puede provocar que los
proyectos realizados con Bootstrap terminen siendo parecidos. En este espacio
vamos a conocer algunas de estas herramientas.

Tablas
Encabezados
Con Bootstrap, las etiquetas de encabezado tradicionales se ven de la
siguiente manera:

Mientras que en los casos que necesitemos encabezados disruptivos entonces


contamos con las clases .display-x, a estos se los conoce como “Display
Headings”.
Formularios
Contamos con múltiples elementos para la creación de formularios con diseños
y layouts bastante útiles que nos permitirán tener un espacio para entrada de
datos por parte del usuario de forma rápida y sencilla.
Utilización de Componentes
Además de un sinfín de clases con estilos predeterminados para manejar cosas
como el margin, padding, tipografías, imágenes, tablas, formularios y
encabezados, Bootstrap cuenta con sus famosos componentes. Estos
elementos tienen comportamientos específicos y que nos ahorran tiempo y
dificultad. Algunos componentes son los carruseles, los modales, los botones y
las barras de navegación entre otros.

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.

A continuación se muestra un ejemplo de una tarjeta básica con contenido


mixto y un ancho fijo. Las tarjetas no tienen un ancho fijo para comenzar, por lo
que naturalmente llenarán todo el ancho de su elemento principal. Esto se
puede personalizar fácilmente con nuestras diversas opciones de tamaño.
También es posible crear grupos o grillas de cards para disponer de ellas de
forma organizada y adaptable.
Carousel
El carrusel es una presentación de diapositivas para recorrer una serie de
contenido, creado con transformaciones CSS 3D y un poco de JavaScript.
Funciona con una serie de imágenes, texto o marcas personalizadas. También
incluye soporte para controles e indicadores anteriores/siguientes.

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.

Carousel con Flechas


Funciona igual que el caso anterior pero cada slide tiene flechas para manejar
el componente.

Carousel con flechas, indicadores y texto.


Alternativa similar a las anteriores, en este caso además de las imágenes
debemos reemplazar el texto de cada slide.
Navbar
Uno de los componentes más útiles de Bootstrap, nos pone a disposición una
barra de navegación completa con distintos escenarios y que además es 100%
responsive, donde en pantallas pequeñas el menú de navegación es
reemplazado por un ícono de menú hamburguesa desplegable con nuestras
opciones.
Estos menús son completamente personalizables y se les puede cambiar
estilos y diseño sin afectar su comportamiento.

Así se vería el menú en pantallas pequeñas:

y en este ejemplo ya lo podemos ver desplegado:

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.

También podría gustarte

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy