Programación Web: Bootstrap

Bootstrap es un "framework" (marco de trabajo) para diseñar webs a través de CSS y Javascript. Funciona añadiendo una referencia a una hoja de estilo y a unos scripts de Javascript. Estos archivos pueden descargarse o referenciarlos a través de un CDN ("Content Delivery Network", Red de Entrega de Contenido). Suele ser necesario compaginarlo con una hoja de estilos propia para personalizar más el diseño.
https://getbootstrap.com/docs/4.3/getting-started/introduction/

1. Referencia al CSS

Etiqueta <link> con la dirección de la hoja de estilos de bootstrap.

2. Referencia a los Javascript

Etiquetas <script> con las direcciones de los scripts de JQuery, Popper.js (versión 'umd') y Bootstrap.

3. Uso de la librería

El funcionamiento se basa principalmente en indicar mediante la propiedad class de cada elemento el diseño que le queremos aplicar.

4. Contenedores

El elemento básico en Bootstrap es el “contenedor”:
```
<div class=”container”>
```
Contenedor fluido (ocupa todo el ancho de la ventana): container-fluid

5. Diseño en rejilla

El diseño se basa en filas y columnas, que se adaptan al tamaño de la pantalla:

Fila: row
Columna: col-
- Para aplicar a partir de:
  - pantallas muy pequeñas: col-xs-
  - pequeñas: col-sm-
  - medianas: col-md-
  - grandes: col-lg-
  - extra grandes: col-xl-

El diseño se divide en 12 columnas:
Ejemplo: Tres recuadros iguales (en horizontal) a partir de pantallas medianas: tres columnas de clase col-md-4 (el elemento ocupa 4 columnas)

Ancho variable según el contenido: col-md-auto
Columna que ocupe el ancho restante de la fila: col (col-sm, etc.)

6. Modificar la disposición de los elementos

Alineación vertical:
- Grupo:
  - align-items-start
  - align-items-center
  - align-items-end
- Individual:
  - align-self-start
  - align-self-center
  - align-self-end
Alineación horizontal:
- justify-content-start
- justify-content-center
- justify-content-end
- justify-content-around (separados de forma equitativa)
- justify-content-between (cada elemento en un extremo)
Cambiar orden:
- order-<<n° orden>> Ejemplo: order-1. Se puede añadir el ámbito en el que se aplica (order-md-3)
- order-first order-last
Mover elementos horizontalmente:
- offset-<<n° columnas>> Permite indicar el ámbito: offset-md-2
Posición absoluta, relativa,...
- position-absolute
- position-relative
- position-static
- position-fix
- position-sticky
Posición fija inferior
- fixed-bottom

7. Tamaño, márgenes, rellenos

Ancho: w
- w-25 (25% de ancho respecto al padre)
- w-100
- No funciona con cualquier valor
margen m, padding p
- t superior, l izquierda, r derecha, b inferior, x izquierda y derecha, y superior e inferior
- 0-5 indica el tamaño del margen o padding
- m-auto: margen automático (centra).
- Ejemplo: ml-1

8. Colores

Fondo:
- bg-primary
- bg-success
- bg-danger
- bg-warning
- bg-info

9. Texto

text-center
text-justify
text-truncate (añade puntos suspensivos a la parte de texto que no se muestra)
text-<<color>>
font-weight-light
font-italic
text-muted (tono gris para p.e. <small>)

10. Tablas

table (base para definir tablas)
table-responsive-<<sm,md,lg,xl>> (se coloca en un div que contiene a la tabla, permite hacerla adaptable)
Propiedad scope=col (se aplica en una celda que sea la referencia de la columna)
Propiedad scope=row (se aplica en una celda que sea la referencia de la fila)
table-dark
thead-light thead-dark (se aplica en <thead>)
table-striped (fondo de filas alterno)
table-bordered
table-hover
table-sm (tabla más pequeña)
Fondo para filas o celdas:
- table-active
- table-primary
- table-secondary
- table-success
- table-danger
- table-warning
- table-info
- table-light
- table-dark
<caption> (ayuda a los lectores de pantalla a identificar la tabla)

11. Imágenes

img-thumbnail (añade un borde a la imagen)
img-fluid
rounded (redondea bordes)
float- (left,right)

12. Listas

list- (unstyled, inline, inline-item, group)

13. Menús de navegación

Necesita de enlazar a los scripts de Javascript.

Dropdowns (enlaces desplegables):

<div id="dropdown">
<button class="btn btn-primary dropdown-toggle" id="btnmenu" data-toggle="dropdown">Grupo</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item</a>
</div>
</div>

Menús:

14. Botones

Clase principal: <button type="button" class="btn">
Clases secundarias:
- btn-primary
- btn-secundary
- ...
btn-outline-primary (fondo blanco, colorea el borde)

15. Badges

Son pequeños recuadros o placas que pueden servir para indicar un número relacionado con una etiqueta anterior (número de mensajes de una categoría), o para una etiqueta de “Nuevo”.
```
<span class="badge">45</span>
```
badge-info, ...

16. Formularios

Formularios en horizontal: form-inline
Componentes del formulario: form-control

17. Resúmenes de noticias o artículos

media en el elemento que engloba, dentro imagen (usar márgenes y alineación) y media-body para el texto
Se puede usar en listas (<ul class="list-unstyled">, <li class="media">)

18. Etiqueta “figure”

figure, figure-img, figure-caption

19. Lectores de pantalla

Ayudan a personas con discapacidad visual a entender el contenido de la página
Clase sr-only permite aplicar un texto explicativo que no se verá en pantalla.
Etiquetas aria también ayudan a definir contenido.

20. Alertas

alert
Propiedad role=alert
alert-primary
alert-secondary
alert-success
alert-danger
alert-warning
alert-info
alert-light
alert-dark
alert-link (para que el color de los enlaces coincida)

21. Otras clases

Añadir flexbox: d-flex
Añadir display box: d-box
display-<<1-4>> (otra forma de crear cabeceras)
lead (para que destaque un párrafo)
blockquote blockquote-footer
card
- card-header
- card-body
  - card-title, card-text
- card-footer