Acest articol este un articol oglindă al traducerii automate, vă rugăm să faceți clic aici pentru a sări la articolul original.

Vedere: 2539|Răspunde: 0

[Bootstrap] Obține o scurtă prezentare generală a structurii de conținut a fișierelor Bootstrap 5

[Copiază linkul]
Postat pe 25.07.2024 09:18:53 | | | |
Cerințe: Bootstrap ne ajută să cuprindem un număr mare de stiluri CSS, trebuie doar să le menționăm în clasă. Când folosim un framework de interfață front-end (de exemplu, Angular Material INTERFACE, NG-ZORRO, Kendo UI), ce se întâmplă dacă vrem să folosim stilurile din Bootstrap? Cum reușiți să coexistați cu Bootstrap și alte framework-uri UI din proiectul vostru fără să vă interferați între ele?

Bootstrap este un set de unelte front-end puternic și bogat în funcții. Construiește orice (de la prototip la producție) în doar câteva minute.

Instalează bootstrap versiunea 5.3.3 folosind npm cu următoarea comandă:

Odată instalat, structura directorului folder node_modules\bootstrap este următoarea:

Numărul de serie al volumului este AA1B-3F2F
D:.
│ LICENȚĂ
│ package.json
│ README.md
│  
├─dist
│ ├─css
│ │ bootstrap-grid.css
│ │ bootstrap-grid.css.hartă
│ │ bootstrap-grid.min.css
│ │ bootstrap-grid.min.css.hartă
│ │ bootstrap-grid.rtl.css
│ │ bootstrap-grid.rtl.css.hartă
│ │ bootstrap-grid.rtl.min.css
│ │ bootstrap-grid.rtl.min.css.hartă
│ │ bootstrap-reboot.css
│ │ bootstrap-reboot.css.hartă
│ │ bootstrap-reboot.min.css
│ │ bootstrap-reboot.min.css.hartă
│ │ bootstrap-reboot.rtl.css
│ │ bootstrap-reboot.rtl.css.hartă
│ │ bootstrap-reboot.rtl.min.css
│ │ bootstrap-reboot.rtl.min.css.hartă
│ │ bootstrap-utilities.css
│ │ bootstrap-utilities.css.hartă
│ │ bootstrap-utilities.min.css
│ │ bootstrap-utilities.min.css.hartă
│ │ bootstrap-utilities.rtl.css
│ │ bootstrap-utilities.rtl.css.hartă
│ │ bootstrap-utilities.rtl.min.css
│ │ bootstrap-utilities.rtl.min.css.hartă
│ │ bootstrap.css
│ │ bootstrap.css.hartă
│ │ bootstrap.min.css
│ │ bootstrap.min.css.hartă
│ │ bootstrap.rtl.css
│ │ bootstrap.rtl.css.hartă
│ │ bootstrap.rtl.min.css
│ │ bootstrap.rtl.min.css.hartă
│  │
│ └─js
│ bootstrap.bundle.js
│ bootstrap.bundle.js.hartă
│ bootstrap.bundle.min.js
│ bootstrap.bundle.min.js.hartă
│ bootstrap.esm.js
│ bootstrap.esm.js.hartă
│ bootstrap.esm.min.js
│ bootstrap.esm.min.js.hartă
│ bootstrap.js
│ bootstrap.js.hartă
│ bootstrap.min.js
│ bootstrap.min.js.hartă

├─js
│ │ index.esm.js
│ │ index.umd.js
│  │
│ ├─dist
│ │ │ alert.js
│ │ │ alert.js.hartă
│ │ │ base-component.js
│ │ │ base-component.js.hartă
│ │ │ button.js
│ │ │ button.js.hartă
│ │ │ carousel.js
│ │ │ carousel.js.hartă
│ │ │ collapse.js
│ │ │ collapse.js.hartă
│ │ │ dropdown.js
│ │ │ dropdown.js.hartă
│ │ │ modal.js
│ │ │ modal.js.hartă
│ │ │ offcanvas.js
│ │ │ offcanvas.js.hartă
│ │ │ popover.js
│ │ │ popover.js.hartă
│ │ │ scrollspy.js
│ │ │ scrollspy.js.hartă
│ │ │ tab.js
│ │ │ tab.js.hartă
│ │ │ toast.js
│ │ │ toast.js.hartă
│ │ │ tooltip.js
│ │ │ tooltip.js.hartă
│  │  │
│ │ ├─dom
│ │ │ data.js
│ │ │ data.js.hartă
│ │ │ event-handler.js
│ │ │ event-handler.js.hartă
│ │ │ manipulator.js
│ │ │ manipulator.js.hartă
│ │ │ selector-engine.js
│ │ │ selector-engine.js.hartă
│  │  │
│ │ └─util
│ │ backdrop.js
│ │ backdrop.js.hartă
│ │ component-functions.js
│ │ component-functions.js.hartă
│ │ config.js
│ │ config.js.hartă
│ │ focustrap.js
│ │ focustrap.js.hartă
│ │ index.js
│ │ index.js.hartă
│ │ sanitizer.js
│ │ sanitizer.js.hartă
│ │ scrollbar.js
│ │ scrollbar.js.hartă
│ │ swipe.js
│ │ swipe.js.hartă
│ │ template-factory.js
│ │ template-factory.js.hartă
│  │
│ └─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
    │
    ├─forme
    │ _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
    │
    ├─ajutoare
    │ _clearfix.scss
    │ _color-bg.scss
    │ _colored-links.scss
    │ _focus-ring.scss
    │ _icon-link.scss
    │ _position.scss
    │ _ratio.scss
    │ _stacks.scss
    │ _stretched-link.scss
    │ _text-trunchiere.scss
    │ _visually-hidden.scss
    │ _vr.scss
    │
    ├─mixine
    │ _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
    │
    ├─utilități
    │ _api.scss
    │
    └─Vânzător
            _rfs.scss

unde folderul dist este fișierul compilat, scss este js, iar codul sursă este CSS și JavaScript.

Structura fișierelor css pentru Bootstrap compilat este următoarea:



În general, în funcție de situația dumneavoastră, citez:bootstrap-utilities.min.cssbootstrap-grid.min.cssPutea.

Referință:Autentificarea cu hyperlink este vizibilă.





Precedent:Două sau trei lucruri despre Shared Memory
Următor:[Practică] Folosește Dapper pentru a opera baze de date SQLite
Disclaimer:
Tot software-ul, materialele de programare sau articolele publicate de Code Farmer Network sunt destinate exclusiv scopurilor de învățare și cercetare; Conținutul de mai sus nu va fi folosit în scopuri comerciale sau ilegale, altfel utilizatorii vor suporta toate consecințele. Informațiile de pe acest site provin de pe Internet, iar disputele privind drepturile de autor nu au legătură cu acest site. Trebuie să ștergi complet conținutul de mai sus de pe calculatorul tău în termen de 24 de ore de la descărcare. Dacă îți place programul, te rugăm să susții software-ul autentic, să cumperi înregistrarea și să primești servicii autentice mai bune. Dacă există vreo încălcare, vă rugăm să ne contactați prin e-mail.

Mail To:help@itsvse.com