You can find this webpage online HERE
Puedes encontrar esta página online AQUÍ

Maquetado

Contenedores

.container & .container-fluid

Es el elemento base de toda página estructurada con Bootstrap, este debe de estar el principio de nuestras páginas y determina el como vamos a ver nuestro contenido.

En el caso de container, nuestro contenido tendrá unos pequeños bordes tanto en la izquierda como en la derecha.

Por el otro lado, si usamos .container-fluid nuestro contenido ocupará el 100% de la pantalla

Ejemplos

Filas y columnas

Una vez ya hemos establecido el contenedor que contendrá a nuestra página web es la hora de planear la estructura que nuestra página va a tener.

Para eso dividiremos nuestra paginas en filas y columnas.

Filas -> .row

Este es el elemento base de nuestta matriz sobre la que trabajaremos, representa una fila desde el principio hasta el final de nuestro container. Más a delante veremos como podemos anidar estas.

Columnas -> .col

Una vez ya hemos creado una fila nuestra siguiente tarea será crear columnas dentro de la misma. Estas las ireamos modificando para poder adaptar nuestro contenido a los

Ejemplo 1 Ejemplo 2

12, el número mágico

Como hemos podido comprobar si creamos las columnas sin más por defecto ocuparán la misma cantidad de la pantalla todas y cada una de las columnas, podemos decír que eso es un modo automático.

En el caso de que queramos variar el tamaño de las columnas sería tan sencillo como poner un número del 1 al 12 al lado de nuestra etiqueta de columna, Teniendo en cuenta que 1 sería la unidad mínima y 12 sería e 100% de nuestra fila.

Por ejemplo:
col-3 la columna ocupa el 25% de la fila
col-6 la columna ocupa el 50% de la fila
col-9 la columna ocupa el 75% de la fila
col-12 la columna ocupa el 100% de la fila
col-auto la columna se adaptará al contenido

Si se supera el máximo de 12 por fila, la columna que sobresale saltará automaticamente a la siquiente fila

Ejemplos

Breakpoints

Aquí es donde nuestras páginas se vuelven responsivas, para ello, tendremos que hacer que nuestro contenido se estructurede una forma o de otra en un dispositivo o en otro. Esto es muy complicado debido a la inmensa variedad de dispositivos de los que disponemos, pero gracias a un estandar establecido por twitter podemos hacernos una idea de de como se van a ver nuestros dispositivos.

Estándares

Los dispositivos se agrupan en 5 grupos:

Esto se utiliza añadiendo los prefijos que podemos ver en la imagen. Lo que estos harán será establecer la medida para que el elemento seleccionado se comporte como nosotros queramos, ocupando en cada uno de las resocluones el tamaño determinado.

Ejemplos

Gutters

Se trata de una pequeña propiedad para saber si queremos que nuestras columnas tengan una pequeña separación con la fila al principio y al final de la misma

Ejemplos

Desplazamiento de columnas .offset

En ocasiones no quedamos contentos con la distribución de nuestras columnas y nos gustaría crear espacios entre las mismas, ahí es donde la clase .offset entra en juego.

Esta se comporta exactamente igual que una columna normal: tenemos que tener en cuenta en que breakpoint ponerla y que no sobrepase de 12 si no quremos que salte a la siguiente linea.

¿Como funciona?

Esto se puede interpresar de distintos modos ya que existen 2 modos principales:

Por un lado se pueden, como ya he dicho antes, hacer que se comporten como columnas totalmente indipendientes de las otras pero que no tengas un contenido y solo ofrezcan el espacio en blanco.

Por el otro lado, esta clase se puede usar como un complemento de otra para poder esplazar la columna que estemos indicando HACIA LA DERECHA tantas veces como indiquemos en la clase.

Esto también se puede combinar con los distintos breakpoints de la siquiente manera:
.offset-sm-1 .offset-md-2 .offset-lg-3

Ejemplos

Alineamiento de filas

En caso de que queramos seguir una estructura no tan marcado por cajas y nos huste que todo quede más organizado de una manera más establecido tanto horizontal como verticamente siempre podemos accedr a unas clases las cuales podemos usar en nuestras filas para distribuir el contenido.

Para organizar verticalmente tenemos .align-items
.align-items-start columnas en la parte superior.
.align-items-center columnas en el centro.
.align-items-end columnas en la parte inferior.

Para organizar horizontalmente tenemos .justify-content
.justify-content-start columnas a la izquierda.
.justify-content-center columnas en el centro.
.justify-content-end columnas a la derecha.
.justify-content-between columnas distribuidas.
.justify-content-around columnas en los extremos.

Esto también se puede combinar con los distintos breakpoints de la siquiente manera:
.align-items-md-start .align-items-lg-end
.justify-content-lg-end

Ejemplos

Ordenar columnas

También es posible cambiar el orden en el que se encuentran nuestras columnas a medida que vamos pasando por cada uno de los breakpoints.

Para ello utilizaremos las siguienres clases:
order-1, order-2, order-3 ... order-n

Esto ordenará las columnas en el caso de que tengan alguna de esas clases, si no es el caso, aparecerán en el orden establecido por el HTML antes de las que lo tienen.

Esto también se puede combinar con los distintos breakpoints de la siquiente manera:
.order-1 .order-sm-2 .order-md-3

Ejemplos

Margenes y paddings

si has estado cotilleando el código de esta aplicación te habrás dado cuenta de algunas clases que he ido utilizando como mt-2 o pb-5, pues bien eso son etiquetas las cuales nos facilitan muchísimo el poner paddings y margins a nuestras páginas web.

Para establecer márgenes a nuestros componentes tendremos que acceder a la clase .m y para los padding .p

Esta tendremos que convinarlo con la dirección en la cual queramos aplicarlos:
t (top) para aplicarlo en la parte superior.
r (right) para aplicarlo en la parte derecha.
b (bottom) para aplicarlo en la parte inferior.
l (left) para aplicarlo en la parte izquierda.
x (eje x) para aplicarlo en la parte superior e inferior.
y (eje y) para aplicarlo en la parte izquierda y derecha.
(Este paso se puede evitar si buscamos aplicar en todos lados)

Una vez hayamos seleccionado el lugar ahora tendremos que decidir cuanto queremos aplicar:
0 : No hay margen
1 : 0.25rem
2 : 0.50rem
3 : 1rem
4 : 1.25rem
5 : 3rem
auto : Automático

Un resultado de todo esto sería:
.mt-5 aplicado un margen de 3rem a la parte superior.
.px-2 aplicado un padding de 0.5rem a la parte izquierda y derecha.

Esto también se puede combinar con los distintos breakpoints de la siquiente manera:
.mt-1 .mt-sm-2 .pb-lg-5

Ejemplos

Anidar filas

Y todo esto nos lleva al momento al que por fin somos capaces de organizar nuestra propia página responsiva. Como ya te habrás imaginado dentro de las columnas se pueden añadir filas dentro de las cuales se pueden añadir más columnas y así continuamente.

De este modo podremos darle una estructura muy sólida a nuestros proyectos y representar basicamente cualquier forma que deseemos de cualquier página web.

Ejemplos

Personificación

Como hemos dicho en la presentación una de las desventajas de Bootstrap es que está tan extendido que todas las páginas que lo utilizan acaban pareciendose mucho entre ellas y la personificación se pierde un poco. Pero esto no tiene porque ser así.

Hay varias formas de modificar el código de bootstrap para nuestro beneficio e intentar dar un aspecto único a nuestra página pero eso incluiría el uso de CSS. El método que elijamos suele estar relacionado con la forma de instalación que hayamos elegido para nuestro proyecto.

Versión por enlaces:

En la versión en la que cogemos los archivos necesarios de la web directamente mediante enlaces en nuestro HTML(El método que hemos estado utilizando en esta guia) la única acción posible es la de crear por nosotros mismos un archivo CSS y crear estilos que afecten a clases que tienen el mismo nombre que las propias clases de bootstrap.

Para realizarlo de este modo tenemos que tener en cuenta que:
- Además de el CSS de bootstrap hay que añadir un enlace a nuestro propio CSS debajo del primero para que se apliquen la gerarquía de estilos.
- No tendremos toda la información del estilo - Cada vez que queramos sobreescribir alguno tendremos que poner !important al lado del estilo.

Vamos a probar a modificar las reglas css de este código:

<div class="container m-5 p-5 bg-primary">
    <p class="text-white">
        Test para el cambio
    </p>
</div>

El resultado visual sería el siquiente:

Ahora vamos a incluir nuestro documento CSS en este archivo:

Y por último modificaremos el estilo de la clase con el mismo nombre que CSS:

En mi caso voy a modificar las clases:
.bg-primary para hacer el fondo amarillo en lugar de azul.
.text-white para cambiar el color de blanco a negro (Sí, una clase con el nombre white que es negra, es para hacer un ejemplo, joer).
.p-5 para que esta aplique todavía más padding porque puede que necesite más.

Quedaría así:

.bg-primary { background-color: yellow !important; }

.text-white { color: black !important; }

.p-5 { padding: 100px !important; }

El resultado ahora con el mismo código sería el siguiente:

Se puede realizar cualquier cambio en cualquier clase. Algo a tener en consideración es que si intentas cambiar los componentes o añadir algo extra sería lo recomendable que descargases los ficheros de bootstrap y lo modificases desde ahí, para tener una visión más global de porque tiene la apariencia que tiene.

HTML CSS

Contenido

Tipografía

Empezamos bien...

Antes de nada me gustaría mencionar que el texto dentro de bootstrap NO es responsivo. Al cambiar de dispositivos no podemos hacer que sea más grande por ejemplo.

Pero por lo general esto último no es una gran necesidad en el mayor de los casos ya que de por si, los dispositivos lo hacen por nosotros, teniendo ellos una serie de fuentes predefinidas para mostrar en la web.

Cambios por defecto

Por defecto bootstrap utiliza una tipografía distinta a la de HTML en todos sus apartados títulos, parrafos... Y además incluye unos cuantos más.

Unos ejemplos, aparte del propio parrafo, serían:

H1 de Bootstrap

H2 de Bootstrap

H3 de Bootstrap

H4 de Bootstrap

H5 de Bootstrap
H6 de Bootstrap

Tipos de letra totalmente nuevos como display .display-n :

Display-1

Display-2

Display-3

Display-4

Clases de simulación

En bootstrap nos es posible hacer que absolutamente todos nuestros elementos de texto sean un parrafo y poder modifarlos desde las clases con otras herramientas como JavaScript.

Vamos ha hacer algo, intenta encontrar las diferencias entre los siguientes elementos.

Enunciado

Enunciado

El primero de ellos es un "h1" directamente mientras que el segundo es parrafo que contiene la clase "h1".

Texto y sus utilidades

Bootstrap también nos facilita el manejo del texto sobre la página, ya sea para ubicarlo en un lugar distinto y para mostrarlo de un modo diferente.

Alineamiento del texto

.text-left en la izquierda

.text-right en el centro

.text-right en la derecha

Anchura de la letra

.font-weight-bold para ponerlo en negrita
.font-weight-normal para ponerlo normal
.font-weight-lighter para ponerlo en fino
.font-italic para ponerlo en cursiva

Monospace

.text-monospace todos los caracteres ocupan lo mismo

Code

Bootrap ha sobrescrito el selector "code" para darle la siguiente apariencia
Tu código

Truncar texto

.text-truncate es muy util para que nuestros contenedores no se deformen adaptandose a un texto que tenga en su interior.

Description lists
A description list is perfect for defining terms.
Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Nesting
Nested definition list
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

Resetear formato

.text-reset Nos permite ignorar el formato por defecto y folver al del padre
Ejemplo sin .text-reset
Ejemlpo con .text-reset

.text-decoration-none para eliminar todo tipo de decoraciones extras del texto.
Ejemplo sin .text-reset
Ejemlpo con .text-reset

También se pueden combinar las 2 anteriores:
Ejemplo sin .text-reset
Ejemlpo con .text-reset

Color y sus utilidades

Color del texto y fondo

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

Estos colores están modificados por un documento CSS, para ver los originales recomiendo ir a la documentación.

Otros tipos de textos

Lead .lead

Una manera elegante de presentar nuestro texto

Blockquotes .blockquotes

Generalmente usado para citar algo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Suele ir acompañado del nombre del autor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Listas desestiladas .list-unstyled

Quita todo tipo de decoración de nuestras listas
Lista ordinaria
  • Elemento 1
  • Elemento 2
  • Elemento 3
  • Elemento 4
Lista con .list-unstyled
  • Elemento 1
  • Elemento 2
  • Elemento 3
  • Elemento 4

Listas enlineadas .list-inline

Convierten nuestras listas en una linea
.list-inline-item será necesario para nuestros elementos
Lista ordinaria
  • Elemento 1
  • Elemento 2
  • Elemento 3
  • Elemento 4
Lista con .list-inline
  • Elemento 1
  • Elemento 2
  • Elemento 3
  • Elemento 4
  • Elemento 5
  • Elemento 6
  • Elemento 7
  • Elemento 8
  • Elemento 9

Imágenes

Responsividad <img .img-fluid>

.img-fluid Nos permitirá hacer que nuestra imagen se adapte al 100% de su contenedor sin salirse, mantenga un buen aspecto y no se distorsione.

Ejemplo no responsivo

Podemos ver como la imagen mantiene el mismo tamaño todo el tiempo.

Ejemplo responsivo
En esta podemos ver que se va adaptando al tamaño de la columna
Otro Ejemplo

Figures <figure .figure>

Otra forma de estructurar nuestras imagénes es con el marcador "figure", el cual bootstrap sobreescribe para darle un aspecto diferente en la clase .figure

La diferencia con una imagen normal es que esta contará con un pequeño pié página para poder añadir algunos detalles de nuestra foto, ponerle un nombre o citar una fuente por ejemplo.

Tendremos que seguir la siguiente estructa en el arbol DOM:
<figure .figure>
-> <img .figure-img .img-fluid>
-> <figcaption .figure-caption> texto </figcaption>
</figure>

La imagen.
Un pié de foto desplazado.

Tablas

Responsividad

.table-responsive Es la clase a añadir para que nuestras tablas sean responsivas y podamos navegar por ellas en todo tipo de dispositivos.

Importante! Esta clase tendremos que añadirla a un elemento div que contenga a toda la tabla en si. De este modo haremos que sea este div el que se adapte a nuestra tabla resortandose para dejarnos movernos con barras de navegador normales.

Decoración

Las tablas en bootstrap cuentan con gran variedad de clases para poder crearlas a nuestro gusto. Usando estas las podemos modificar de muchas maneras y para cubrirlas correctamente nos referiremos a la documentación.

Las tablas en Bootstrap pueden:

Ejemplo

Componentes

¿Qué son?

Un componente es un elemento común en muchas páginas web, al punto de haberse normalizado y que se traten como estándares.

Estos elementos se pueden realizar a mano, pero al volverse tan generales muchos frameworks como Bootstrap nos permiten utilizar una serie de plantillas y estilos para poder partir desde ellos y crear nuestras propias variaciones de una manera mucho más sencilla.

Estos componentes pueden ser cosas que vemos a diario y que solo nos damos cuenta de su existencia cuando faltan. Un ejemplo de de estos sería una barra de navegación, una ventana modal, una alerta de aviso o incluso un botón.

Metodología

Ya que Bootstrap trata a casi todos los componentes por igual, en esta guía vamos a seguir en detalle a uno de ellos. En este caso será el componente:

Nav

Un elemento que estoy seguro de que todos hemos visto en más de una ocasión. Este es una pequeña barra de navegación que podemos poner en cualquier parte de nuestra web para mostrar distinta información.

Los usos de este componente pueden ser hasta donde la imaginación llegue, pero los casos de uso más habituales son los de navegar por una web utilizando enlaces a en el lugar de los elementos de la lista.

Arbol DOM

Los componentes en bootstrap tienen una estructura que se puede esquematizar facilmente gracias al Arbol DOM. Esto permite tenr una visión general del componente más global y ver como está estructurado y como puede variar el mismo.

Si seguimos con el ejemplo que estamos utilizando, el componente Nav, podemos ver que la estructura básica es muy sencilla, como la de la mayoría, pero siempre podemos ir haciéndola más compleja.

La estructura básica es:
DOM

Siendo:
.nav el elemento general del componente.
.nav-link un enlace que se coloca en el elemento nav.

<nav class="nav">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1">Link</a>
</nav>

Otra estructura posible es hacerlo como una lista:
DOM

Siendo:
.nav el elemento general del componente.
.nav-item un componente de la lista.
.nav-link un enlace que se coloca en el elemento nav.

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1">Disabled</a>
  </li>
</ul>

Pero en este caso trabajamos con elementos de lista normales de HTML.

Variaciones

Como ya he mencionado estos arboles se pueden complicar mucho más. Podriamos hacer que junto a un .nav-link al final del arbol apareciese un .dropdown o cualquier otro componente bootstrap con su propia estructura.

En este ejemplo este sería el resultado:

También podemos salirnos de lo que nos dice la documentación y poco siempre que tenga sentido modificando los selectores que vienen dentro. Por ejemplo, si la mayoría de elementos de la barra nav son enlaces a y nos apetece, por alguna razón, tener que clickar en una imagen para que nos aparezca nuestro dropdown podemos hacerlo.

O también podemos hacer algo como esto...

Este es el código de "eso":

<div class="row bg-lightDark rounded">
    <nav class="nav justify-content-center">
        <a class="nav-link" href="#maquetado">Maquetado</a>
        <img src="resources/img/titer logo.png" class="w-25 nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#tipografía">Tipografía</a>
                <a class="dropdown-item" href="#clasesdesimulación">Clases de simulación</a>
                <a class="dropdown-item" href="#variaciones">Pillais la idea</a>
            </div>
        </img> 
        <nav class="nav-link nav">
            <a class="nav-link" href="#">Nav dentro de Nav</a>
            <div class="nav-link dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     Un dropdown
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">Colocado en un nav</a>
                    <a class="dropdown-item" href="#">Dentro de un nav</a>
                     <div class="dropdown-item media">
                    <img src="..." class="mr-3" alt="...">
                    <div class="media-body">
                        <h5 class="mt-0">Objeto Media</h5>
                        Debajo de un "a" dentro de un <br>
                        "dropdown" dentro de un "nav" <br>
                        dentro de un "nav"
                        </div>
                    </div>
                 </div>
                </div>
            <a class="nav-link" href="#">Link</a>
        </nav>
    </nav>
</div>
                                

Ejemplos más normales de Nav

Métodos

Algunos de los componentes de Bootstrap más complejos tienen una serie de métodos los cuales podemos llamar desde Jquery para hacer que el componente realize una cierta acción, normalmente una que realizaría el usuario como abrir un desplegable, viajar a una pestaña de navegación...

Estos métodos (si el componente los tiene) siempre suelen estar al final de la página del mismo en la documentación.

Para nuestro ejemplo, el componente nav dispone del método .tab('show') el cual nos permite mostrar una ventana u otra dependiendo de la que especifiquemos.

Tab Home
Tab Profile
Tab Messages

En resumidas cuentas los métodos son órdenes que le podemos mandar al documento desde una fuente exerna al mismo para modificarlo.

Eventos

Por otro lado, si los métodos eran acciones que el usuario ordenaba al componente que hiciese los eventos son señales que los componentes de Bootstrap emiten para que podamos capturarlos y realizar acciones a partir de ellos. Por ejemplo cuando cambiamos de tab en un componente nav se genera un evento del tipo show.bs.tab.

$(componente).on("nombre del evento", function(){}) es como pondremos el componente a la escucha.

Para poder utilizar estos eventos necesitaremos poner un script de JQuery a la espera de que sucedan, hagamos lo mismo que con el ejemplo anterior.

En este caso estaremos escuchando el evento: hide.bs.tab que como su propio nombre indica, es un eventto lanzado por tab, de bootstrap al esconder.

Tab Home
Tab Profile
Tab Messages

En este caso hemos puesto ha la escucha a todo el componente, por lo tanto siempre que cambiemos a cualquier pestaña esta saltará, se puede especificar un poco más y poner una pestaña en especíicopara que solo salte en la deseada.

Trabajo realizado por: Sergio Moreno Antequera

Tendencias España

1 · Tendencia

#SuperHappyMonday

12,983 tweets

2 · Tendencia

#SergioAprueba

352 tweets

3 · Tendencia

#gaticos

95,829 tweets

4 · Tendencia

#BootstrapEsChachiguay

23 tweets

5 · Tendencia

Celiamaps > CeliaTour

45,230 tweets