Bootstrap 5.3: Contenido que incluye el proyecto y la jerarquía de sus carpetas

por

Cuando descargas Bootstrap (ya sea en su versión compilada o en código fuente), obtienes un conjunto de archivos organizados en carpetas, principalmente de CSS y JavaScript,que puedes usar directamente en tu sitio web.

¿Qué incluye la versión compilada de Bootstrap?

Esta versión está lista para usar, sin necesidad de compilar nada. Si descomprimes el archivo ZIP, vas a encontrar una estructura como la que contemplas a continuación.

Con una carpeta denominada BOOTSTRAP como raíz y dos carpetas principales que adjuntan una infinidad de archivos, la carpeta de CSS (css) con los ficheros .css, css.map y también, la carpeta de Javascript (js) con los ficheros .js, js.map y js «minimizados».

bootstrap/
├── css/
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-grid.rtl.css
│   ├── bootstrap-grid.rtl.css.map
│   ├── bootstrap-grid.rtl.min.css
│   ├── bootstrap-grid.rtl.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap-reboot.rtl.css
│   ├── bootstrap-reboot.rtl.css.map
│   ├── bootstrap-reboot.rtl.min.css
│   ├── bootstrap-reboot.rtl.min.css.map
│   ├── bootstrap-utilities.css
│   ├── bootstrap-utilities.css.map
│   ├── bootstrap-utilities.min.css
│   ├── bootstrap-utilities.min.css.map
│   ├── bootstrap-utilities.rtl.css
│   ├── bootstrap-utilities.rtl.css.map
│   ├── bootstrap-utilities.rtl.min.css
│   ├── bootstrap-utilities.rtl.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap.rtl.css
│   ├── bootstrap.rtl.css.map
│   ├── bootstrap.rtl.min.css
│   └── bootstrap.rtl.min.css.map
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.esm.js
    ├── bootstrap.esm.js.map
    ├── bootstrap.esm.min.js
    ├── bootstrap.esm.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map

¿Qué incluye exactamente la carpeta CSS de hojas de estilos?

Aquí tienes varios archivos .css que controlan el diseño visual del sitio:

Archivo ¿Para qué sirve?
bootstrap.css / bootstrap.min.css Estilo completo de Bootstrap (layout, componentes, utilidades). .min = versión comprimida.
bootstrap.rtl.css Igual que bootstrap.css, pero para idiomas de derecha a izquierda (como árabe o hebreo).
bootstrap-grid.css Solo el sistema de rejilla, sin componentes ni estilos extra.
bootstrap-reboot.css Normaliza los estilos de los navegadores para que el diseño sea consistente.
bootstrap-utilities.css Solo utilidades de clases (márgenes, colores, etc.).

Los archivos .map sirven para depurar en el navegador y no deberías necesitar tocarlos si estás comenzando con Bootstrap.

¿Qué incluye exactamente la carpeta JS que ofrecen la funcionalidad JavaScript del sitio?

Aquí están los scripts que dan vida a los componentes interactivos como modales, menús desplegables, carruseles, tooltips, etc.

Archivo ¿Qué incluye?
bootstrap.bundle.js / .min.js Incluye Bootstrap + Popper.js (necesario para menús, tooltips, etc.). Ideal si no quieres complicarte.
bootstrap.js / .min.js Solo Bootstrap (sin Popper.js). Úsalo solo si lo incluyes por separado.
bootstrap.esm.js Versión modular para usar con importaciones en proyectos modernos.

¿Qué incluye el código fuente de Bootstrap?

Si eliges esta versión, es porque quieres personalizar Bootstrap al máximo, y entonces necesitarás herramientas como:

  • Un compilador Sass para los archivos .scss
  • Otras erramientas como Autoprefixer o Webpack

En esta versión se incluyen las siguientes carpetas e incluso algunas más:

bootstrap/
├── dist/
│   ├── css/
│   └── js/
├── site/
│   └──content/
│      └── docs/
│          └── 5.3/
│              └── examples/
├── js/
└── scss/

Aparte de las carpetas ya explicadas con anterioridad ubicadas dentro de la carpeta DIST que incluirán los ficheros base de Boostrap.

También aparecen, las carpetas SCSS y JS que son el código fuente de nuestro CSS y JavaScript propio.

La rama de SITE/CONTENT/DOCS incluye el código fuente de la documentación alojada junto a ejemplos reales de uso de Bootstrap.

Otros archivos, pueden incluir información del soporte para paquetes, información de licencia e información de desarrollo.

Preguntas Frecuentes sobre el contenido de los archivos de Bootstrap

¿Qué diferencia hay entre la carpeta dist y el código fuente?
La carpeta DIST contiene los archivos CSS y JS ya compilados y listos para usar. El código fuente SCSS y JS está pensado para desarrolladores que quieran personalizar Bootstrap antes de compilarlo.
¿Qué función cumplen los archivos .map?
Los archivos .MAP ayudan a depurar código en el navegador, permitiendo ver el código fuente original aunque uses archivos comprimidos (.min.css/.min.js). No son necesarios para producción.
¿Qué archivo debo enlazar si solo quiero usar la grilla de Bootstrap?
Puedes usar BOOTSTRAP-GRID.CSS o BOOTSTRAP-GRID-MIN.CSS si solo quieres incluir el sistema de columnas y rejilla sin componentes extra.
¿Para qué sirve BOOTSTRAP-REBOOT.CSS?
Este archivo reinicia estilos predeterminados de los navegadores para tener una base visual más coherente y limpia.
¿Puedo usar Bootstrap sin Popper.js?
Sí. Puedes enlazar bootstrap.js o bootstrap.min.js directamente, pero algunos componentes como tooltips y dropdowns no funcionarán sin Popper.js.
¿Qué contiene la carpeta SITE/CONTENT/DOCS?
Incluye el código fuente de la documentación oficial de Bootstrap, junto con ejemplos prácticos listos para revisar o adaptar.

Artículos Relacionados

Descubre más desde CIBERED

Suscríbete y recibe las últimas entradas en tu correo electrónico.

Deja un comentario