7. 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/

7.1. Referencia al CSS

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

7.2. Referencia a los Javascript

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

7.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.

7.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

7.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.)

7.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.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

7.8. Colores

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

7.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>)

7.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)

7.11. Imágenes

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

7.12. Listas

  • list- (unstyledinlineinline-itemgroup)

7.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:

7.14. Botones

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

7.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, ...

7.16. Formularios

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

7.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">)

7.18. Etiqueta “figure”

  • figurefigure-imgfigure-caption

7.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.

7.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)

 

7.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-titlecard-text
    • card-footer

7.22. Ejemplos