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>
