En el blog anterior explicamos qué es Bootstrap y los beneficios que otorga implementarlo en tu proyecto. En esta ocasión se explicará la creación del proyecto, para ello esencial realizar la configuración inicial. A continuación, se muestran los pasos necesarios:
Paso 1: Descarga de Bootstrap
Bootstrap es una herramienta de código abierto, lo que significa que es gratuito y está disponible para múltiples sistemas operativos.
Descarga Manual (Bootstrap Descargado Localmente)
Cuando descargas Bootstrap manualmente y lo integras en tu proyecto, estás obteniendo una copia específica de Bootstrap que está alojada en tu proyecto. Esto te brinda un mayor control sobre la versión de Bootstrap que utilizas y te permite personalizar y modificar el código según sea necesario. Utiliza esta forma de descarga si deseas un mayor control sobre la versión de Bootstrap y no dependes de una CDN externa. Esta opción es adecuada si has descargado Bootstrap y deseas utilizarlo tal como está en tu proyecto local.
Para Windows y para macOS (iOS)
- Abre tu navegador web favorito y dirígete al sitio web oficial de Bootstrap en https://getbootstrap.com/.
- Haz clic en el botón "Download" (Descargar) para obtener el archivo ZIP de Bootstrap.
- Una vez descargado, descomprime el archivo ZIP en una ubicación de tu elección.
Para Ubuntu (Linux)
- Abre una terminal en Ubuntu.
- Utiliza el siguiente comando para descargar Bootstrap desde el repositorio oficial en GitHub:
wget https://github.com/twbs/bootstrap/archive/v5.3.0.zip
- Descomprime el archivo ZIP descargado en una ubicación de tu elección con el siguiente comando:
unzip v5.3.0.zip
Instalación a través de npm con CDN
Si estás trabajando en un proyecto de desarrollo web basado en Node.js y JavaScript, puedes utilizar npm (Node Package Manager) para instalar Bootstrap como una dependencia de tu proyecto. De esta manera estás cargando una versión específica de Bootstrap desde un servidor externo.
Para instalarlo ejecuta el siguiente comando en la terminal de tu proyecto:
npm install bootstrap@5.3.2
La elección entre estas opciones depende de tus preferencias y las necesidades específicas de tu proyecto:
Utiliza la descarga manual si deseas un mayor control sobre la versión de Bootstrap y no dependes de una CDN externa. Esta opción es adecuada si has descargado Bootstrap y deseas utilizarlo tal como está en tu proyecto local.
Utiliza la instalación a través de npm con CDN si prefieres gestionar Bootstrap como una dependencia de tu proyecto a través de npm, pero aún así deseas aprovechar la velocidad y la disponibilidad de una CDN externa. Esta opción es útil para proyectos basados en Node.js y JavaScript.
Paso 2: Crea la estructura de la carpeta de tu proyecto
Crea una estructura de carpetas organizada para tu proyecto, esta dependerá de las necesidades de tu proyecto. Incluye un archivo "index.html" que corresponderá a la página principal de tu proyecto, también puedes incluir archivos CSS y JavaScript.
Paso 3: Crea el archivo raíz de tu proyecto
En tu archivo "index.html" crea la estructura básica de tu documento HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Proyecto con Bootstrap</title>
</head>
<body>
</body>
</html>
Paso 4: Integración de Bootstrap
En tu documento "index.html" agrega los enlaces a las hojas de estilo CSS y JavaScript de Bootstrap. Estos aseguran que tu proyecto tenga acceso a los estilos y la funcionalidad de Bootstrap.
Integración de Bootstrap para Descarga Manual
Si has descargado Bootstrap manualmente enlaza Bootstrap utilizando las siguientes líneas de código en tu archivo HTML:
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
Integración de Bootstrap para Instalación a través de npm
Si has optado por instalar Bootstrap utilizando npm (Node Package Manager), puedes enlazar Bootstrap agregando las siguientes líneas de código:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
La primera línea enlaza la hoja de estilo CSS de Bootstrap, lo que permite aplicar los estilos y la apariencia visual de Bootstrap a tu proyecto. La segunda línea incluye el archivo JavaScript de Bootstrap, que habilita funcionalidades interactivas avanzadas.
De esta forma estás preparando tu proyecto para utilizar todas las capacidades y estilos que Bootstrap ofrece de manera efectiva.