Overview of Bootstrap source code directory structure

Table of contents

foreword

Bootstrap directory structure

Introduction to Bootstrap

Bootstrap compile file

CSS file | CSS file function comparison and list

JS file | JS file function comparison and list

Bootstrap source code directory | resource list

---

foreword

Bootstrap is an open source toolkit for front-end development launched by Twitter. It was developed by Twitter designers Mark Otto and Jacob Thornton and is a CSS/HTML framework. Currently, the latest version of Bootstrap is 5.3.

Bootstrap directory structure

Bootstrap will be released in two forms of precompiled version and source code every time. Below we describe the content and structure of the two forms. Note that no matter which form is used, Bootstrap's JavaScript plugin requires jQuery.

Introduction to Bootstrap

CSS is mainly the bootstrap style, and JS mainly records element operations defined by JavaScript.

bootstrap-grid: mainly the grid structure of bootstrap

bootstrap-reboot: Reboot builds on Normalize, which provides many HTML elements with a certain opinionated style using only element selectors.

Bootstrap compile file

After downloading and unzipping the BootStrap archive, you will see the following target structure and file list:

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

This is Bootstrap in its most basic form: a drop-in ready-to-use compiled file that can be used in almost any web project. Among them bootstrap.*are precompiled files (css+js). It isbootstrap.min.* a compiled and compressed file (css+js), which users can refer to according to their needs. In the program directory, there are also bootstrap.*.mapformat files, which are Source maps files, which need to be available under specific browser developer tools . The bundled JS files ( bootstrap.bundle.js and minification  bootstrap.bundle.min.js) include  Popper .

*About the Source map technology, you can click here:
What is a Source map? What is a Map file and what is its function? The Source map in JQurey uses technology to relax

CSS file | CSS file function comparison and list

Bootstrap includes options for including some or all of our compiled CSS.

document	layout	content	components	public style
bootstrap.css bootstrap.min.css bootstrap.rtl.css bootstrap.rtl.min.css	Included	Included	Included	Included
bootstrap-grid.css bootstrap-grid.rtl.css bootstrap-grid.min.css bootstrap-grid.rtl.min.css	Only works with the grid class	does not contain	does not contain	Only works with flex classes
bootstrap-utilities.css bootstrap-utilities.rtl.css bootstrap-utilities.min.css bootstrap-utilities.rtl.min.css	does not contain	does not contain	does not contain	Include
bootstrap-reboot.css bootstrap-reboot.rtl.css bootstrap-reboot.min.css bootstrap-reboot.rtl.min.css	does not contain	Only Reboot	does not contain	does not contain

JS file | JS file function comparison and list

Similarly, we can choose to include some or all compiled JavaScript.

js file	Popper	jQuery
bootstrap.bundle.js bootstrap.bundle.min.js	Include	does not contain
bootstrap.js bootstrap.min.js	does not contain	does not contain

Bootstrap source code directory | resource list

The Bootstrap source code package contains precompiled CSS and JavaScript resources, as well as source Sass, JavaScript, examples and documentation. The core structure is as follows:

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

scss/and js/is the source code for CSS and JavaScript.

dist/The folder includes all the pre-compiled download files listed above, and the general web page reads the files in the dist directory.

docs/folder is the developer folder.

examples/is example.

Other files are files that provide support for the entire BootStrap development and compilation, authorization information, and supporting documents. 

---

References

Bootstrap Directory Structure Bootstrap Documentation Network