This article is a mirror article of machine translation, please click here to jump to the original article.

Architect_Programmer_Code Agriculture Network»Architect › Front-end design & web › Front-end frame › Get a quick overview of the Bootstrap 5 file content structure
View: 2539|Reply: 0

[Bootstrap] Get a quick overview of the Bootstrap 5 file content structure

[Copy link]
Posted on 7/25/2024 9:18:53 AM | | | |
Requirements: Bootstrap helps us encapsulate a large number of css styles, we just need to reference them on the class. When we use a front-end UI framework (e.g., Angular Material UI, NG-ZORRO, Kendo UI), what if we want to use the styles in Bootstrap? How do you coexist with Bootstrap and other UI frameworks in your project without interfering with each other?

Bootstrap is a powerful and feature-rich front-end toolkit. Build anything (from prototype to production) in just a few minutes.

Install bootstrap version 5.3.3 using npm with the following command:

Once installed, the folder node_modules\bootstrap directory structure is as follows:

The volume serial number is 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

where the dist folder is the compiled file, scss is the js, and the source code is CSS and JavaScript.

The css file structure for compiled Bootstrap is as follows:



Generally, according to your own situation, quote:bootstrap-utilities.min.css、bootstrap-grid.min.cssCan.

Reference:The hyperlink login is visible.





Previous:Two or three things about Shared Memory
Next:[Practice] Use Dapper to operate SQLite databases

Related Posts
Disclaimer:
All software, programming materials or articles published by Code Farmer Network are only for learning and research purposes; The above content shall not be used for commercial or illegal purposes, otherwise, users shall bear all consequences. The information on this site comes from the Internet, and copyright disputes have nothing to do with this site. You must completely delete the above content from your computer within 24 hours of downloading. If you like the program, please support genuine software, purchase registration, and get better genuine services. If there is any infringement, please contact us by email.
Mail To:help@itsvse.com