Programador web | curso de bootstrap impartido por tuwebfreelance

¿A QUIEN VA ORIENTADO ESTE CURSO?

Este curso está orientado a usuarios ya hayan realizado la primera parte de este curso,
en caso contrario, es recomendable leer la primera parte.

Anteriormente, hemos visto en qué consiste Bootstrap y cómo puede beneficiarnos. En caso de no haber leído la primera parte, recomiendo que la leáis haciendo clic en este enlace.

Ya tenemos nuestro fichero descomprimido, así que vamos a entrar dentro de la carpeta “Docs”, dentro de la carpeta “4.0” y finalmente en la de “examples”.

Veréis que hay ejemplos de todo tipo, así que vamos a ir viendo todos aquellos que son básicos para entender Bootstrap. Empezaremos por la carpeta “grid” que contiene toda la estructura de columnas con la que Bootstrap se estructura.

ESTRUCTURA EN COLUMNAS

Para que nos entendamos, siempre trabajaremos con columnas, creando por ejemplo el siguiente código:

<div class="row">

   <div class="col-md-3"></div>

   <div class="col-md-3"></div>

   <div class="col-md-3"></div>

</div>

De esta manera lo que acabamos de indicarle a nuestro HTML es que cree un div con class “row” que contiene 3 otros divs con classe “col-md-3”, de tal manera que vamos a crear 3 columnas distintas, una por cada div.

La número que pongamos en la clase, “col-md-2” o bién “col-md-12” indicará el tamaño de la columnas, teniendo como mínimo 1 y cómo máximo 12. En caso de indicar 12, estaremos indicando que esa columna ocupa el 100%, mientras que si indicamos 2, significará que ese div ocupara el 20% teniendo un total de 4 columnas en caso de concatenarlas cómo máximo.

Por si no lo habéis entendido, vamos a poner otro ejemplo.

<div class="row">

   <div class="col-md-6"></div>

   <div class="col-md-6">

      <div class="col-md-3"></div>

      <div class="col-md-3"></div>

      <div class="col-md-3"></div>

      <div class="col-md-3"></div>

   </div>

</div>

De esta manera, tendriamos un div de classe “row”, que está dividido en 2 columnas, los divs con classe “col-md-6”, que ocupan un widht del 50% cada uno. En el segundo div con clase “col-md-6”, vemos que tenemos 4 divs con clase “col-md-3” consiguiendo así dividir esa columna en 4 columnas del 25% cada una.

No hace falta que siempre sean iguales las columnas, pero si que el total de números sume 12.

Una vez entendido esto, explicaros que igual que ahora ya conocemos la clase “col-md-numero”, las letras md indican middle, igual que podríamos usar “col-lg-numero” o bien “col-sm-numero”. Estas clases se pueden combinar y nos sirven para indicar que tamaño de columnas queremos para cada uno de los dispositivos.

MENÚ, COLUMNAS Y CABECERAS

Ahora que ya tenemos claro como funcionan las columnas de Bootstrap, vamos a abrir el ejemplo que nos dan que se llama “Blog”. Veréis que en este ejemplo, tenemos un menú, tenemos varias columnas, tenemos un banner y el uso de thumbnails, así que vamos a ver como esta estructurado a nivel de código.

<header class="blog-header py-3">
   <div class="row flex-nowrap justify-content-between align-items-center">
      <div class="col-4 pt-1">
         <a class="text-muted" href="#">Subscribe</a>
      </div>
      <div class="col-4 text-center">
         <a class="blog-header-logo text-dark" href="#">Large</a>
      </div>
      <div class="col-4 d-flex justify-content-end align-items-center">
         <a class="text-muted" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-3">
               <circle cx="10.5" cy="10.5" r="7.5"></circle>
               <line x1="21" y1="21" x2="15.8" y2="15.8"></line>
            </svg>
         </a>
         <a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
      </div>
   </div>
</header>

Como podéis ver, utilizan la etiqueta de HTML “header” para indicar que parte de su código incluye el menú o bien como es en este caso, la cabecera. Cómo podéis ver, las clases de Bootstrap son muy sencillas de interpretar porque los nombres de las mismas hablan por si solas, simplemente hace falta conocerlas. En este caso vemos que tenemos un div “row” que contiene 3 columnas de classe “col-4”, dando así una misma anchura a las 3 columnas y en el caso de la tercera, vemos que tiene 2 elementos a diferencia de las otras 2 primeras que solo contienen un elemento.

Si nos centramos en el menú, veremos el siguiente código:

<div class="nav-scroller py-1 mb-2">
   <nav class="nav d-flex justify-content-between">
      <a class="p-2 text-muted" href="#">World</a>
      <a class="p-2 text-muted" href="#">U.S.</a>
      <a class="p-2 text-muted" href="#">Technology</a>
      <a class="p-2 text-muted" href="#">Design</a>
      <a class="p-2 text-muted" href="#">Culture</a>
      <a class="p-2 text-muted" href="#">Business</a>
      <a class="p-2 text-muted" href="#">Politics</a>
      <a class="p-2 text-muted" href="#">Opinion</a>
      <a class="p-2 text-muted" href="#">Science</a>
      <a class="p-2 text-muted" href="#">Health</a>
      <a class="p-2 text-muted" href="#">Style</a>
      <a class="p-2 text-muted" href="#">Travel</a>
   </nav>
</div>

Cada uno de los tags <a> son enlaces a un sitio concreto, de manera que en este caso, solo hace falta indicarle esta estructura para que salgan concatenados uno al lado del otro.

Si nos centramos en el banner, vemos que es un banner que contiene el siguiente código:

<div class="jumbotron p-3 p-md-5 text-white rounded bg-dark">
   <div class="col-md-6 px-0">
      <h1 class="display-2 font-italic">Title of a longer featured blog post</h1>
      <p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what's most interesting in this post's contents.</p>
      <p class="lead mb-0"><a href="#" class="text-white font-weight-bold">Continue reading...</a></p>
   </div>
</div>

Cómo podéis ver, estamos indicando dentro del div, que tenemos una columna “col-md-6”, de manera que el texto nunca va a sobrepassar el 50% del total del div superior. Vemos que dentro tenemos un título con classe “display-4”, de manera que le estamos indicando que ese tag <h1> tiene un tamaño de letra equivalente a un tag <h4>, pudiendo variar el valor del número de 1 a 6.

Para finalizar este apartado, simplemente deciros que referente al thumbnail, podemos utilizar diferentes clases, como en este caso “card-body” o bien “card-top” si quisiéramos que la imagen estuviera en la parte superior.

Cómo podéis ver, Bootstrap está echo de tal manera que siempre siga una estructura, un patrón, para que el programador pueda llegar a memorizar el funcionamiento de sus classes ya predefinidas con CSS.

En el siguiente apartado, veremos los diferentes tipos de inputs que encontramos en un formulario y las clases de botones que Bootstrap nos ofrece.

Nos vemos en el siguiente apartado!

¡Compartir curso!