Tämä artikkeli on konekäännöksen peiliartikkeli, klikkaa tästä siirtyäksesi alkuperäiseen artikkeliin.

Näkymä: 2539|Vastaus: 0

[Bootstrap] Saat nopean yleiskatsauksen Bootstrap 5 -tiedoston sisältörakenteesta

[Kopioi linkki]
Julkaistu 25.7.2024 9.18.53 | | | |
Vaatimukset: Bootstrap auttaa meitä kapseloimaan suuren määrän css-tyylejä, meidän tarvitsee vain viitata niihin luokassa. Kun käytämme front-end UI-kehystä (esim. Angular Material UI, NG-ZORRO, Kendo UI), entä jos haluamme käyttää tyylejä Bootstrapissa? Miten voit elää rinnakkain Bootstrapin ja muiden käyttöliittymäkehysten kanssa projektissasi häiritsemättä toisiaan?

Bootstrap on tehokas ja ominaisuuksiltaan rikas käyttöliittymätyökalupakki. Rakenna mitä tahansa (prototyypistä tuotantoon) muutamassa minuutissa.

Asenna bootstrap-versio 5.3.3 npm:llä seuraavalla komennolla:

Kun kansio on asennettu, kansion node_modules\bootstrap-hakemistorakenne on seuraava:

Tilavuuden sarjanumero on AA1B-3F2F
D:.
│ LISENSSI
│ package.json
│ README.md
│  
├─dist
│ ├─css
│ │ bootstrap-grid.css
│ │ bootstrap-grid.css.kartta
│ │ bootstrap-grid.min.css
│ │ bootstrap-grid.min.css.kartta
│ │ bootstrap-grid.rtl.css
│ │ bootstrap-grid.rtl.css.kartta
│ │ 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.kartta
│ │ bootstrap-reboot.rtl.css
│ │ bootstrap-reboot.rtl.css.kartta
│ │ bootstrap-reboot.rtl.min.css
│ │ bootstrap-reboot.rtl.min.css.kartta
│ │ bootstrap-utilities.css
│ │ bootstrap-utilities.css.kartta
│ │ bootstrap-utilities.min.css
│ │ bootstrap-utilities.min.css.kartta
│ │ bootstrap-utilities.rtl.css
│ │ bootstrap-utilities.rtl.css.kartta
│ │ bootstrap-utilities.rtl.min.css
│ │ bootstrap-utilities.rtl.min.css.kartta
│ │ bootstrap.css
│ │ bootstrap.css.kartta
│ │ bootstrap.min.css
│ │ bootstrap.min.css.kartta
│ │ bootstrap.rtl.css
│ │ bootstrap.rtl.css.kartta
│ │ bootstrap.rtl.min.css
│ │ bootstrap.rtl.min.css.map
│  │
│ └─js
│ bootstrap.bundle.js
│ bootstrap.bundle.js.kartta
│ bootstrap.bundle.min.js
│ bootstrap.bundle.min.js.kartta
│ bootstrap.esm.js
│ bootstrap.esm.js.kartta
│ bootstrap.esm.min.js
│ bootstrap.esm.min.js.kartta
│ bootstrap.js
│ bootstrap.js.kartta
│ bootstrap.min.js
│ bootstrap.min.js.kartta

├─js
│ │ index.esm.js
│ │ index.umd.js
│  │
│ ├─dist
│ │ │ alert.js
│ │ │ alert.js.kartta
│ │ │ base-component.js
│ │ │ base-component.js.kartta
│ │ │ button.js
│ │ │ button.js.kartta
│ │ │ carousel.js
│ │ │ carousel.js.kartta
│ │ │ collapse.js
│ │ │ collapse.js.kartta
│ │ │ dropdown.js
│ │ │ dropdown.js.kartta
│ │ │ modal.js
│ │ │ modal.js.kartta
│ │ │ offcanvas.js
│ │ │ offcanvas.js.kartta
│ │ │ popover.js
│ │ │ popover.js.kartta
│ │ │ scrollspy.js
│ │ │ scrollspy.js.kartta
│ │ │ tab.js
│ │ │ tab.js.kartta
│ │ │ toast.js
│ │ │ toast.js.kartta
│ │ │ tooltip.js
│ │ │ tooltip.js.kartta
│  │  │
│ │ ├─dom
│ │ │ data.js
│ │ │ data.js.kartta
│ │ │ event-handler.js
│ │ │ event-handler.js.kartta
│ │ │ manipulator.js
│ │ │ manipulator.js.kartta
│ │ │ selector-engine.js
│ │ │ selector-engine.js.kartta
│  │  │
│ │ └─util
│ │ backdrop.js
│ │ backdrop.js.map
│ │ component-functions.js
│ │ component-functions.js.map
│ │ config.js
│ │ config.js.map
│ │ focustrap.js
│ │ focustrap.js.kartta
│ │ index.js
│ │ index.js.kartta
│ │ sanitizer.js
│ │ sanitizer.js.map
│ │ scrollbar.js
│ │ scrollbar.js.kartta
│ │ swipe.js
│ │ swipe.js.map
│ │ template-factory.js
│ │ template-factory.js.kartta
│  │
│ └─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
    │
    ├─muodot
    │ _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
    │
    ├─Hyödyt
    │ _api.scss
    │
    └─Myyjä
            _rfs.scss

missä dist-kansio on käännetty tiedosto, scss on js ja lähdekoodi on CSS ja JavaScript.

Käännetyn Bootstrapin css-tiedostorakenne on seuraava:



Yleisesti ottaen, oman tilanteesi mukaan, lainaa:bootstrap-utilities.min.cssbootstrap-grid.min.cssVoida.

Viittaus:Hyperlinkin kirjautuminen on näkyvissä.





Edellinen:Kaksi tai kolme asiaa Shared Memorystä
Seuraava:[Harjoittele] Käytä Dapperia SQLite-tietokantojen operointiin
Vastuuvapauslauseke:
Kaikki Code Farmer Networkin julkaisemat ohjelmistot, ohjelmamateriaalit tai artikkelit ovat tarkoitettu vain oppimis- ja tutkimustarkoituksiin; Yllä mainittua sisältöä ei saa käyttää kaupallisiin tai laittomiin tarkoituksiin, muuten käyttäjät joutuvat kantamaan kaikki seuraukset. Tämän sivuston tiedot ovat peräisin internetistä, eikä tekijänoikeuskiistat liity tähän sivustoon. Sinun tulee poistaa yllä oleva sisältö kokonaan tietokoneeltasi 24 tunnin kuluessa lataamisesta. Jos pidät ohjelmasta, tue aitoa ohjelmistoa, osta rekisteröityminen ja hanki parempia aitoja palveluita. Jos rikkomuksia ilmenee, ota meihin yhteyttä sähköpostitse.

Mail To:help@itsvse.com