maxresdefault 41

Instalación de Bootstrap 5 (Mi primer página Web)

En este tutorial vamos a realizar la instalación de Bootstrap 5 siguiendo estos pasos.

  • Desde la página oficial de Bootstrap (https://getbootstrap.com) obtendremos las librerías de Bootstrap 5 y las colocaremos en nuestro index.html.
  • Crearemos un formulario.
  • Agregaremos márgenes.
  • Probaremos como se muestra nuestra página en diferentes dispositivos.

¿Que es Bootstrap?
Bootstrap es una biblioteca multiplataforma o conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como extensiones de JavaScript adicionales.

Codigo de la instalación de Bootstrap 5: https://github.com/programadornovato/MiPaginaWeb/commit/3eedb4a2032d5a476720a9d11fa1917ca1ae77f3

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Mi primer pagina Web</title>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col">

                <div class="mb-3">
                    <label for="exampleFormControlInput1" class="form-label">Email address</label>
                    <input type="email" class="form-control" id="exampleFormControlInput1"
                        placeholder="[email protected]">
                </div>
                <div class="mb-3">
                    <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

🎦[Curso] Visual Studio Code 🆚 de 0 a 100: https://www.youtube.com/watch?v=s47z_qh16j4&list=PLCTD_CpMeEKQbdlT8efsS-veXuvYZ1UWn&ab_channel=programadornovato
🎦[Curso] Bootstrap de 0 a 100 🌈: https://www.youtube.com/watch?v=_paV6qQ-a4M&list=PLCTD_CpMeEKSVmsZJIumVvfDviuW-c9AT&ab_channel=programadornovato
🎦[Curso] Javascript🔥 de 0 a 100: https://www.youtube.com/watch?v=fwtaVaiR-Kg&list=PLCTD_CpMeEKQZtB8mNm0J1qWmHdZ2QUt-&ab_channel=programadornovato

Anterior tutorial Siguiente tutorial

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

En Programador Novato vivimos de los anuncios, hemos detectado que está utilizando extensiones para bloquear anuncios. Ayudanos deshabilitando tu bloqueador de anuncios. :)