Denne artikkelen er en speilartikkel om maskinoversettelse, vennligst klikk her for å hoppe til originalartikkelen.

Utsikt: 2539|Svare: 0

[Bootstrap] Få en rask oversikt over Bootstrap 5s filinnholdsstruktur

[Kopier lenke]
Publisert på 25.07.2024 09:18:53 | | | |
Krav: Bootstrap hjelper oss å innkapsle et stort antall CSS-stiler, vi trenger bare å referere til dem i klassen. Når vi bruker et front-end UI-rammeverk (f.eks. Angular Material UI, NG-ZORRO, Kendo UI), hva om vi vil bruke stilene i Bootstrap? Hvordan sameksisterer dere med Bootstrap og andre UI-rammeverk i prosjektet deres uten å forstyrre hverandre?

Bootstrap er et kraftig og funksjonsrikt frontend-verktøysett. Bygg hva som helst (fra prototype til produksjon) på bare noen få minutter.

Installer oppstartsversjon 5.3.3 ved å bruke npm med følgende kommando:

Når den er installert, er mappen node_modules\bootstrap-mappen som følger:

Volumets serienummer er AA1B-3F2F
D:.
│ LISENS
│ 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
    │
    ├─former
    │ _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
    │
    ├─Hjelpere
    │ _clearfix.scss
    │ _color-bg.scss
    │ _colored-links.scss
    │ _focus-ring.scss
    │ _icon-link.scss
    │ _position.scss
    │ _ratio.scss
    │ _stacks.scss
    │ _stretched-link.scss
    │ _text-trunkering.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
    │
    ├─nytter
    │ _api.scss
    │
    └─leverandør
            _rfs.scss

hvor dist-mappen er den kompilerte filen, scss er js, og kildekoden er CSS og JavaScript.

CSS-filstrukturen for kompilert Bootstrap er som følger:



Generelt, avhengig av din egen situasjon, sitat:bootstrap-utilities.min.cssbootstrap-grid.min.cssBoks.

Referanse:Innloggingen med hyperkoblingen er synlig.





Foregående:To eller tre ting om delt minne
Neste:[Øvelse] Bruk Dapper til å drive SQLite-databaser
Ansvarsfraskrivelse:
All programvare, programmeringsmateriell eller artikler publisert av Code Farmer Network er kun for lærings- og forskningsformål; Innholdet ovenfor skal ikke brukes til kommersielle eller ulovlige formål, ellers skal brukerne bære alle konsekvenser. Informasjonen på dette nettstedet kommer fra Internett, og opphavsrettstvister har ingenting med dette nettstedet å gjøre. Du må fullstendig slette innholdet ovenfor fra datamaskinen din innen 24 timer etter nedlasting. Hvis du liker programmet, vennligst støtt ekte programvare, kjøp registrering, og få bedre ekte tjenester. Hvis det foreligger noen krenkelse, vennligst kontakt oss på e-post.

Mail To:help@itsvse.com