Bootstrap 4 - Configuración del entorno

Puede comenzar a usar Bootstrap 4 en su sitio web incluyéndolo desde CDN (Content Delivery Network) o descargándolo de getbootstrap.com .

Usando CDN

Bootstrap 4 se puede utilizar en el sitio web incluyéndolo desde Content Delivery Network .

Utilice el CDN de CSS y JS de Bootstrap compilado a continuación en su proyecto.

<!-- Compiled and Minified Bootstrap CSS -->
<link rel = "stylesheet" 
   href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
   integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
   crossorigin = "anonymous">

<!-- jQuery Library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
   integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
   crossorigin = "anonymous">
</script>

<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
   integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
   crossorigin = "anonymous">
</script>

<!-- Compiled and Minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
   integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
   crossorigin = "anonymous">
</script>

Incluya las versiones CDN de jQuery y Popper.js (Bootstrap 4 usa jQuery y Popper.js para hacer uso de componentes de JavaScript como modales, información sobre herramientas, ventanas emergentes, etc.) antes del JavaScript de Bootstrap minificado , si está utilizando la versión compilada de JavaScript.

A continuación se muestran algunos componentes, que requieren jQuery:

Utilizado para alertas que se pueden cerrar
Cambie los estados utilizando botones y casillas de verificación / botones de radio y contraiga para alternar el contenido
Carrusel para diapositivas, controles e indicadores
Desplegables (utiliza Popper.js para un posicionamiento perfecto)
Abrir y cerrar Modals
Para colapsar la barra de navegación
Información sobre herramientas y ventanas emergentes (utiliza Popper.js para un posicionamiento perfecto)

Descargando Bootstrap 4

Puede descargar Bootstrap 4 desde https://getbootstrap.com/docs/4.1/getting-started/download/. Cuando haga clic en este enlace, verá una pantalla como se muestra a continuación:

Aquí puede ver dos botones:

Download- Al hacer clic aquí, puede descargar las versiones precompiladas y minimizadas de CSS y JavaScript de Bootstrap. No se incluye documentación ni archivos de código fuente original.
Download Source - Al hacer clic aquí, puede obtener los archivos de documentación y código fuente JavaScript más recientes de Bootstrap SCSS.

Para una mejor comprensión y facilidad de uso, usaremos la versión precompilada de Bootstrap a lo largo del tutorial. A medida que los archivos se compilan y minimizan, no tiene que preocuparse cada vez de incluir archivos separados para la funcionalidad individual.

Estructura de archivo

Bootstrap 4 precompilado

Una vez que se descargue la versión compilada de Bootstrap 4, extraiga el archivo ZIP y verá la siguiente estructura de archivo / directorio:

Como puede ver, hay CSS y JS compilados (bootstrap. *), Así como CSS y JS compilados y minificados (bootstrap.min. *).

Código fuente de Bootstrap 4

Si ha descargado el código fuente de Bootstrap 4, la estructura del archivo sería la siguiente:

Los archivos bajo js / y scss / son el código fuente de Bootstrap CSS y JavaScript.
La carpeta dist / incluye todo lo que se enumera en la sección de descarga precompilada anterior.
Los documentos / examples / incluyen el código fuente para la documentación de Bootstrap y ejemplos de uso de Bootstrap.

Creación de la primera página web con Bootstrap 4

El siguiente ejemplo especifica una página web simple de Bootstrap 4:

Ejemplo

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width=device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
      href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity =" sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <h2>Hello, world!!! Welcome to Tutorialspoint...</h2>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Producirá el siguiente resultado:

Salida

↰ Previous page Next page ↱