Descargar y utilizar Bootstrap 4 en nuestra aplicación web

Hola a todos, hoy os explicaré como podemos descargar y utilizar Bootstrap 4 en nuestra aplicación web.

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. A diferencia de muchos frameworks web, solo se ocupa del desarrollo front-end.

Aquí te dejo la página oficial de bootstrap.

Tenemos dos formas de importar bootstrap en nuestra aplicación:

  • Descargando el código: Para ello, debemos descargar bootstrap desde aquí.

Una vez descargado, os recomiendo meterlo en una carpeta llamada includes que vosotros creareis.

Ahora debemos importar los archivos css y js en el HTML.


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap</title>
    <link rel="stylesheet" href="includes/bootstrap-4.5.3/css/bootstrap.min.css">
</head>

<body>

    <script src="includes/bootstrap-4.5.3/js/bootstrap.min.js"></script>
</body>

</html>

Te recomiendo descargar también jQuery desde aquí

Cuando abramos el enlace veremos algo así.

Para guardarlo, pulsamos con el botón secundario y le damos a Guardar como…

Lo guardamos en includes.

Ahora lo importamos en el html antes de bootstrap.


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap</title>
    <link rel="stylesheet" href="includes/bootstrap-4.5.3/css/bootstrap.min.css">
</head>

<body>

    <script src="includes/jquery/jquery-3.5.1.min.js"></script>
    <script src="includes/bootstrap-4.5.3/js/bootstrap.min.js"></script>
</body>

</html>

  • Enlazando desde el enlace CDN: en el HTML, colocamos las siguientes líneas:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
    
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>

Ahora vamos a probar que funciona bootstrap. Probaremos con el siguiente código dentro del body:



<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>


Este es el resultado:

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.

Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *