Clase 8 - Bootstrap

lunes, 25 de abril de 2022

¿Qué es Bootstrap?

Bootstrap es un framework útil para diseño responsivo, al tener muchas soluciones con respecto al tamaño de la pantalla.

Instalación, ventajas y desventajas de ambas

Tenemos 2 formas de instalar bootstrap (CDN o Local)

Podríamos usar un link dentro del HTML lo cual es lo más sencillo e inmediato de usar (CDN). Los archivos estan alojados en un servidor ajeno por lo cual dependeríamos de otros. Para empezar a usarlo necesitamos insertar lo siguiente:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

El archivo HTML debería quedar de la siguiente forma:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Hello, world!</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Referencia: Starter Template en la documentación de Bootstrap.

(Vimos en la clase que el “.min” es una version “minificada” que evita tanto esfuerzo sobre el ancho de banda)

Otra forma de instalarlo es descargar los archivos en el servidor. Con esto tendremos un control más local sobre estos elementos, sin hacer llamadas externas.

En el código deberiamos de hacer las mismas llamadas que a través de CDN pero usando la ruta de nuestra propia web.

¿Que más vimos la clase?

Vimos que con bootstrap debemos respetar el contrato.

También RTL: Bootstrap nos provee funcionamientos para escribir de ambas formas (“left to right” y “righ to left”).

Los breakpoints: utilidades para a partir de un punto cambiar la pantalla.