简单了解 Bootstrap 5 文件内容结构

小渣渣

需求：Bootstrap 帮我们封装了大量的 css 样式，我们只需要在  class 上引用即可。当我们使用一个前端 UI 框架的时候（例如：Angular Material UI、NG-ZORRO、Kendo UI），如果我们想使用 Bootstrap 里面的样式怎么办呢？如何将 Bootstrap 和其它 UI 框架在项目中并存，并互不影响呢？

Bootstrap 是一款功能强大、功能丰富的前端工具包。只需几分钟即可构建任何内容（从原型到生产）。

使用 npm 安装 bootstrap 5.3.3 版本，命令如下：

登录可见。

安装完成后，文件夹 node_modules\bootstrap 目录结构如下：

卷序列号为 AA1B-3F2F
D:.
│  LICENSE
│  package.json
│  README.md
│  
├─dist
│  ├─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
│
├─js
│  │  index.esm.js
│  │  index.umd.js
│  │
│  ├─dist
│  │  │  alert.js
│  │  │  alert.js.map
│  │  │  base-component.js
│  │  │  base-component.js.map
│  │  │  button.js
│  │  │  button.js.map
│  │  │  carousel.js
│  │  │  carousel.js.map
│  │  │  collapse.js
│  │  │  collapse.js.map
│  │  │  dropdown.js
│  │  │  dropdown.js.map
│  │  │  modal.js
│  │  │  modal.js.map
│  │  │  offcanvas.js
│  │  │  offcanvas.js.map
│  │  │  popover.js
│  │  │  popover.js.map
│  │  │  scrollspy.js
│  │  │  scrollspy.js.map
│  │  │  tab.js
│  │  │  tab.js.map
│  │  │  toast.js
│  │  │  toast.js.map
│  │  │  tooltip.js
│  │  │  tooltip.js.map
│  │  │
│  │  ├─dom
│  │  │      data.js
│  │  │      data.js.map
│  │  │      event-handler.js
│  │  │      event-handler.js.map
│  │  │      manipulator.js
│  │  │      manipulator.js.map
│  │  │      selector-engine.js
│  │  │      selector-engine.js.map
│  │  │
│  │  └─util
│  │          backdrop.js
│  │          backdrop.js.map
│  │          component-functions.js
│  │          component-functions.js.map
│  │          config.js
│  │          config.js.map
│  │          focustrap.js
│  │          focustrap.js.map
│  │          index.js
│  │          index.js.map
│  │          sanitizer.js
│  │          sanitizer.js.map
│  │          scrollbar.js
│  │          scrollbar.js.map
│  │          swipe.js
│  │          swipe.js.map
│  │          template-factory.js
│  │          template-factory.js.map
│  │
│  └─src
│      │  alert.js
│      │  base-component.js
│      │  button.js
│      │  carousel.js
│      │  collapse.js
│      │  dropdown.js
│      │  modal.js
│      │  offcanvas.js
│      │  popover.js
│      │  scrollspy.js
│      │  tab.js
│      │  toast.js
│      │  tooltip.js
│      │
│      ├─dom
│      │      data.js
│      │      event-handler.js
│      │      manipulator.js
│      │      selector-engine.js
│      │
│      └─util
│              backdrop.js
│              component-functions.js
│              config.js
│              focustrap.js
│              index.js
│              sanitizer.js
│              scrollbar.js
│              swipe.js
│              template-factory.js
│
└─scss
    │  bootstrap-grid.scss
    │  bootstrap-reboot.scss
    │  bootstrap-utilities.scss
    │  bootstrap.scss
    │  _accordion.scss
    │  _alert.scss
    │  _badge.scss
    │  _breadcrumb.scss
    │  _button-group.scss
    │  _buttons.scss
    │  _card.scss
    │  _carousel.scss
    │  _close.scss
    │  _containers.scss
    │  _dropdown.scss
    │  _forms.scss
    │  _functions.scss
    │  _grid.scss
    │  _helpers.scss
    │  _images.scss
    │  _list-group.scss
    │  _maps.scss
    │  _mixins.scss
    │  _modal.scss
    │  _nav.scss
    │  _navbar.scss
    │  _offcanvas.scss
    │  _pagination.scss
    │  _placeholders.scss
    │  _popover.scss
    │  _progress.scss
    │  _reboot.scss
    │  _root.scss
    │  _spinners.scss
    │  _tables.scss
    │  _toasts.scss
    │  _tooltip.scss
    │  _transitions.scss
    │  _type.scss
    │  _utilities.scss
    │  _variables-dark.scss
    │  _variables.scss
    │
    ├─forms
    │      _floating-labels.scss
    │      _form-check.scss
    │      _form-control.scss
    │      _form-range.scss
    │      _form-select.scss
    │      _form-text.scss
    │      _input-group.scss
    │      _labels.scss
    │      _validation.scss
    │
    ├─helpers
    │      _clearfix.scss
    │      _color-bg.scss
    │      _colored-links.scss
    │      _focus-ring.scss
    │      _icon-link.scss
    │      _position.scss
    │      _ratio.scss
    │      _stacks.scss
    │      _stretched-link.scss
    │      _text-truncation.scss
    │      _visually-hidden.scss
    │      _vr.scss
    │
    ├─mixins
    │      _alert.scss
    │      _backdrop.scss
    │      _banner.scss
    │      _border-radius.scss
    │      _box-shadow.scss
    │      _breakpoints.scss
    │      _buttons.scss
    │      _caret.scss
    │      _clearfix.scss
    │      _color-mode.scss
    │      _color-scheme.scss
    │      _container.scss
    │      _deprecate.scss
    │      _forms.scss
    │      _gradients.scss
    │      _grid.scss
    │      _image.scss
    │      _list-group.scss
    │      _lists.scss
    │      _pagination.scss
    │      _reset-text.scss
    │      _resize.scss
    │      _table-variants.scss
    │      _text-truncate.scss
    │      _transition.scss
    │      _utilities.scss
    │      _visually-hidden.scss
    │
    ├─utilities
    │      _api.scss
    │
    └─vendor
            _rfs.scss

其中 dist 文件夹是编译后的文件，scss 是 js 是 CSS 和 JavaScript 的源代码。

关于编译的 Bootstrap 的 css 文件结构如下：



一般根据自己情况，引用：bootstrap-utilities.min.css、bootstrap-grid.min.css 即可。

参考：超链接登录可见。