Introducción
Descarga e instalaciónDescarga de archivosnpmlink urlBootstrap & Vite

directorio Bootstrap >>

Bootstrap es un 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.

Descarga e instalación

Descarga de archivos

Para descargar Bootstrap y poder utilizarlo sin necesidad de tener conexión a internet tenemos varias opciones:

  • Descargar los archivos compilados y listos para usar: Compiled CSS and JS
  • Descargar los archivos con la posibilidad de modificarlos con nuestros archivos de Sass: Source files

Una vez descargado el archivo, lo descomprimimos y lo guardamos en el directorio que queramos y/o nos sea fácil acceder a él cada vez que queramos usarlo.

npm

Otra opción para descargar Bootstrap en el proyecto que queramos es usar npm: npm i bootstrap (Si queremos usar otros gestores consultad aquí)

La otra opción que tenemos es en lugar de descargar en nuestro equipo/proyecto el código de Bootstrap es enlazarlo directamente a nuestro código HTML (CDN via jsDelivr)

Enlace al CSS y JS de nuestro bootstrap descargado:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

Los componentes que requieren explícitamente JS and Popper son los siguientes: Alerts, Buttons/checkbox/radio con funcionalidades, Carousel, para ver más consultar aquí.

Bootstrap & Vite

Nosotros vamos a trabajar con Vite, por tanto una vez que hayamos creado el proyecto, sólo deberemos instalar las dependencias que serán:

npm i bootstrap @popperjs/core

Una vez instalado, en nuestro index.html pasaremos a enlazar los estilos de boostrap en el head:

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

Si vas a utilizar algún componente que requiere del JS, deberás incluir en tu html el enlace de bootstrap.js. Lo más rápido/fácil sería incluir bootstrap.bundle.min.js, pero si no vas a usar dropdowns, popovers, o tooltips, podemos ahorrarnos algunos KB incluyendo bootstrap.min.js sin añadir Popper.

<!-- Opción 1 -->
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>

<!-- Opción 2 -->
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
Apartados de esta sección
directorio Bootstrap
página básica

directorio Bootstrap >>