Sesión Bootstrap Diplomado SENA
Resumen de los pasos ejecutados en la sesión de Bootstrap realizada.
La presente guía será basada en la versión 5 de Bootstrap
- Requerimientos técnicos
- Instalación
- Estructura de carpetas
- Importar JavaScript
- Importar CSS
- Construir aplicación
- Ejecución de entorno
- Copyright y licencia
Herramientas requeridas: Visual Studio Code, Node.js, cualquier navegador.
- Instalar Visual Studio Code: Página oficial
- Instalar Node.js: Página oficial
Se utilizará la documentación Getting started page para referencia en cuanto al proceso de instalación, contenido del framework, plantillas, ejemplos y más.
La guía considerará los resultados obtenidos con Bootstrap v.5.1, Visual Studio Code v.1.59.0 y Node.js v.14.16.0 o 14.17.5. Utilizar la consola Terminal del VSC para la ejcución de las instrucciones npm.
Una vez instalados los componentes de Visual Studio Code y Node.js deberá ser creada la carpeta que se utilizará para almacenar los archivos.
Utilizaremos Parcel para incluir Bootstrap en el proyecto.
-
Instalar Parcel Bundler Instalar con npm:
npm install -g parcel-bundler
-
Instalar Bootstrap
npm install bootstrap
-
Crear el archivo package.json en el directorio usando
npm init -y
-
Instalar Popper
npm install @popperjs/core
Para iniciar, la estructura que se deberá tener es la siguiente:
nombre-proyecto/
├── node_modules/
│ └── bootstrap/
│ └── popper.js/
└── scss/
│ ├── custom.scss
├── src/
│ ├── index.html
│ ├── index.js
│
└── package.json
Crear archivos y carpetas correspondientes para finalizar esta parte del proceso.
Para la importación del JavaScript de Bootstrap en el punto de entrada (src/index.js
) indicar la siguiente instrucción:
import * as bootstrap from 'bootstrap';
Para la importación del CSS para nuestro proyecto, deberemos ir al archivo (scss/custom.scss
) e indicar la siguiente instrucción:
@import "../node_modules/bootstrap/scss/bootstrap";
Incluir en el archivo src/index.js
antes del cierre del </body>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script src="./index.js"></script>
</body>
</html>
Lo primero que deberemos hacer será editar el archivo package.json
agregando los scripts de dev y build.
"scripts": {
"dev": "parcel ./src/index.html",
"prebuild": "npx rimraf build",
"build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}
A continuación se deberá ejecutar el Run dev script.
npm run dev
Bootstrap originado en Twitter, Inc. Código liberado bajo la licencia MIT. Documentos liberados bajo Creative Commons.