# Bootstap (DOR)
## Definición
Bootstrap es un framework CSS, desarrollado por Twitter en 2010. El framework combina CSS y JavaScript para estilizar los elementos de una página HTML. Permite mucho más que, simplemente, cambiar el color de los botones y los enlaces. Su principal objetivo es permitir la construcción de sitios web responsive para dispositivos móviles.
## Instalación
Se puede instalar de dos formas:
- Como módulo de Node: Para instalarlo como un módulo de Node, el motor de JavaScript, podemos hacerlo mediante 2 comandos:
```shell=
# Forma 1 con NPM
npm install bootstrap@5.2.2
#Forma 2 con GEM
gem install bootstrap -v 5.2.2
```
- Vía CDN: Si queremos usarlo directamente en el html, podemos importar el siguente enlace en la etiqueta head:
```htmlembedded=
<!-- Solo los estilos CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- La parte dinámica de JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
```
## Componentes Básicos
### Modal
Este componente nos permite agregar cuadros de diálogo a nuestra web, notificaciones de usuario o contenido completamente personalizado (Para ello necesitamos el bundle de JavaScript).
- Los modales se construyen con HTML, CSS y JavaScript. Se colocan en el documento y eliminan el desplazamiento del **\<body>** para que el contenido modal se desplace en su lugar.
- Al hacer click fuera del modal, se cerrará automáticamente.
- Solo se admite un modal simultaneamente. Los modales anidados no son compatibles porque los desarrolladores de Bootsrap consideran que genera una mala práctica.
- Los modales usan **position: fixed**, que a veces pueden ser un poco particulares sobre su representación. Siempre que sea posible, se recomienda poner el modal en una posición de nivel superior para evitar posibles interferencias de otros elementos.
- Debido a que tiene una posición fija, hay algunos peligros al usar modales en dispositivos móviles.
- Desde que HTML5 tiene definida una semántica, el atributo HTML de *auto-focus* no tiene efecto en los modales de Bootstrap. Para lograr dicho efecto, debemos usar el siguiente código JavaScript:
```javascript=
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', () => {
myInput.focus()
})
```
### Popovers
Cosas que debes saber al usar el componente:
- Los popovers se basan en la biblioteca de Popper para el posicionamiento. Debe incluir popper.min.js antes de bootstrap.js, o usar un bootstrap.bundle.min.js que contenga Popper.
- Los popovers requieren el complemento popover como dependencia.
- Los popovers son opcionales por motivos de rendimiento, por lo que debemos inicializarlo nosotros mismos.
- Los valores de título y contenido de longitud cero nunca mostrarán una ventana emergente.
- Especifique el contenedor: 'body' para evitar problemas de representación en componentes más complejos (como nuestros grupos de entrada, grupos de botones, etc.).
- Activar popovers en elementos ocultos no funcionará.
- Los popovers para elementos '.disabled' o 'disabled' deben activarse en un elemento contenedor.
- Cuando se activan desde una etiqueta \<a> que ocupa varias líneas, los popovers se centrarán en el espacio que ocupe la etiqueta. Usa '.text-nowrap' para evitardicho comportamiento.
### Navbar
Esto es lo que necesita saber antes de comenzar con el menú de navegación:
- Las barras de navegación requieren un elemento contenedor con la clase '.navbar' y la clase '.navbar-expand-[sm|-md|-lg|-xl|-xxl]' para el responsive del componente.
- El menú de navegación y su contenido son fluidos por defecto . Cambie el contenedor para limitar su ancho horizontal de diferentes maneras.
- Podemos hacer uso de las clases de utilidad de espaciado y flex para controlar el espacio y la alineación dentro del menú de navegación.
- El menú de navegación es responsive por defecto, pero se puede modificar fácilmente para cambiarlo. El comportamiento responsivo depende del plugin Collapse JavaScript.
- Asegure la accesibilidad usando un elemento \<nav> o, si usa un elemento más genérico como un \<div>, agregue un role="navegation" a cada menú de navegación.
- Indique el elemento actual usando aria-current="page" para la página actual o aria-current="true" para el elemento actual en un conjunto.
- El menú de navegación se puede tematizar con variables CSS que tienen como ámbito la clase base .navbar.
- .navbar-light ha quedado obsoleto y .navbar-dark se ha reescrito para anular las variables CSS en lugar de agregar estilos adicionales.
## Formularios
Bootstrap te ofrece el estilado de los formularios, manejar su layout y componenes custom para crear una amplia variedad de formularios.
Dentro de lo que permite manejar se encuentra:
### Control de Formularios
Ofrece controles textuales como \<input>s y \<textarea>s, para ello agremos la clase '.form-control' a dichos elementos.
```htmlembedded=
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
```
Además podemos configurar ciertas propiedas como el tamaño, que este desabilitado, la propiedad readonly (Que aplique dicha propiedad o se vea como texto plano), estilos de \<input type="file">, estilos de \<input type="color"> y data-list.
### Select
Permite personalizar los \<select> nativos con CSS personalizado. Los estilos modifican la apariencia de \<select>, pero no pueden modificar los \<option>
```htmlembedded=
<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
```
Además podemos configurar propiedades como el tamaño y que esté desabilitado
### Checks y radios
Los \<input type="radio"> y \<input type="checkbox"> predeterminados se reemplazan con la ayuda de la clase '.form-check', una serie de clases para ambos etiquetas \<input> que mejoran el diseño y el comportamiento de sus elementos HTML.
Estructuralmente, los \<input>s y \<label>s son elementos hermanos, a diferencia de un \<input> dentro de un \<label>. Se hace uso del selector de hermanos (~) para todos los estados de \<entrada>, como :checked o :disabled. Cuando se combina con la clase .form-check-label, podemos diseñar fácilmente el texto de cada elemento en función del estado de \<input>.
#### Checkbox
```htmlembedded=
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Checked checkbox
</label>
</div>
```
#### Radio
Los checkboxs pueden utilizar la pseudoclase :indeterminate cuando se configuran mediante JavaScript.
```htmlembedded=
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
Default checked radio
</label>
</div>
```
#### Toggle Buttons
Se pueden crear checks y radios similares a botones haciendo uso de .btn en lugar de .form-check-label en los \<label>.
```htmlembedded=
<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>
```
#### Switch
Un switch tiene el marcado de una casilla de verificación personalizada, pero usa la clase .form-switch para representar un switch de palanca. Es recomendable usar role="switch" para transmitir con mejor el tipo de control.
```htmlembedded=
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
<label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>
```
Además podemos configurar propiedades como que esté desabilitado.
### Rangos
Nos permite dar estilos a los \<input type="range">, añadiendo la clase '.form-range'
### Input group
Nos permite estilar un grupo de elementos de formularios (inputs, buttons, grupo de botones, select, file inputs, etc).
Por defecto envuelven sus elementos con la propiedad flex-wrap: wrap, puedes desactivarlo con la clase '.flex-nowrap'.
```htmlembedded=
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
</div>
```
Podemos colocar un \<input type="radio"> o \<input type="checkbox"> dentro del grupo de elementos, en lugar de texto. Recomendamos agregar la clase '.mt-0' junto a '.form-check-input' cuando no haya texto visible junto a la entrada.
### Labels Flotantes
Podemos colocar un par de elementos \<input class="form-control"> y \<label> en .form-floating para habilitar etiquetas flotantes con los campos de formulario de texto. Es necesario un marcador de posición en cada \<input> ya que el método de etiquetas flotantes de CSS utiliza el pseudoelemento :placeholder-shown. También debemos tener en cuenta que \<input> debe ir primero para que podamos utilizar un selector de hermanos (~).
```htmlembedded=
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
```
### Validaciones
Asi funcionan las validaciones en Bootstrap:
* Las validaciones de los formularios se aplican a través de las pseudo-clases, :invalid y :valid. Se aplica a los elementos \<input>, \<select>, y \<textarea>.
* Bootstrap enfoca los estilos de las pseudoclases :invalid y :valid al elemento padre a través de la clase '.was-validated', generalmente a un \<form>. De otra manera, cualquier campo requerido sin un valor se muestra como inválido cuando la página carga.
* Para resetear la apariencia del formulario (por ejemplo en el caso de un formulario dinámico con AJAX), borre la clase '.was-validated' del formulario después de enviarlo.
* Como último recurso, las clases '.is-invalid' y '.is-valid' pueden ser usados en lugar de las pseudo-classes para validar del lado del servidor. No requiere que el elemento padre tenga la clase '.was-validated'.
* Debido a las limitaciones del CSS, actualmente no podemos aaplicar estilos a elementos \<label> que vengan antes de formularios controlados en el DOM sin ayuda de JavaScript.
* Todos los buscadores modernos soportan la API de Validaciones, una serie de métodos de JavaScript para validar formularios
Es recomendable usar la validación del lado del cliente, pero en caso de que queramos hacer la validación del lado del servidor, podemos indicar campos de formulario válidos y no válidos con .is-invalid y .is-valid.
Para campos no válidos, debemos asegurarnos de que el mensaje de error esté asociado con el campo en cuestión utilizando aria-describedby (tener en cuenta que este atributo permite hacer referencia a más de una identificación).
```htmlembedded=
...
<div class="col-md-4">
<label for="validationServer02" class="form-label">Last name</label>
<input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationServerUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend3">@</span>
<input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback" required>
<div id="validationServerUsernameFeedback" class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
...
```
## Layout
### Breakpoints
Los breakpoints son los tamaños personalizables que determinan cómo se comportará el diseño en diferentes tamaños de ventana.
- Los breakpoints son los componentes básicos del diseño responsive. Los usaremos para controlar cuándo se puede adaptar su diseño a un tamaño de dispositivo en particular.
- El objetivo es el diseño móvil primero, responsivo. El CSS de Bootstrap tiene como objetivo aplicar el mínimo de estilos para hacer que un diseño funcione en el punto de interrupción más pequeño, y luego capas de estilos para ajustar ese diseño para dispositivos más grandes. Esto optimiza su CSS, mejora el tiempo de renderizado y proporciona una gran experiencia para sus visitantes.
Bootstrap incluye seis breikpoints por defecto, que pueden ser customizados mediante SASS
### Contenedores
Los contenedores son bloques fundamentales de Bootstrap que contienen, rellenan y alinean su contenido. 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**: establece un ancho máximo en cada breakpoint.
- **.container-fluid**: su ancho es de 100% en todos los breakpoints.
- **.container-{breakpoint}**: su ancho es de 100 % hasta el breakpoint especificado.
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.
### Grid
Utilice nuestra potente cuadrícula flexbox para dispositivos móviles para crear diseños de todas las formas y tamaños gracias a un sistema de doce columnas, seis breikpoints por defecto, variables Sass y mixins, y docenas de clases predefinidas.
Desglosándolo, así es como se une el sistema de cuadrícula:
- Como habíamos explicado antes podemos hacer uso de los 6 breakpoints que hay por defecto, para definir el tamaño de nuestro Grid
- **Los contenedores centran y rellenan horizontalmente su contenido**: Use '.container' para un ancho de píxel responsivo, '.container-fluid' para ancho: 100 % en todas las ventanas y dispositivos, o un contenedor responsivo (p. ej., .container-md) para una combinación de anchos fluidos y de píxel.
- **Las filas son envoltorios para las columnas**: Cada columna tiene un padding horizontal (llamado canalón) para controlar el espacio entre ellas. Este padding luego se contrarresta en las filas con márgenes negativos para garantizar que el contenido de sus columnas esté alineado visualmente en el lado izquierdo. Las filas también admiten clases de modificadores para aplicar de manera uniforme el tamaño de las columnas y clases de canalones (gutter) para cambiar el espaciado de su contenido.
- **Las columnas son increíblemente flexibles**: Hay 12 columnas por fila, lo que le permite crear diferentes combinaciones de elementos que abarcan cualquier número de columnas. Las clases de columna indican el número de columnas que abarca (por ejemplo, 'col-4' abarca cuatro). los anchos se establecen en porcentajes para que siempre tenga el mismo tamaño relativo.
- **Los canalones también son responsivos y personalizables**: Las clases de canalones(gutter) están disponibles en todos los breakpoints , con los mismos tamaños que nuestro margen y padding. Cambie los canalones horizontales con la clase '.gx-*', los canalones verticales con '.gy-*' o todos los canalones con las clases '.g-*.' '.g-0' también está disponible para eliminar canalones.
- **Las variables Sass, los mapas y los mixins alimentan el Grid**: Si no desea utilizar las clases de Grid predefinidas en Bootstrap, puede usar el Sass del Grid de Bootstrap para crear el suyo propio con más marcado semántico. También incluimos algunas propiedades personalizadas de CSS para consumir estas variables de Sass y tener una mayor flexibilidad para usted.
-- Ejemplos (Capturas) --
- Mismo tamaño de las columnas
- Cambiando el tamaño de una columna
- Cambiando el width con breakpoints por defecto (xs, s, etc)
- Cambiando el width con numeros
- Cambiando el width con breakpoints por defecto y numeros
- Decir el numero de columnas dentro de una fila
- Nesting (Filas dentro de columnas)
## Ampliación
### Sass
Utilizaremos los archivos Sass para aprovechar variables, mapas, combinaciones y funciones y ayudarnos a construir más rápido y personalizar nuestro proyecto.
#### Estructura
Siempre que sea posible, debemos evitar modificar los archivos principales de Bootstrap. Con Sass debemos crear nuestra propia hoja de estilo importada de Bootstrap para modificarla y ampliarla. La estructurá se parecerá a algo como esto:
```
proyecto/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
```
#### Importación
En el custom.scss, importaremos los archivos Sass de origen de Bootstrap. Tendremos dos opciones: incluir todo Bootstrap o elegir las partes que necesitamos.
Es más recomendable lo último, aunque debemos tener en cuenta que existen algunos requisitos y dependencias entre los componentes. También tendremos que incluir algo de JavaScript para los complementos.
```htmlembedded=
// Custom.scss
// 1. Incluiremos funciones primero (para poder manipular colores, SVG, calc, etc.).
@import "../node_modules/bootstrap/scss/functions";
// 2. Incluiremos cualquier anulación de variable predeterminada aquí.
// 3. Incluiremos el resto de las hojas de estilo Bootstrap requeridas.
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// 4. Incluiremos los componentes opcionales de Bootstrap que queramos.
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
// 5. Agregaremos código personalizado adicional aquí.
```
Con esta configuración podremos comenzar a modificar cualquiera de las variables y mapas de Sass en su custom.scss. También podremos comenzar a agregar partes de Bootstrap en la sección opcional según sea necesario.
#### Variables por defecto
Cada variable de Sass en Bootstrap incluye el indicador !default que le permite anular el valor predeterminado de la variable en el propio Sass, sin modificar el código fuente de Bootstrap. Debemos copiar y pegar las variables según sea necesario, modificaremos sus valores y eliminaremos el indicador !default.
Encontraremos la lista completa de variables de Bootstrap en scss/_variables.scss. Algunas variables se establecen en nulo, estas variables no generan la propiedad a menos que se anulen en su configuración.
Las anulaciones de variables deben realizarse después de importar nuestras funciones, pero antes del resto de las importaciones.
Aquí hay un ejemplo que cambia el color de fondo y el color del \<body\> al importar y compilar Bootstrap a través de npm:
```htmlembedded=
// Requerido
@import "../node_modules/bootstrap/scss/functions";
// Anulaciones de variables predeterminadas
$body-bg: #000;
$body-color: #111;
// Requerido
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// Componentes optionales de Bootstrap components
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
```
###### tags: `DAW` `DOR` `Bootstrap`
Sign in with Wallet
Connect another wallet