Skip to content

hjudes/BootstrapTut

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Bootstrap logo

Bootstrap

BootstrapTut

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

Contenido

Requerimientos técnicos

Herramientas requeridas: Visual Studio Code, Node.js, cualquier navegador.

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.

Instalación

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

Estructura de carpetas

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.

Importar JavaScript

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';

Importar CSS

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";

Construir aplicación

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>

Ejecución de entorno

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

Copyright y licencia

Bootstrap originado en Twitter, Inc. Código liberado bajo la licencia MIT. Documentos liberados bajo Creative Commons.

About

Sesión Bootstrap

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published