Questo articolo è un articolo speculare di traduzione automatica, clicca qui per saltare all'articolo originale.

Vista: 2539|Risposta: 0

[Bootstrap] Ottieni una rapida panoramica della struttura dei contenuti dei file Bootstrap 5

[Copiato link]
Pubblicato su 25/07/2024 09:18:53 | | | |
Requisiti: Bootstrap ci aiuta a racchiudere un gran numero di stili CSS, basta che ci facciamo riferimento nella classe. Quando usiamo un framework di interfaccia front-end (ad esempio, Angular Material UI, NG-ZORRO, Kendo UI), cosa succede se vogliamo usare gli stili in Bootstrap? Come coesistere con Bootstrap e altri framework UI nel tuo progetto senza interferire a vicenda?

Bootstrap è un potente toolkit front-end ricco di funzionalità. Costruisci qualsiasi cosa (dal prototipo alla produzione) in pochi minuti.

Installa la versione di bootstrap 5.3.3 usando npm con il seguente comando:

Una volta installata, la struttura della cartella node_modules\bootstrap è la seguente:

Il numero di serie del volume è AA1B-3F2F
D:.
│ LICENZA
│ package.json
│ README.md
│  
├─dist
│ ├─css
│ │ bootstrap-grid.css
│ │ bootstrap-grid.css.map
│ │ bootstrap-grid.min.css
│ │ bootstrap-grid.min.css.mappa
│ │ bootstrap-grid.rtl.css
│ │ bootstrap-grid.rtl.css.mappa
│ │ bootstrap-grid.rtl.min.css
│ │ bootstrap-grid.rtl.min.css.mappa
│ │ bootstrap-reboot.css
│ │ bootstrap-reboot.css.map
│ │ bootstrap-reboot.min.css
│ │ bootstrap-reboot.min.css.mappa
│ │ bootstrap-reboot.rtl.css
│ │ bootstrap-reboot.rtl.css.mappa
│ │ bootstrap-reboot.rtl.min.css
│ │ bootstrap-reboot.rtl.min.css.mappa
│ │ bootstrap-utilities.css
│ │ bootstrap-utilities.css.mappa
│ │ bootstrap-utilities.min.css
│ │ bootstrap-utilities.min.css.mappa
│ │ bootstrap-utilities.rtl.css
│ │ bootstrap-utilities.rtl.css.mappa
│ │ bootstrap-utilities.rtl.min.css
│ │ bootstrap-utilities.rtl.min.css.mappa
│ │ bootstrap.css
│ │ bootstrap.css.mappa
│ │ bootstrap.min.css
│ │ bootstrap.min.css.mappa
│ │ 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.mappa
│ │ │ collapse.js
│ │ │ collapse.js.mappa
│ │ │ dropdown.js
│ │ │ dropdown.js.mappa
│ │ │ modal.js
│ │ │ modal.js.mappa
│ │ │ offcanvas.js
│ │ │ offcanvas.js.map
│ │ │ popover.js
│ │ │ popover.js.mappa
│ │ │ 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.mappa
│ │ │ 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.mappa
│ │ config.js
│ │ config.js.map
│ │ focustrap.js
│ │ focustrap.js.mappa
│ │ index.js
│ │ index.js.mappa
│ │ 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
    │
    ├─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
    │
    ├─aiutanti
    │ _clearfix.scss
    │ _color-bg.scss
    │ _colored-links.scss
    │ _focus-ring.scss
    │ _icon-link.scss
    │ _position.scss
    │ _ratio.scss
    │ _stacks.scss
    │ _stretched-link.scss
    │ _text-troncamento.scss
    │ _visually-hidden.scss
    │ _vr.scss
    │
    ├─mixin
    │ _alert.scss
    │ _backdrop.scss
    │ _banner.scss
    │ _border-raggio.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
    │
    ├─Utenze
    │ _api.scss
    │
    └─Venditore
            _rfs.scss

dove la cartella dist è il file compilato, scss è il js e il codice sorgente è CSS e JavaScript.

La struttura dei file css per Bootstrap compilato è la seguente:



In generale, a seconda della tua situazione, cito:bootstrap-utilities.min.cssbootstrap-grid.min.cssPotere.

Riferimento:Il login del link ipertestuale è visibile.





Precedente:Due o tre cose su Shared Memory
Prossimo:[Pratica] Usa Dapper per gestire database SQLite
Disconoscimento:
Tutto il software, i materiali di programmazione o gli articoli pubblicati dalla Code Farmer Network sono destinati esclusivamente all'apprendimento e alla ricerca; I contenuti sopra elencati non devono essere utilizzati per scopi commerciali o illegali, altrimenti gli utenti dovranno sostenere tutte le conseguenze. Le informazioni su questo sito provengono da Internet, e le controversie sul copyright non hanno nulla a che fare con questo sito. Devi eliminare completamente i contenuti sopra elencati dal tuo computer entro 24 ore dal download. Se ti piace il programma, ti preghiamo di supportare software autentico, acquistare la registrazione e ottenere servizi autentici migliori. In caso di violazione, vi preghiamo di contattarci via email.

Mail To:help@itsvse.com