Clase 6 - Bootstrap

Clase de reencuentro después de no vernos durante gran parte del año. Estuvimos discutiendo un poco que partes del programa podemos saltear o pasar por arriba para poder acelerar un poco y recuperar el tiempo perdido.

Arrancamos con Bootstrap, sin ver por completo CSS.

Bootstrap

Presentamos el framework, vimos los medios de instalación:

Vimos cómo instalar en nuestros documentos. La instalación se refiere a la inclusión de 2 archivos en nuestro HTML, un archivo CSS y otro JS.

En la documentación oficial hay un ejemplo listo para arrancar:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>
</html>

Lo importante es la inclusión de los archivos

<link href="bootstrap.min.css" rel="stylesheet">
<script src="bootstrap.bundle.min.js"></script>

Grilla De Bootstrap

La grilla de Bootstrap es un sistema de diseño que permite estructurar el contenido en sitios web. Está compuesta por filas y columnas, donde las filas representan el contenedor principal y las columnas se utilizan para dividir el espacio horizontalmente. La grilla de Bootstrap utiliza un sistema de 12 columnas.

Las columnas en Bootstrap se dividen en diferentes “porciones” utilizando clases predefinidas, como col-nn donde nn representa el número de columnas que ocupará. Por ejemplo, una columna con la clase col-6 ocupará la mitad del ancho disponible en una fila, mientras que una columna con la clase col-12 ocupará todo el ancho de la fila.

Además, se pueden usar columnas en diferentes breakpoints. Estas clases responsivas, como col-sm-nn, col-md-nn y col-lg-nn, permiten definir diferentes tamaños de columnas para adaptarse a las distintas resoluciones de pantalla.

Breakpoints y Mobile First

Hablamos sobre el concepto de pensar nuestras pantallas de una manera mobile-first, empezando desde la pantalla más pequeña y haciendo ajustes para pantallas más grandes.

De esta misma manera está pensado Bootstrap, por eso es que el primer breakpoint no tiene clase in fijo.

Trabajo Práctico: Grilla de Bootstrap

Vimos a último momento cómo pensar la solución para el trabajo práctico de pantallas responsivas con Bootstrap.

Links a las imágenes de la consigna: