Šis raksts ir mašīntulkošanas spoguļraksts, lūdzu, noklikšķiniet šeit, lai pārietu uz oriģinālo rakstu.

Skats: 2539|Atbildi: 0

[Bootstrap] Iegūstiet ātru pārskatu par Bootstrap 5 failu satura struktūru

[Kopēt saiti]
Publicēts 25.07.2024 09:18:53 | | | |
Prasības: Bootstrap palīdz mums iekapsulēt lielu skaitu css stilu, mums vienkārši jāatsaucas uz tiem klasē. Ja mēs izmantojam priekšgala lietotāja interfeisa ietvaru (piemēram, Angular Material UI, NG-ZORRO, Kendo UI), ko darīt, ja mēs vēlamies izmantot Bootstrap stilus? Kā jūs savā projektā sadzīvojat ar Bootstrap un citiem lietotāja interfeisa ietvariem, netraucējot viens otru?

Bootstrap ir jaudīgs un funkcijām bagāts priekšgala rīku komplekts. Izveidojiet jebko (no prototipa līdz ražošanai) tikai dažās minūtēs.

Instalējiet bootstrap versiju 5.3.3, izmantojot npm ar šādu komandu:

Pēc instalēšanas mapes node_modules\bootstrap direktoriju struktūra ir šāda:

Sējuma sērijas numurs ir AA1B-3F2F
D:.
│ LICENCE
│ 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.karte
│ bootstrap.bundle.min.js
│ bootstrap.bundle.min.js.karte
│ bootstrap.esm.js
│ bootstrap.esm.js.karte
│ bootstrap.esm.min.js
│ bootstrap.esm.min.js.karte
│ bootstrap.js
│ bootstrap.js.karte
│ bootstrap.min.js
│ bootstrap.min.js.karte

├─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-grupa.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-tumšs.scss
    │ _variables.scss
    │
    ├─Veidlapas
    │ _floating-labels.scss
    │ _form-check.scss
    │ _form-kontrole.scss
    │ _form-diapazons.scss
    │ _form-select.scss
    │ _form-teksts.scss
    │ _input-grupa.scss
    │ _labels.scss
    │ _validation.scss
    │
    ├─palīgi
    │ _clearfix.scss
    │ _color-bg.scss
    │ _colored-links.scss
    │ _focus-gredzens.scss
    │ _icon-link.scss
    │ _position.scss
    │ _ratio.scss
    │ _stacks.scss
    │ _stretched-link.scss
    │ _text-truncation.scss
    │ _visually-hidden.scss
    │ _vr.scss
    │
    ├─miksīni
    │ _alert.scss
    │ _backdrop.scss
    │ _banner.scss
    │ _border rādiuss.scss
    │ _box-ēna.scss
    │ _breakpoints.scss
    │ _buttons.scss
    │ _caret.scss
    │ _clearfix.scss
    │ _color-mode.scss
    │ _color-shēma.scss
    │ _container.scss
    │ _deprecate.scss
    │ _forms.scss
    │ _gradients.scss
    │ _grid.scss
    │ _image.scss
    │ _list-group.scss
    │ _lists.scss
    │ _pagination.scss
    │ _reset-teksts.scss
    │ _resize.scss
    │ _table-variants.scss
    │ _text-truncate.scss
    │ _transition.scss
    │ _utilities.scss
    │ _visually-hidden.scss
    │
    ├─komunālie pakalpojumi
    │ _api.scss
    │
    └─pārdevējs
            _rfs.scss

kur dist mape ir kompilētais fails, scss ir js un avota kods ir CSS un JavaScript.

Kompilētā Bootstrap css faila struktūra ir šāda:



Parasti, atbilstoši jūsu situācijai, citējiet:bootstrap-utilities.min.cssbootstrap-grid.min.cssVar.

Atsauce:Hipersaites pieteikšanās ir redzama.





Iepriekšējo:Divas vai trīs lietas par koplietojamo atmiņu
Nākamo:[Prakse] Dapper izmantošana SQLite datu bāzu darbībai
Atruna:
Visa programmatūra, programmēšanas materiāli vai raksti, ko publicē Code Farmer Network, ir paredzēti tikai mācību un pētniecības mērķiem; Iepriekš minēto saturu nedrīkst izmantot komerciāliem vai nelikumīgiem mērķiem, pretējā gadījumā lietotājiem ir jāuzņemas visas sekas. Informācija šajā vietnē nāk no interneta, un autortiesību strīdiem nav nekāda sakara ar šo vietni. Iepriekš minētais saturs ir pilnībā jāizdzēš no datora 24 stundu laikā pēc lejupielādes. Ja jums patīk programma, lūdzu, atbalstiet oriģinālu programmatūru, iegādājieties reģistrāciju un iegūstiet labākus oriģinālus pakalpojumus. Ja ir kādi pārkāpumi, lūdzu, sazinieties ar mums pa e-pastu.

Mail To:help@itsvse.com