¿Cómo agregar Bootstrap en un proyecto?

Posted on by Rudeus Greyrat

Un bootstrap es una herramienta de código abierto que consta de marcos HTML, CSS y JavaScript. Es una herramienta dedicada de desarrollo web sensible que consta de plantillas listas para usar. Originalmente se llamó Twitter Blueprint y fue desarrollado por Mark Otto y Jacob Thornton. Con el tiempo, Bootstrap ha evolucionado con respecto a la versión 5. Por lo tanto, el sitio web básico se puede desarrollar utilizando Bootstrap debido a las plantillas listas para usar disponibles.

Razón para elegir Bootstrap:

  • Desarrollo web más rápido y fácil.
  • Crea páginas web independientes de la plataforma.
  • Crea páginas web receptivas.
  • También está diseñado para responder a los dispositivos móviles.
  • ¡Es gratis! Disponible en www.getbootstrap.com

Los sitios web que se crearon con mucho CSS y JavaScript ahora se pueden crear con unas pocas líneas de código usando Bootstrap. Bootstrap se compone principalmente de tres componentes:

  • CSS
  • fuentes
  • JavaScript

El bootstrap se puede utilizar de 2 formas:

  • Uso del enlace CDN de Bootstrap.
  • Descargando el archivo Bootstrap.

Podemos obtener fácilmente los recursos para ambos enfoques desde el sitio web oficial. Comencemos la discusión con el primer enfoque.

Método 1: Uso de enlaces CDN: este método para instalar Bootstrap es bastante fácil, pero requiere una conexión a Internet estable. Se recomienda encarecidamente que siga este método.

Paso 1: Vaya a getbootstrap y haga clic en Primeros pasos. Allí encontrará los siguientes enlaces de CDN. 

Paso 2: copia los enlaces y pégalos dentro de la etiqueta <head>.

Enlace CSS:

<enlace href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css” rel=”stylesheet” integridad=”sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU” crossorigin=”anónimo” >

Enlace JavaScript:

<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js” integridad=”sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ” origen cruzado =”anónimo”></script>

  
 

Paso 3: Después de completar los pasos anteriores, el código será como el siguiente:

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
 
    <!-- Bootstrap CSS -->
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
        rel="stylesheet" integrity=
"sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
        crossorigin="anonymous" />
</head>
 
<body>
    <h1>Hello, world!</h1>
 
    <div>
        You're learning Bootstrap
        on Geeksforgeeks.org
    </div>
 
    <!-- Optional JavaScript; choose one of the two! -->
 
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
        integrity=
"sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
        crossorigin="anonymous">
    </script>
 
    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
        integrity=
"sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
        crossorigin="anonymous">
    </script>
     
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
        integrity=
"sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
        crossorigin="anonymous">
    </script>  -->
</body>
 
</html>

En esta etapa, hemos completado el proceso de instalación y ahora podemos comenzar a implementar la lógica.

Ejemplo: Este ejemplo ilustra el uso del enlace CDN de Bootstrap, para usar Bootstrap con el documento HTML.

HTML

<!DOCTYPE html>
<html lang="en">
   
<head>
     
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1" />
 
    <!-- Bootstrap CSS -->
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity=
"sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
          crossorigin="anonymous"/>
    <title>Welcome to GeeksforGeeks</title>
</head>
   
<body>
    <h1>GeeksforGeeks</h1>
 
      <h3>Bootstrap Button</h3>
    <hr />
    <button type="button"
            class="btn btn-primary">Primary
    </button>
    <button type="button"
            class="btn btn-secondary">Secondary
    </button>
    <button type="button"
            class="btn btn-success">Success
    </button>
    <button type="button"
            class="btn btn-danger">Danger
    </button>
    <button type="button"
            class="btn btn-warning">Warning
    </button>
    <button type="button"
            class="btn btn-info">Info
    </button>
    <button type="button"
            class="btn btn-light">Light
    </button>
    <button type="button"
            class="btn btn-dark">Dark
    </button>
    <button type="button"
            class="btn btn-link">Link
    </button>
</body>
 
</html>

Producción:

Método 2: descargando Bootstrap: este método de instalación de Bootstrap también es fácil, pero puede funcionar sin conexión (no requiere una conexión a Internet), pero es posible que no funcione para algunos navegadores.

Paso 1: Vaya a getbootstrap y haga clic en Primeros pasos. Haga clic en el botón Descargar Bootstrap y descargue el CSS y JS compilados.

Paso 2: Se descargaría un archivo .zip. Extráigalo y vaya a la carpeta de distribución. Vería 2 carpetas llamadas CSS y JS. Puede hacer su archivo HTML allí y luego debe pegar estos enlaces en sus respectivas secciones. En los archivos CSS, los archivos más importantes que se utilizarán son bootstrap y bootstrap.min. En los archivos JS, los más importantes son bootstrap.min.js y bootstrap.js.

Paso 3: Cree una carpeta de proyecto separada y cree un archivo HTML. Debajo de la carpeta, copie los archivos extraídos descargados de bootstrap. Debajo de la etiqueta de encabezado del archivo HTML, se debe vincular el CSS. El jQuery descargado también debe copiarse en el archivo JS. Asegúrese de que debajo del archivo del proyecto, los archivos descargados y la página HTML deben estar presentes en esa carpeta.

Paso 4: después de completar los pasos anteriores, el código final se verá como el siguiente ejemplo de código. El código final después de guardar los archivos en la misma carpeta y agregar enlaces debajo de la etiqueta del encabezado y el cuerpo, respectivamente.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
 
      <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1" />
 
    <link rel="stylesheet"
          type="text/css"
          href="css/bootstrap.css" />
</head>
   
<body>
    <h1>Welcome to gfg</h1>
    <script type="text/javascript"
            href="js/jquery.js">
    </script>
    <script type="text/javascript"
            href="js/bootstrap.min.js">
    </script>
</body>
 
</html>

Ejemplo: En el ejemplo, se puede observar que los archivos descargados de bootstrap se incluyen en la sección de cabeza y cuerpo. Ahora las clases de arranque se pueden usar directamente. A medida que se descarga, no se requiere una conexión a Internet para cargar las clases de arranque.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
 
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
 
    <link rel="stylesheet" type="text/css"
        href="css/bootstrap.css" />
</head>
 
<body>
    <h1>Welcome to GeeksforGeeks</h1>
 
    <div class="mb-3">
        <label for="exampleFormControlInput1"
            class="form-label">
            Email address
        </label>
 
        <input type="email" class="form-control"
            id="exampleFormControlInput1"
            placeholder="name@example.com" />
    </div>
 
    <div class="mb-3">
        <label for="exampleFormControlTextarea1"
            class="form-label">
            Example textarea
        </label>
 
        <textarea class="form-control"
            id="exampleFormControlTextarea1" rows="3">
      </textarea>
    </div>
 
    <script type="text/javascript"
        href="js/jquery.js">
    </script>
     
    <script type="text/javascript"
        href="js/bootstrap.min.js">
    </script>
</body>
 
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por skbhoyar36sb y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

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