Curso HTML / CSS desde cero 11
Curso HTML / CSS desde cero 11 ¿Te apuntas aprender con Ivardev? Cursos desde 0, donde aprenderás lo imprescindible.

CLASE 11:
-BOOTSTRAP: Es una biblioteca CSS y JS, para maquetar HTML directamente mediante clases predefinidas. Nos permite hacer de forma simple elementos comunes a muchas webs.
-Empezamos construyendo una estructura HTML típica.


<html>

</html>
<head>
   <body>

   </body>
</head>

Accederiamos a esta web https://getbootstrap.com/
Debemos incluir la llamada CSS y JS a bootstrap en el head
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
 

-Vamos a ver acciones básicas creadas con bootstrap
-En el body añadimos una clase y ponemos algo, se nos muestra así:


 <body>
       <div class="container">
Pagina web carixsa
       </div>
   </body>

Con esto creamos un contendedor básico de HTML, se pueden crear contenedores conforme la resolución de la pantalla: https://getbootstrap.com/docs/5.1/layout/containers/

Dentro del contenedor vamos incluir columnas, se realiza  con la clase row fila) y col columna)
Aquí se  crean  columnas que indicamos con los colores de fondo primario y secundario.

<div class="container">
           <div class="row"> 
               <div class="col bg-primary">
                   Columna1
               </div>
               <div class="col bg-secondary">
                   Columna2
               </div>
           </div>
       </div>
 

Ahora definimos tamaños distintos para cada una de las columnas, deben sumar 12 entre ellas.

       <div class="container">
           <div class="row"> 
               <div class="col-8 bg-primary">
                   Columna1
               </div>
               <div class="col-4 bg-secondary">
                   Columna2
               </div>
           </div>
       </div>   
 

-Podemos colocar columnas de muchas formas, esta es una opción:
https://getbootstrap.com/docs/5.1/layout/columns/


<div class="container">
           <div class="row justify-content-evenly"> 
               <div class="col-4 bg-primary">
                   Columna1
               </div>
               <div class="col-4 bg-secondary">
                   Columna2
               </div>
           </div>
       </div>   
 

-Podemos modificar margin y padding de forma simple indicando m o p + un número de 1 a 5. Podemos también definir solo el espacio vertical u horizontal con mx, px, my, py.

   <div class="container p-5 bg-primary">
       <div class="bg-secondary mx-3 py-4 px-2">
           Hola que tal 
       </div>
   </div>
 

-Podemos también definir cada posición de margin o padding con los modificadores S (start=inicio) E (end=final) T (Top=arriba) B (Botom=abajo)

   <div class="container pt-5 pb-4 bg-primary">
       <div class="bg-secondary ps-5  pe-3 ">
           Hola que tal 
       </div>
   </div>
 

-Podemos cambiar el tamaño de letra con cla clase de letra y un numero como en este ejemplo:


https://getbootstrap.com/docs/5.1/content/typography/

<div class="container">
       <p class="display-6">tienda online</p>
       <p class="display-4">tienda online</p>

   </div>
 

-Podemos cambiar la posición si esta en el centro, al final o al principio añadiendo esto:

   <div class="container">
       <p class="text-end">tienda online</p>
       <p class="text-center">tienda online</p>

   </div>
 

-Aquí podemos cambiar los colores poniendo text y el nombre de cada color:


<div class="container">
       <p class="text-primary">tienda online</p>
       <p class="text-secondary">tienda online</p>
       <p class="text-danger">tienda online</p>
       <p class="text-info">tienda online</p>
       <p class="text-dark">tienda online</p>

   </div>
 

-Vamos a colocar una imagen, las imágenes se puede colocar de diferentes formas:
-Colocamos una imagen en la carpeta img, y hacemos varias modificaciones:
-Con W modificamos el tamaño de ancho
-Con rounded ponemos las esquinas curvas
-Con shadow creamos una sombra
-Con img-flui / img-thmbnail colocamos de distinta forma las imágenes.


https://getbootstrap.com/docs/5.1/content/images/

 <div class="container">
       <img class="img-fluid w-50 rounded shadow" src="img/cats1.jpg">
       <img class="img-thumbnail w-25" src="img/cats1.jpg">

   </div>