Bootstrap

Tutorial Bootstrap: Instalación de Bootstrap CSS

Bootstrap CSS instalación: guía paso a paso. Sigue una guía paso a paso para instalar Bootstrap CSS en tu proyecto con ejemplos detallados.

Estructura de archivos en Bootstrap

Bootstrap está compuesto por una serie de archivos y directorios que contienen el código fuente necesario para su funcionamiento. Entender la estructura de archivos de Bootstrap es crucial para su correcta implementación y personalización en proyectos.

Directorio raíz

bootstrap/: Contiene todos los archivos de Bootstrap.

CSS

bootstrap.min.css: Este es el archivo CSS compilado y minificado. Incluye todos los estilos CSS necesarios para utilizar Bootstrap sin modificaciones adicionales.
bootstrap.css: La versión no minificada del archivo CSS. Útil para desarrollo y depuración.

bootstrap.bundle.min.js: Este es el archivo JavaScript que incluye todos los plugins de Bootstrap, así como una versión integrada de Popper.js.
bootstrap.bundle.js: La versión no minificada del arhcivo bundle de JavaScript.
bootstrap.min.js: Archivo JavaScript minificado, que requiere la inclusión externa de Popper.js para el funcionamiento completo de los tooltips y popovers.
bootstrap.js: La versión no minificada del archivo JavaScript.

Source files (Archivos fuente)

scss/: Contiene los archivos fuente Sass que se utilizan para generar el CSS de Bootstrap. Estos archivos permiten una personalización más granular de los componentes de Bootstrap.
js/src/: Contiene los archivos fuente JavaScript divididos por funcionalidad. Cada archivo corresponde a un componente específico de Bootstrap.

Map files

bootstrap.min.css.map: Archivo source map para el archivo CSS minificado. Ayuda en la depuración al mapear el código minificado a su forma original.
bootstrap.bundle.min.js.map: Archivo source map para el archivo JavaScript bundle minificado.

Iconos

icons/: Directorio opcional que puede contener archivos SVG para iconos personalizados utilizados en el proyecto.

Entender la estructura de estos archivos permite a los desarrolladores integrar Bootstrap de forma más eficiente y personalizar sus componentes según las necesidades específicas del proyecto.

Instalación mediante CDN

Para instalar Bootstrap usando un CDN (Content Delivery Network), puedes aprovechar los archivos hospedados en servicios como jsDelivr. Esto te permite incluir las versiones compiladas de CSS y JS de Bootstrap en tu proyecto directamente desde la red sin necesidad de descargar los archivos localmente.

Puedes integrar Bootstrap añadiendo las siguientes líneas en el <head> y antes del cierre del </body> de tu archivo HTML:

<!-- Enlazar el CSS de Bootstrap desde jsDelivr CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<!-- Enlazar el JS de Bootstrap desde jsDelivr CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

Si prefieres incluir Popper.js por separado y el JavaScript sin el bundle, puedes hacer lo siguiente:

<!-- Incluir Popper.js primero -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>

<!-- Incluir el JavaScript de Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>

También puedes optar por otras CDNs alternativas como cdnjs y unpkg. Puedes acceder a los archivos de Bootstrap en estas CDNs y obtener las URLs necesarias:

cdnjs
unpkg

Es recomendable verificar que las "Subresource Integrity (SRI)" hashes sean las mismas que las esperadas para asegurar que los archivos no han sido modificados por terceros. Esto se puede hacer usando herramientas como SRI Hash Generator o utilizando OpenSSL desde la línea de comandos:

openssl dgst -sha384 -binary bootstrap.min.js | openssl base64 -A

Este procedimiento garantiza que estás incluyendo versiones seguras de Bootstrap en tu proyecto.

Instalación mediante NPM

Para instalar Bootstrap en aplicaciones de Node.js, puedes usar el gestor de paquetes NPM. Esto ofrece la ventaja de integrar los archivos fuente de Bootstrap directamente en tu proyecto, permitiendo una mayor personalización y control sobre la compilación de estilos y scripts.

Paso 1: Instalación

Para instalar Bootstrap, ejecuta el siguiente comando en tu terminal:

npm install bootstrap@5.3.3

Paso 2: Importación en el proyecto

Una vez que Bootstrap está instalado, puedes importarlo en tu proyecto JavaScript. Tienes dos opciones dependiendo de si prefieres require para CommonJS o import para módulos ECMAScript:

Usando require:

const bootstrap = require('bootstrap');

Usando import:

import bootstrap from 'bootstrap';

Esto cargará todos los plugins de Bootstrap en el objeto bootstrap.

Carga de plugins individuales

Si prefieres cargar los plugins de Bootstrap manualmente, puedes hacerlo importando los archivos JS individuales desde el directorio /js/dist/ del paquete de Bootstrap:

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/dropdown';

Uso con Sass

Bootstrap también puede integrarse con un compilador Sass para una personalización más completa. La entrada principal de Sass se encuentra en el archivo especificado en el campo sass del package.json de Bootstrap:

@import "~bootstrap/scss/bootstrap";

Metadatos en package.json

Bootstrap proporciona metadatos adicionales en su archivo package.json que pueden ser útiles:

sass: Ruta al archivo fuente principal de Sass.
style: Ruta al archivo CSS no minificado que se ha compilado usando la configuración predeterminada.

Ejemplo de proyecto

Para facilitar el comienzo, Bootstrap ofrece un proyecto de inicio en GitHub que incluye ejemplos de configuración con un compilador de Sass, Autoprefixer, Stylelint, PurgeCSS, y Bootstrap Icons. Esta plantilla puede ayudarte a configurar tu proyecto de manera rápida y eficiente.

Instalación mediante descarga directa

Para instalar Bootstrap mediante descarga directa, sigue estos pasos:

Descargar Bootstrap: Primero, descarga la versión compilada de Bootstrap desde el repositorio oficial. La versión compilada incluye los archivos CSS y JS minificados, listos para su uso inmediato en proyectos.

Dirígete a la página de lanzamientos de Bootstrap en GitHub: Lanzamientos Bootstrap
Descarga el archivo denominado bootstrap-5.3.3-dist.zip.

Archivo a descargar "bootstrap-5.3.3-dist.zip"

Extraer los archivos: Una vez descargado el archivo ZIP, debes extraerlo. En la carpeta resultante encontrarás varios archivos y directorios importantes para trabajar con Bootstrap:

css/: Contiene los archivos CSS compilados, incluyendo bootstrap.min.css.
js/: Contiene los archivos JavaScript compilados, incluyendo bootstrap.bundle.min.js y bootstrap.min.js.

Incluir Bootstrap en tu proyecto: Para utilizar Bootstrap, necesitas enlazar los archivos CSS y JS en tus documentos HTML. Coloca los archivos .css y .js en tu directorio de proyecto, y luego enlázalos en tu HTML de la siguiente manera:

<!DOCTYPE html>
<html lang="es">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Mi Proyecto Bootstrap</title>
      <!-- Enlazar el CSS de Bootstrap -->
      <link rel="stylesheet" href="ruta-a-tu-directorio/css/bootstrap.min.css">
</head>
<body>
      <h1>¡Hola, Bootstrap!</h1>

      <!-- Enlazar el JS de Bootstrap (incluye Popper.js) -->
      <script src="ruta-a-tu-directorio/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Organización de archivos: Es recomendable mantener una estructura de archivos ordenada en tu proyecto. Por ejemplo:

mi-proyecto/
├── css/
│   └── bootstrap.min.css
├── js/
│   └── bootstrap.bundle.min.js
└── index.html

Verificación de la instalación: Abre index.html en un navegador web para verificar que los estilos y scripts de Bootstrap se aplican correctamente.

Este método es sencillo y eficaz para empezar a utilizar Bootstrap en tus proyectos sin necesidad de herramientas adicionales como npm o un gestor de paquetes.

Certifícate en Bootstrap con CertiDevs PLUS

Ejercicios de esta lección Instalación de Bootstrap CSS

Evalúa tus conocimientos de esta lección Instalación de Bootstrap CSS con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.

Todas las lecciones de Bootstrap

Accede a todas las lecciones de Bootstrap y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.

Introducción A Bootstrap Css

Introducción Y Entorno

Instalación De Bootstrap Css

Introducción Y Entorno

Tipografía Y Fuentes En Bootstrap

Fundamentos Y Layout

Imágenes Responsive En Bootstrap

Fundamentos Y Layout

Fundamentos Del Sistema De Grid De Bootstrap

Fundamentos Y Layout

Flexbox En Bootstrap

Fundamentos Y Layout

Componentes De Bootstrap

Componentes

Navbars Y Menús De Navegación En Bootstrap

Componentes

Formularios Y Validación

Componentes

Modales Y Ventanas Emergentes

Componentes

Clases De Utilidad

Utilidades Y Helpers

Utilidades De Espaciado Y Alineación

Utilidades Y Helpers

Utilidades De Colores Y Fondo

Utilidades Y Helpers

Conocimiento General De Bootstrap

Evaluación

Conocimiento General De Bootstrap

Evaluación

Certificados de superación de Bootstrap

Supera todos los ejercicios de programación del curso de Bootstrap y obtén certificados de superación para mejorar tu currículum y tu empleabilidad.

Frontend con Bootstrap CSS

5h 30m

En esta lección

Objetivos de aprendizaje de esta lección

Comprender la estructura de archivos de Bootstrap.
Instalar Bootstrap utilizando CDN.
Instalar Bootstrap a través de NPM.
Integrar Bootstrap en proyectos mediante descarga directa.
Importar y utilizar los componentes y plugins de JavaScript de Bootstrap.
Aplicar y personalizar los estilos de Bootstrap con Sass.