La wiki de TempWin

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
====== Bootstrap ======

Framework CSS.

  * [[https://getbootstrap.com/|Web oficial]]

===== Instalación =====

Descarga: https://getbootstrap.com/docs/4.5/getting-started/download/

  * **Compiled CSS and JS**: Bootstrap listo para usar
  * **Source files**: ficheros para el desarrollo de Boostrap (requiere usar compiladores SASS)

Lo normal es descargar la versión compilada. Contiene las carpetas ''css'' y ''js''.

Boostrap también necesita jQuery y Popper:

  * [[https://jquery.com/|jQuery]]
  * [[https://popper.js.org/|Popper.js]]

Plantilla con los archivos de Bootstrap alojados en un CDN:

<code html>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html>
</code>

<WRAP center round important 60%>
Si no se incluye la etiqueta ''meta'' con el atribute ''name'' con valor **viewport**, la web no se adaptará correctamente en dispositivos móviles.
</WRAP>

===== Conceptos =====

==== Grid ====

Bootstrap se base en un concepto de grid (rejilla) de 12 columnas de forma que podemos definir el tamaño de cada caja, por ejemplo, una caja ocupa 12 columnas (el total del ancho) o 6 (la mitad)


Las filas (rows) son grupos horizontales de columnas (columnms).

Las columnas deben ir directamente dentro de las filas:

<code html>
<div class="row">
    <div class="col">
        <h1>Título</h1>
        <p>Contenido</p>
    </div>
</div>
</code>

Para poder usar filas y columnas, deben ir dentro de un contenedor que puede ser con un máximo establecido (''container'') o fluido (''container-fluid''):

<code html>
<div class="container">
    <div class="row">
        <div class="col">
           CONTENIDO
        </div>
    </div>
</div>
</code>

==== Filas ====

Para que eliminar los padding que pone bootstrap a las columnas:

<code html>
<div class="row no-gutters">

</div>
</code>

==== Columnas ====

Los puntos de ruptura según las columnas:

  * ''col'': menos de 544px (smartphones)
  * ''col-sm'': Entre 544px y 768px
  * ''col-md'': entre 768 y 992px (tablets)
  * ''col-lg'': entre 992px y 1200px (ordenadores)
  * ''col-xl'': más de 1200px (ordenadores)

Si uso ''col-12'' estamos indicando que para tamaños de pantalla menores a 544px, lo que contenga esa elemento, ocupará 12 columnas en el grid de Bootstrap. Podemos combinar y hacer cosas como:

<code html>
<div class="col-12 col-md-6">
    CONTENIDO
</div>
</code>

Cuando estamos visualizando en pantallas superiores a 768, el contenido ocupará 6 columnas.

Con ''col-auto'' indicamos que el contenido de esa columna coja el espacio necesario según el contenido.

<WRAP center round tip 60%>
La clase ''col'' indica que la columna cogerá todo el ancho que esté disponible.
</WRAP>


=== Separadores ===

Si queremos romper ciertas columnas para que continúen debajo (sin meter filas), podemos usar:

<code html>
<div class="col">
    CONTENIDO
</div>
<div class="w-100"></div>
<div class="col">
    CONTENIDO
</div>
</code>

El ''div'' con la clase ''w-100'' añade un div con una anchura del 100 %

=== Alineación vertical ===

Utilizando Flexbox.

<code html>
<div class="container">
    <div class="row align-items-center">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
</div>
</code>

Si queremos una alineación independiente:

<code html>
<div class="container">
    <div class="row">
        <div class="col align-self-start"></div>
        <div class="col align-self-center"></div>
        <div class="col align-self-end"></div>
    </div>
</div>
</code>

=== Alineación horizontal ===

<code html>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-4"></div>
        <div class="col-4"></div>
    </div>
</div>
</code>

Otras clases:

  * ''justify-content-around''
  * ''justify-content-between''
  * ''justify-content-start''
  * ''justify-content-end''

=== Offset ===

<code html>
<div class="container">
    <div class="row">
        <div class="col-auto offset-4"></div>
    </div>
</div>
</code>

La clase ''offset-4'' añade un espacio de 4 columnas. No se pueden añadir espaciados después de las columnas, 
**solo antes**.

Podemos usar las clases ''offset'' para centrar horizontalmente:

<code html>
<div class="container">
    <div class="row">
        <div class="col-4 offset-4"></div>
    </div>
</div>
</code>

Como el elemento ya ocupa 4 columnas (''col-4''), nos quedan libres 8. Si queremos centrar, sería la mitad de 8, es decir, necesitaríamos un ''offset-4''.

<WRAP center round important 60%>
Desde que Bootstrap usa Flexbox, es más recomendable usar la clase ''justify-content-center'' en las filas que utilizar ''offset''.
</WRAP>

Las clases ''offset'' también admiten el selector de tamaño:

  * ''offset-sm-*''
  * ''offset-md-*''
  * ''offset-lg-*''
  * ''offset-xl-*''

=== Reordenamiento ===

<code html>
<div class="container">
    <div class="row">
        <div class="col-2">Columna 1</div>
        <div class="col-2">Columna 2</div>
        <div class="col-2">Columna 3</div>
        <div class="col-2">Columna 4</div>                
    </div>
</div>
</code>

Si queremos que una columna ocupe una posición que no sea la predeterminada, utilizaremos las clases ''order-*'' (del 1 al 12):

<code html>
<div class="container">
    <div class="row">
        <div class="col-2 order-2">Columna 1</div>
        <div class="col-2 order-1">Columna 2</div>
        <div class="col-2 order-4">Columna 3</div>
        <div class="col-2 order-3">Columna 4</div>                
    </div>
</div>
</code>

De esta manera, el orden será Columna 2, Columna 1, Columna 4 y Columna 3.

También podemos usar estas clases para que el orden solo se cambie en ciertos tamaños de pantalla:

<code html>
<div class="container">
    <div class="row">
        <div class="col-2 order-2 order-md-1">Columna 1</div>
        <div class="col-2 order-1 order-md-2">Columna 2</div>
        <div class="col-2 order-4 order-md-3">Columna 3</div>
        <div class="col-2 order-3 order-md-4">Columna 4</div>                
    </div>
</div>
</code>

En ese ejemplo, a partir de tamaños medianos, volverá a recuperar el orden original.

=== Columnas anidadas ===

<code html>
<div class="container">
    <div class="row">
        <div class="col-md-6">
            Columna 1
            <div class="row">
                <div class="col">Columna 11</div>
                <div class="col">Columna 12</div>
            </div>
        </div>
        <div class="col-md-6">
            Columna 2
            <div class="row">
                <div class="col">Columna 21</div>
                <div class="col">Columna 22</div>
            </div>
        </div>
    </div>
</div>
</code>

===== Elementos =====

==== Márgenes ====



==== Utilidades diseño adaptable ====

<code html>
    <div class="container">
        <div clasS="row">
            <div class="col d-block d-sm-none">
                XS - Extra small
            </div>
            <div class="col d-none d-sm-block d-md-none">
                SM - Small
            </div>            
            <div class="col d-none d-md-block d-lg-none">
                MD - Medium
            </div>            
            <div class="col d-none d-lg-block d-xl-none">
                LG - Large
            </div>            
            <div class="col d-none d-xl-block">
                XL - Extra Large
            </div>            
        </div>
    </div>
</code>

  * ''d-block'': mostrar en tamaños extra pequeños.
  * ''d-sm-none'': no muestra un elemento en tamaños pequeños.

==== Tipografía ====

  * ''text-muted'': texto el color gris.
  * ''h1'' - ''h6'': simula tamaños de encabezados.
  * ''display-1'' - ''display-4'': encabezados de mayor tamaño y trazos más finos.
  * ''lead'': para resaltar algún texto (aumenta un poco el tamaño y cambia la tipografía)
  * ''text-justify'': justifica el texto
  * ''text-center'': centra el texto.
  * ''text-right'': alinear texto a la derecha.
  * ''text-left'': alinear texto a la izquierda.
  * ''text-lowercase'': pasa todo a minúsculas
  * ''text-uppercase'': pasa a mayúsculas
  * ''text-capitalize'': la primera letra de cada palabra en mayúscula.
  * ''font-weight-bold'': negrita.
  * ''font-weight-italic'': cursiva.
  * ''font-weight-normal'': normal.
  * ''blockquote'': citas.
  * ''blockquote-footer''

Las clases de alineación también permiten los tamaños de pantalla:

<code html>
<p class="text-left text-sm-right">Alineado a la derecha en dispositivo pequeños en adelante</p>
</code>

<code html>
<p class="text">Este texto es más importante que los demás</p>

<h1 class="display-1">Encabezado llamativo</h1>

<h2 class="h1">Encabezado de nivel 2 con aspecto de h1</h2>

<blockquote class="blockquote blockquote-reverse">
    <p>Una cita de alquien famoso</p>
    <footer class="blockquote-footer">Alguien famoso</footer>
</blockquote>
</code>

Bootstrap también tiene estilos para las etiquetas:

  * ''mark''
  * ''del''
  * ''ins''
  * ''s'': tachar texto.
  * ''u'': subrayar texto.
  * ''strong'': resalta con negrita.
  * ''em'': realiza una cursiva/itálica.
  * ''small''
  * ''code''
  * ''kbd''

==== Imágenes ====

Clases útiles para usar en las etiquetas ''img''.

  * ''img-fluid'': la imagen se adapta al elemento que la contiene
  * ''float-left'':
  * ''float-right'':
  * ''rounded'': esquinas redondeadas
  * ''img-thumbnail'': esquinas redondeadas y borde con relleno.


<code html5>
<div class="container">
    <div class="row">
        <div class="col">
            <figure class="figure">
                <img class="img-fluid rounded" src="https://lorempixel.com/400/400" alt="">
                <figcaption class="figure-caption">
                    <p class="text-center">Lorem ipsum</p>
                </figcaption>
            </figure>
        </div>
    </div>
</div>
</code>

==== Tablas ====

Estilos para el elemento ''table'':

   * ''table-dark'': invierte colores (fondo negro y texto blanco)
   * ''table-striped'': alterna color de fondo de filas
   * ''table-bordered'': añade bordes
   * ''table-hover'': se muestra en otro color de fondo la fila que toca el puntero del ratón.
   * ''table-sm'': reduce los rellenos de las celdas para hacer la tabla más pequeña.
   * ''table-responsive-*'': indicamos en qué tamaño de pantalla no queremos que la tabla ocupe el 100 % (sm, md, lg y xl).

Estilos para los elementos ''tr'' y ''table'':

  * ''table-success'': color de fondo verde
  * ''table-danger'': color de fondo rojo
  * ''table-info'': 
  * ''table-warning'':
  * ''table-active''.

<WRAP center round tip 60%>
También podemos utilizar las clases generales para fondos ''bg-primary'', ''bg-secondary'', etc.
</WRAP>


<code html5>
<div class="container">
    <div class="row">
        <div class="col">
            <table class="table">
                <thead>
                    <tr>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>                        
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>                                            
                </tbody>
            </table>
        </div>
    </div>
</div>
</code>

==== Media object ====

Útil para construir componentes repetitivos como comentarios de un blog, tweets, etc

<code html5>
<div class="container">
    <div class="row">
        <div class="col">
            <div class="media">
                <img src="" class="d-flex align-self-start mr-3">
                <div class="media-body">
                    <h4>Encabezado</h4>
                    <p>Aquí va un texto</p>
                    
                    <hr>
                    
                    <div class="media">
                        <img src="" class="d-flex align-self-start mr-3">
                        <div class="media-body">
                            <h4>Comentario</h4>
                            <p>Aquí va un texto</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</code>

==== Alertas ====

Clases para hacer cajas que resaltan:

  * ''alert-info''
  * ''alert-danger''
  * ''alert-success''
  * ''alert-primary''
  * ''alert-secondary''
  * ''alert-light''
  * ''alert-dark''
  * ''alert-link'': para que los enlaces que están dentro de un elemento ''alert'' se muestren con un formato adecuado.

<code html5>
<div class="container">
    <div class="row">
        <div class="col">
            <div class="alert alert-success mt-3">
                <strong>Aviso</strong> Esto es un <a href="#" class="alert-link">mensaje</a> que resalta.
            </div>        
        </div>
    </div>
</div>
</code>

Si queremos añadir un botón para poder cerrar la alerta:

<code html5>
...
       <div class="alert alert-success mt-3" id="alerta">
           <strong>Aviso</strong> Esto es un <a href="#" class="alert-link">mensaje</a> que resalta.
           <button type="button" class="close" data-dismiss="alert" aria-label="Cerrar">
               <span aria-hidden="true">&times;</span>
           </button>
       </div>        
</code>

Bootstrap nos obliga a usar los atributos ''data-dismiss'' y ''aria-label''

<WRAP center round important 60%>
Para poder cerrar las alertas, es necesario que esté incluido jQuery.
</WRAP>

==== Insignias (badges) ====

<code html5>
<div class="container">
    <div class="row">
        <div class="col">
            <h1>Encabezado 1 <span class="badge badge-secondary">Etiqueta</span></h1>
        </div>
    </div>
</div>
</code>

Para redondearlas, añadimos la clase ''badge-pill''

Clases de badges:

  * ''badge-primary''
  * ''badge-secondary''
  * ''badge-success''
  * ''badge-danger''
  * ''badge-warning''
  * ''badge-info''
  * ''badge-light''

==== Botones ====

<code html5>
...
<button type="button" class="btn btn-primary">Primario</button>
</code>

Posibles clases:

  * ''btn-primary''
  * ''btn-secondary''
  * ''btn-success''
  * ''btn-danger''
  * ''btn-info''
  * ''btn-warning''
  * ''btn-link''
  * ''btn-dark''
  * ''btn-light''

Si queremos que los botones no tengan color de fondo, pero sí cuando pasamos el ratón por encima:

  * ''btn-outline-primary''
  * ''btn-outline-secondary''
  * ''btn-outline-success''
  * ''btn-outline-danger''
  * ''btn-outline-info''
  * ''btn-outline-warning''
  * ''btn-outline-link''

Para cambiar el tamaño de los botones:

  * ''btn-lg''
  * ''btn-sm''

<code html5>
...
<button type="button" class="btn btn-primary btn-lg">Primario</button>
</code>

Si queremos que un botón ocupe todo el ancho, es decir, que un butón se comporte como un elemento de bloque:

<code html5>
...
<button type="button" class="btn btn-primary btn-block">Primario</button>
</code>

Para deshabilitar botones:

<code html5>
...
<button type="button" class="btn btn-primary btn-lg" disabled>Primario</button>
</code>

Bootstrap apaga el color de los botones y añade un icono de "prohibido" al pasar el ratón sobre él.

Si queremos que un **checkbox** tenga la apariencia de un botón:

<code html5>
...
<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="checkbox" name="" id="" autocomplete="off">Checkbox 1
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="" id="" autocomplete="off">Checkbox 2
    </label>
</div>
</code>

Para hacer lo mismo pero con **radio buttons**:

<code html5>
...
<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="sexo" id="hombre" autocomplete="off">Hombre
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="sexo" id="mujer" autocomplete="off">Mujer
    </label>
</div>
</code>

==== Cards ====

  * ''card''
    * ''card-header''
    * ''card-body''
      * ''card-title''
      * ''card-subtitle''
      * ''card-text''
      * ''card-link''
    * ''card-footer''
    * ''card-img-top''
    * ''card-img-bottom''

<code html5>
<div class="container">
    <div class="row">
        <div class="col">
            <div class="card">
                <img src="" class="card-img-top img-fluid" alt="">
                <div class="card-body">
                    <h3 class="card-title">Título</h3>
                    <p class="card-text">Lorep ipsum</p>
                    <a href="#" class="btn btn-primary btn-lg btn-block">Link</a>
                </div>
            </div>
        </div>
    </div>
</div>
</code>

Si queremos agrupar cartas tenemos que encerrarlas en un contenedor con la clase ''card-group'':

<code html5>
<div class="container">
    <div class="row">
        <div class="col">
            <div class="card-group">
                <div class="card">
                </div>
                <div class="card">
                </div>
                <div class="card">
                </div>                        
            </div>
        </div>
    </div>
</div>
</code>

<WRAP center round tip 60%>
Si utilizamos la clase ''card-footer'', lo que añadamos ahí siempre va a estar a la misma altura en todas las tarjetas, independientemente de lo que ocupe lo que esté en ''card-body''
</WRAP>

Para el color de fondo de las tarjetas:

  * ''bg-primary''
  * ''bg-secondary''
  * etc

==== Collapse ====

Mostrar u ocultar elementos al pulsar sobre un botón/enlace.

<WRAP center round important 60%>
Es necesario tener incluidos en nuestro proyecto jQuery, Popper.js y el JavaScript de Bootstrap
</WRAP>

<code html5>
<div class="container">
    <div class="row">
        <div class="col-6">
            <a href="#bloque-1" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="bloque-1" class="btn btn-primary">Bloque 1</a>
            
            <div id="bloque-1" class="collapse">
                <div class="card card-body">
                    <h2>Encabezado</h2>
                    <p>Texto, texto</p>
                </div>
            </div>
        </div>
    </div>
</div>
</code>

El enlace está asociado al bloque donde queremos usar la característica **collapse**. La clase ''collapse'' nos oculta el bloque por defecto.

El elemento que queremos mostrar y ocultar, debe estar identificado con el atributo ''id'' para relacionarlo con un enlace o botón.

==== Acordeón ====

Similar a collapse.

<code html5>
<div class="container">
    <div class="row">
        <div class="col">
            <div id="acordeon">
                <div class="card">
                    <div class="card-header" id="cabecera-1">
                        <h5>
                            <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-1" aria-expanded="true" aria-controls="collapse-1">Contenido 1</button>
                        </h5>
                    </div>
                    <div id="collapse-1" class="collapse show" arial-labelledby="cabecera-1" data-parent="acordeon">
                        <div class="card-body">
                            Contenido
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header" id="cabecera-2">
                        <h5>
                            <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-2" aria-expanded="true" aria-controls="collapse-2">Contenido 1</button>
                        </h5>
                    </div>
                    <div id="collapse-2" class="collapse show" arial-labelledby="cabecera-2" data-parent="acordeon">
                        <div class="card-body">
                            Contenido
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</code>

==== Dropdown ====

Crea botones con un menú desplegable al pulsar sobre él.

<WRAP center round important 60%>
Es necesario tener incluidos en nuestro proyecto jQuery, Popper.js y el JavaScript de Bootstrap
</WRAP>

<code html5>
...
<div class="row">
    <div class="col">
        <div class="btn-group mr-2 mb-2">
            <button class="btn btn-primary dropdown-toggle" id="dp-categorias" data-toggle="dropdown">
                Categorías
            </button>
            <!-- Enlaces: -->
            <div class="dropdown-menu" arial-labelledby="dp-categorias">
                <h6 class="dropdown-header">Categorías</h6>
                <a href="#" class="dropdown-item">HTML</a>
                <a href="#" class="dropdown-item">CSS</a>
                <a href="#" class="dropdown-item">JS</a>      
                <!-- Divisor -->
                <div class="dropdown-divider"></div>                          
            </div>
        </div>
    </div>
</div>
</code>

Si queremos que el menú se despligue en un botón aparte, el del icono:

<code html5>
...
<div class="row">
    <div class="col-6">
        <div class="btn-group mr-2 mb-2">
            <button class="btn btn-primary">
                Categorías
            </button>
            <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" id="dp-categorias" data-toggle="dropdown">
                <span class="sr-only">Menú</span>
            </button>
            <!-- Enlaces: -->
            <div class="dropdown-menu" arial-labelledby="dp-categorias">
                <h6 class="dropdown-header">Categorías</h6>
                <a href="#" class="dropdown-item">HTML</a>
                <a href="#" class="dropdown-item">CSS</a>
                <a href="#" class="dropdown-item">JS</a>      
                <!-- Divisor -->
                <div class="dropdown-divider"></div>                          
            </div>
        </div>
    </div>
</div>
</code>

==== Formularios ====

<code html5>
...
<div class="row">
    <div class="col">
        <form action="">
            <div class="form-group"> <!-- obligatorio para Bootstrap -->
                <label for="nombre">Nombre</label>
                <input type="text" class="form-control" placeholder="Nombre" name="nombre" id="nombre">
            </div>
            <div class="form-group"> <!-- obligatorio para Bootstrap -->
                <label for="pass">Nombre</label>
                <input type="password" class="form-control" placeholder="Contraseña" name="pass" id="pass">
            </div>
            <div class="form-group"> <!-- obligatorio para Bootstrap -->
                <label for="mensaje">Nombre</label>
                <textarea class="form-control" name="mensaje" id="mensaje">
            </div>
            
            <div class="form-group"> <!-- obligatorio para Bootstrap -->
                <label for="pais">País</label>
                <select class="form-control" name="pais" id="pais">
                    <option value="espana">España</option>
                    <option value="alemania">Alemania</option>                    
                </select>
            </div>
            
            <div class="form-check"> <!-- Ojo, que esto cambia -->
                <label class="form-check-label">
                    <input type="radio" name="sexo" id="hombre" class="form-check-input mr-2">Hombre
                </label>
            </div>
            <div class="form-check"> <!-- Ojo, que esto cambia -->            
                <label class="form-check-label">
                    <input type="radio" name="sexo" id="mujer" class="form-check-input mr-2">Mujer
                </label>
            </div>
            
            <div class="form-check">
                <label class="form-check-label">
                    <input type="checkbox" name="terminos" id="terminos" class="form-check-input mr-2">Acepto términos y condiciones
                </label>
            </div>
        </form>        
    </div>
</div>
</code>

La clase ''form-control'' hace que el elemento ocupe el 100 % del ancho disponible, además de algún otro estilo.

Para los formularios en línea, es decir, en **formato horizontal**:

<code html5>
...
<div class="row">
    <div class="col">
        <form action="" class="form-inline">
            <input type="text" class="form-control" placeholder="Nombre" name="nombre" id="nombre">
            <input type="password" class="form-control" placeholder="Contraseña" name="pass" id="pass">
            <div class="form-check mr-3">
                <input type="checkbox" name="recordar" id="recordar" class="form-check-input">
                <label for="recordar" class="form-check-label">Recordar sesión</label>
            </div>
            
            <input type="submit" class="btn btn-primary" value="Iniciar sesión">
        </form>        
    </div>
</div>
</code>

Lo importante es la clase ''form-inline'' en la etiqeuta ''form''

Utilizando **grid** en los formularios:

<code html5>
...
<div class="row">
    <div class="col">
        <form action="">
            <div class="form-group row"> <!-- Transformamos en filas -->
                <div class="col-12 col-md-6 mb-3">
                    <label for="nombre">Nombre</label>
                    <input type="text" class="form-control" placeholder="Nombre" name="nombre" id="nombre">
                </div>
                <div class="col-12 col-md-6 mb-3">            
                    <label for="pass">Nombre</label>
                    <input type="password" class="form-control" placeholder="Contraseña" name="pass" id="pass">
                </div>
            </div>
            <div class="form-group row">
                <div class="col-12 col-md-6>            
                    <label for="mensaje">Nombre</label>
                    <textarea class="form-control" name="mensaje" id="mensaje">
                </div>
                
                <div class="col-12 col-md-3">
                    <div class="form-check">
                        <label class="form-check-label">
                            <input type="radio" name="sexo" id="hombre" class="form-check-input mr-2">Hombre
                        </label>
                    </div>
                    <div class="form-check"> <!-- Ojo, que esto cambia -->            
                        <label class="form-check-label">
                            <input type="radio" name="sexo" id="mujer" class="form-check-input mr-2">Mujer
                        </label>
                    </div>
                </div>
                <div class="col-12 col-md-3">                
                    <label for="pais">País</label>
                    <select class="form-control" name="pais" id="pais">
                        <option value="espana">España</option>
                        <option value="alemania">Alemania</option>                    
                    </select>
                </div>                
            </div>
            
            <div class="form-group row">
                <div class="col-12 text-center">
                    <label class="form-check-label">
                        <input type="checkbox" name="terminos" id="terminos" class="form-check-input mr-2 mb-3">Acepto términos y condiciones
                    </label>
                    <div class="row justify-content-center">
                        <div class="col-12 col-sm-9 col-md-4">
                            <button class="btn btn-primary btn-block" type="submit">Enviar</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>        
    </div>
</div>
</code>

Para añadir algún comentario sobre los inputs, podemos usar las clases ''form-text'' o ''text-muted'':

<code html5>
...
<div class="row">
    <div class="col">
        <form action="">
            <div class="form-group">
                <input type="password" class="form-control" name="pass" id="pass" placeholder="Contraseña">
                <p class="fomt-text text-muted">Debe tener entre 6 y 8 caracteres alfanuméricos</p>
            </div>
        </form>
    </div>
</div>
</code>

==== Ventanas modales ====

<WRAP center round important 60%>
Necesario haber agregado jQuery
</WRAP>

<code html5>
...
<div class="row">
    <div class="col">
        <!-- Botón que llamará al modal -->
        <button class="btn btn-primary" data-toggle="modal" data-target="#ventana-modal">Abrir modal</button>
           
        <!-- Ventana modal: -->
        <div class="modal fade" id="ventana-modal" tabindex="-1" role="dialog" arial-labelledby="ventana-modal" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- Título de la ventana -->
                    <div class="modal-header">
                        <h5 class="modal-title" id="">Título de la ventana</h5>
                        <!-- Botón de cerrar -->
                        <button class="close" data-dismiss="modal" aria-label="Cerrar">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <!-- Cuerpo de la ventana -->
                    <div class="modal-body">
                        <h2>Hola, mundo</h2>
                        <p>Texto</p>
                    </div>
                </div>
            </div>          
        </div>
    </div>
</div>
</code>

Si queremos una ventana modal más graden, a la clase ''modal-dialog'' le añadimos la clase ''modal-lg''. Si lo queremos más pequeño, entonces ''modal-sm''.

Si queremos trabajar con grid dentro de las ventanas modales, añadiríamos un ''div'' con la clase ''container-fluid'' dentro del ''modal-body''. Luego será cuestión de añadir filas y columnas.

==== Navs ====

Para crear paneles de navegación

Si partimos de:

<code html5>
    <div class="container">
      <div class="row">
        <div class="col">
          <h2>Menú</h2>
          <hr>
          <ul>
            <li><a href="#">Uno</a></li>
            <li><a href="#">Dos</a></li>
          </ul>
        </div>
      </div>
    </div>
</code>

Podemos obtener un **menú horizontal** con la clase ''nav'' y ''nav-item'' en los hijos:

<code html5>
...
          <ul class="nav bg-primary">
            <li class="nav-item"><a href="#" class="nav-link active">Uno</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Dos</a></li>
          </ul>
</code>

Podemos hacer lo mismo, pero utilizando la etiqueta ''nav'' y enlaces en lugar de elementos de una lista:

<code html5>
...
          <nav class="nav bg-dark">
            <a href="#" class="nav-link active">Uno</a>
            <a href="#" class="nav-link">Dos</a>
          </nav>
</code>

Para un **menú vertical**:

<code html5>
...
          <nav class="nav flex-column">
            <a href="#" class="nav-link active">Uno</a>
            <a href="#" class="nav-link">Dos</a>
          </nav>
</code>

==== Tabs ====

Similar a **navs**:

<code html5>
...
          <ul class="nav nav-tabs">
              <li class="nav-item"><a href="#" class="nav-link active">Uno</a></li>
              <li class="nav-item"><a href="#" class="nav-link">Dos</a></li>
              <li class="nav-item"><a href="#" class="nav-link disabled">Tres</a></li>
          </ul>
</code>

También se podría usar la clase ''nav-pills'' en lugar de ''nav-tabs''.

Si queremos que el menú ocupe el 100 % del ancho del menú de navegación, añadimos la clase ''nav-fill'':

<code html5>
...
          <ul class="nav nav-tabs nav-fill">
              <li class="nav-item"><a href="#" class="nav-link active">Uno</a></li>
              <li class="nav-item"><a href="#" class="nav-link">Dos</a></li>
              <li class="nav-item"><a href="#" class="nav-link disabled">Tres</a></li>
          </ul>
</code>

Si queremos que cada elemento tenga un desplegable (dropdown):

<code html5>
...
           <ul class="nav nav-tabs">
              <li class="nav-item dropdown">
                  <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Uno</a>
                  <div class="dropdown-menu">
                      <a href="#" class="dropdown-item">Categoría 1</a>
                      <a href="#" class="dropdown-item">Categoría 2</a>
                      <a href="#" class="dropdown-item">Categoría 3</a>
                  </div>
              </li>
              <li class="nav-item"><a href="#" class="nav-link">Dos</a></li>
              <li class="nav-item"><a href="#" class="nav-link disabled">Tres</a></li>
          </ul>
</code>

En lugar de desplegables, podemos utilizar **paneles**:

<code html5>
...
           <!-- Menú para llamar a los paneles -->
           <ul class="nav nav-tabs">
               <li class="nav-item">
                   <a href="#tab1" class="nav-link active" data-toggle="tab">Tab 1</a>
               </li>
               <li class="nav-item">
                   <a href="#tab2" class="nav-link" data-toggle="tab">Tab 2</a>
               </li>
           </ul>
           <!-- Paneles: -->
           <div class="tab-content">
               <div class="tab-pane active" id="tab1" role="tabpanel">
                   <h3>Panel 1</h3>
                   <p>Texto</p>
               </div>
               
               <div class="tab-pane" id="tab2" role="tabpanel">
                   <h3>Panel 2</h3>
                   <p>Texto</p>
               </div>
           </div>
</code>

==== Navbar ====

Creación de menús más completos que con los **Nav**.

<WRAP center round important 60%>
Necesario incluir jQuery, PopperJS y el JavaScript de Bootstrap
</WRAP>

<code html5>
<!-- Para que el menú ocupe el 100 %, no puede estar dentro de container -->
<!-- Con .navbar-expand-lg indicamos que se muestre el menú adaptable para tamaños menores a pantallas grandes --> 
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <div class="container">
              <a href="#" class="navbar-brand">Menú</a>
            
              <!-- Botón que aparecerá en pantallas pequeñas -->
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Menú de navegación">
                  <span class="navbar-toggler-icon"></span>
              </button>
              
              <!-- Elementos del menú -->
              <div class="collapse navbar-collapse" id="navbar">
                  <ul class="navbar-nav mr-auto">
                      <li class="nav-item">
                          <a href="#" class="nav-link">Inicio</a>
                      </li>
                      <li class="nav-item">
                          <a href="#" class="nav-link">Blog</a>
                      </li>
                  </ul>
              </div>
          </div>
      </nav>
</code>

Para añadir un desplegable en alguno de los elementos del Navbar:

<code html5>
...
                       <li class="nav-item dropdown">
                           <a href="#" class="nav-link dropdown-toggle" id="menu-categorias" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Blog</a>
                           
                           <!-- Desplegable -->
                           <div class="dropdown-menu" aria-labelledby="menu-categorias">
                               <a href="#" class="dropdown-item">HTML</a>
                               <a href="#" class="dropdown-item">CSS</a>
                           </div>
                       </li>

</code>

Si queremos añadir un formulario de búsqueda:

<code html5>
...                  
                  <ul class="navbar-nav mr-auto">
                  ...
                  </ul>
                  <form action="" class="form-inline my-2 my-lg-0">
                      <input type="text" class="form-control mr-sm-2" placeholder="Buscar" aria-label="Buscar">
                      <button class="btn btn-primary my-sm-0" type="submit">Buscar</button>
                  </form>
</code>

Para fijar el Navbar cuando nos desplazamos verticalmente, podemos usar las clases ''fixed-top'' y ''fixed-bottom'':

<code html5>
...
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
...
</code>

<WRAP center round tip 60%>
Si fijamos el navbar, se recomienda establecer un ''padding-top: 56px'' en la etiqueta ''body'' y así no se posicione por encima del contenido antes de desplazarnos verticalmente.
</WRAP>

Modificar colores de navbar:

  * ''navbar-light'' y luego combinar con ''bg-*''
  * ''navbar-dark'' y luego combinar con ''bg-%%**%%''

<code html5>
...
      <nav class="navbar navbar-expand-lg navbar-light bg-primary">
...      
</code>

==== Barras de progreso ====

<code html5>
<div class="container mt-5">
    <div class="row">
        <div class="col-6">
            <div class="progress mb-3" style="height: 25px;">
                <div class="progress-bar" role="progressbar" style="width: 10%;">10%</div>
            </div>
            
            <div class="progress mb-3" style="height: 15px;">
                <div class="progress-bar" role="progressbar" style="width: 10%;">10%</div>
            </div>
            
            <div class="progress mb-3" style="height: 35px;">
                <div class="progress-bar" role="progressbar" style="width: 10%;">10%</div>
            </div>
        </div>
    </div>
</div>
</code>

Por defecto, las barras de progreso tienen color azul. Para otros colores, a la clase ''progress-bar'' hay que añadirle:

  * ''bg-success''
  * ''bg-secondary''
  * ''bg-info''
  * ''bg-warning''
  * ''bg-danger''
  * ''bg-inverse''
  * ''bg-light''

==== Tooltips ====

Para mostrar mensajes cuando se pasa el ratón sobre cierto elemento.

<WRAP center round important 60%>
Necesario incluir jQuery, PopperJS y el JavaScript de Bootstrap
</WRAP>

<code html5>
<div class="container mt-5">
    <div class="row">
        <div class="col-6">
            <p>Este texto tiene un <a href="#" data-toggle="tooltip" data-placement="top" title="Texto a mostrar en el toolip">enlace</a></p>
            
            <button class="btn btn-primary data-toggle="tooltip" data-placement="left" title="Botón">Botón</button>
        </div>
    </div>
</div>

<!-- Lo siguiente va después de cargar jQuery, Popper y Bootstrap -->
<!-- Inicializamos el método tooltip -->
<script>
    $(function() {
        $('[data-toggle="tooltip"]').tooltip();
    })
</script>
</code>

==== Bordes ====

Eliminar bordes:

  * ''border-0''
  * ''border-top-0''
  * ''border-left-0''

Colorear bordes:

  * ''border-primary''
  * ''border-secondary''
  * ''border-success''
  * ...

Redondear bordes:

  * ''rounded''
  * ''rounded-top''
  * ''rounded-left''
  * ''rounded-circle''
  * ...

==== Colores ====

Para el texto:

  * ''text-primary''
  * ''text-secondary''
  * ''text-success''
  * ''text-danger''
  * ...

Para el fondo:

  * ''bg-primary''
  * ''bg-secondary''
  * ''bg-success''
  * ...

==== Posicionamiento ====

Para fijar un elemento en la parte superior:

<code html5>
<header>
    <nav class="nav bg-dark fixed-top">
        
    </nav>
</header>
<div class="container">
    <div class="row mt-3">
        <div class="col">
        </div>
    </div>
</div>
</code>

Para fijarlo en la parte de abajo se usa la clase ''fixed-bottom''.

<WRAP center round important 60%>
Cuando se fija un elemento, deja de ocupar un espacio y los elementos siguientes no lo tienen en cuenta por lo que empezarán a colocarse desde arriba del todo y quedarán por debajo del elemento fijado. Para solucionarlo, habría que añadir un ''padding-top'' a ''body'' con las altura del elemento posicionado.
</WRAP>


==== Tamaños ====

  * ''w-25'': anchura del 25 %
  * ''w-50'': anchura del 50 %
  * ''h-25'': altura del 25 %
  * ...

===== Ejemplos =====

<code html5>
...
<body>
    <div class="container">
        <header class="row">
            <div class="col">
                <h1>Cabecera</h1>
            </div>
        </header>
        <section class="contenedor-main row">
            <main class="col-md-8">
            </main>
            
            <aside class="col-md-4 align-self-center">
                <h3>Aside</h3>
            </aside>
        </section>    
        
        <section class="row widgets justify-content-between">
            <div class="col-md-3">
                <p>Lorem ipsum</p>
            </div>
            <div class="col-md-3">
                <p>Lorem ipsum</p>
            </div>
            <div class="col-md-3">
                <p>Lorem ipsum</p>
            </div>            
        </section>
        
        <footer class="row">
            <div class="col">
                <h4>Pie de página</h4>
            </div>
        </footer>
    </div>
</body>
</code>

===== Flexbox =====

Si no queremos trabajar con la grid de Bootstrap y queremos hacerlo con Flexbox:

''d-flex'' es lo mismo que haber escrito la propiedad ''display: flex''.

<code html5>
<div class="d-flex">
    CONTENIDO
</div>
</code>

Si no queremos que la caja ocupe el 100 %, podemos utilizar la clase ''d-inline-flex'':

<code html5>
<div class="d-inline-flex">
    CONTENIDO
</div>
</code>

==== Dirección ====

En cuanto a la dirección de los elementos que contenga:

<code html5>
<div class="d-flex flex-row">
    CONTENIDO
</div>
</code>

''flex-row'' es el valor por defecto.

Para cambiar la dirección a columnas:

<code html5>
<div class="d-flex flex-column">
    <div>Caja 1</div>
    <div>Caja 2</div>
    <div>Caja 3</div> 
</div>
</code>

Podemos definir la dirección según el tamaño del dispositivo:

  * ''flex-sm-row''
  * ''flex-sm-column''
  * ''flex-md-row''
  * ''flex-md-column''
==== Alineación de contenido ====

Para poder alinear los elementos hijo del contenedor Flexbox:

<code html5>
<div class="d-flex justify-content-center">
    <div>Caja 1</div>
    <div>Caja 2</div>
    <div>Caja 3</div>        
</div>
</code>

Los posibles valores:

  * ''justify-content-start''
  * ''justify-content-end''
  * ''justify-content-between''
  * ''justify-content-around''

 Podemos definir la alineación según el tamaño del dispositivo: 

  * ''justify-content-sm-start''
  * ''justify-content-sm-end''
  * ''justify-content-sm-center''
  * ''justify-content-md-start''
  * ''justify-content-md-end''
  * ''justify-content-md-center''

Para trabajar con los hijos (items):

==== Items ====

Si queremos centrar verticalmente los elementos hijo:

<code html5>
<div class="d-flex align-items-center">
    <div>Caja 1</div>
    <div>Caja 2</div>
    <div>Caja 3</div>        
</div>
</code>

Si los queremos poner al final del contenedor padre:

<code html5>
<div class="d-flex align-items-end">
    <div>Caja 1</div>
    <div>Caja 2</div>
    <div>Caja 3</div>        
</div>
</code>

Si queremos que las cajas ocupen todo el alto del contenedor padre:

<code html5>
<div class="d-flex align-items-stretch">
    <div>Caja 1</div>
    <div>Caja 2</div>
    <div>Caja 3</div>        
</div>
</code>

Si queremos que unos elementos estén alineados de una manera y uno de otra podemos usar los **auto márgenes**:

<code html5>
<div class="d-flex justify-content-start">
    <div>Caja 1</div>
    <div>Caja 2</div>
    <div class="ml-auto">Caja 3</div>        
</div>
</code>

Las dos primeras cajas se desplazarán al principio y la última a la derecha del todo

Para el **orden** de los items:

<code html5>
<div class="d-flex flex-nowrap">
    <div class="order-3">Caja 1</div>
    <div class="order-1">Caja 2</div>
    <div class="order-2">Caja 3</div>        
</div>
</code>

La caja 1 se pondrá en última posición, la 2 en primera y la 3 en el medio.

Podemos definir el orden según el tamaño del dispositivo: 

  * ''order-sm-1''
  * ''order-md-2''
  * ''order-lg-3''

===== Recursos =====

  * https://startbootstrap.com/snippets/sticky-footer-flexbox
  * [[https://getbootstrap.com/docs/3.3/javascript/#modals|Modals in Bootstrap 3.3]]
  * [[https://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal|Passing data to a bootstrap modal]]