Introducción
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í)
link url
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/coreUna 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>