Hello, world!

Nombre

</div>
            
            <div class="form-group"> 
                <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"> 
                <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">             
                <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"> 
                <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">             
                        <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">
        
        <button class="btn btn-primary" data-toggle="modal" data-target="#ventana-modal">Abrir modal</button>
           
        
        <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">
                    
                    <div class="modal-header">
                        <h5 class="modal-title" id="">Título de la ventana</h5>
                        
                        <button class="close" data-dismiss="modal" aria-label="Cerrar">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    
                    <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:

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

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

Para un **menú vertical**:

==== Tabs ====

Similar a **navs**:

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

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

 
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <div class="container">
              <a href="#" class="navbar-brand">Menú</a>
            
              
              <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>
              
              
              <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>

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

<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-%%**%%''

==== Barras de progreso ====

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>

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

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:

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:

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:

Si los queremos poner al final del contenedor padre:

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

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

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

Para el **orden** de los items:

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

Hello, world!

Título

Encabezado llamativo

Encabezado de nivel 2 con aspecto de h1

Encabezado

Comentario

Encabezado 1 Etiqueta

Título

Encabezado

Hello, world!

Título

Encabezado llamativo

Encabezado de nivel 2 con aspecto de h1

Encabezado

Comentario

Encabezado 1 Etiqueta

Título

Encabezado

Contenido 1

Contenido 1

Categorías

Categorías