Αυτό το άρθρο είναι ένα άρθρο καθρέφτη της αυτόματης μετάφρασης, κάντε κλικ εδώ για να μεταβείτε στο αρχικό άρθρο.

Άποψη: 2539|Απάντηση: 0

[Bootstrap] Δείτε μια γρήγορη επισκόπηση της δομής περιεχομένου του αρχείου Bootstrap 5

[Αντιγραφή συνδέσμου]
Δημοσιεύτηκε στις 25/7/2024 9:18:53 π.μ. | | | |
απαιτήσεις: Το Bootstrap μας βοηθά να ενσωματώσουμε έναν μεγάλο αριθμό στυλ css, απλά πρέπει να τα αναφέρουμε στην κλάση. Όταν χρησιμοποιούμε ένα πλαίσιο διεπαφής χρήστη (π.χ. Angular Material UI, NG-ZORRO, Kendo UI), τι γίνεται αν θέλουμε να χρησιμοποιήσουμε τα στυλ στο Bootstrap; Πώς συνυπάρχετε με το Bootstrap και άλλα πλαίσια διεπαφής χρήστη στο έργο σας χωρίς να παρεμβαίνετε μεταξύ τους;

Το Bootstrap είναι μια ισχυρή και πλούσια σε χαρακτηριστικά εργαλειοθήκη front-end. Κατασκευάστε οτιδήποτε (από πρωτότυπο μέχρι παραγωγή) μέσα σε λίγα μόνο λεπτά.

Εγκαταστήστε το bootstrap έκδοση 5.3.3 χρησιμοποιώντας npm με την ακόλουθη εντολή:

Μόλις εγκατασταθεί, η δομή καταλόγου φακέλου node_modules\bootstrap έχει ως εξής:

Ο σειριακός αριθμός τόμου είναι AA1B-3F2F
D:.
│ ΑΔΕΙΑ
│ package.json
│ README.md
│  
├─dist
│ ├─css
│ │ bootstrap-grid.css
│ │ bootstrap-grid.css.χάρτης
│ │ bootstrap-grid.min.css
│ │ bootstrap-grid.min.css.χάρτης
│ │ bootstrap-grid.rtl.css
│ │ bootstrap-grid.rtl.css.χάρτης
│ │ bootstrap-grid.rtl.min.css
│ │ bootstrap-grid.rtl.min.css.χάρτης
│ │ bootstrap-reboot.css
│ │ bootstrap-reboot.css.χάρτης
│ │ bootstrap-reboot.min.css
│ │ bootstrap-reboot.min.css.χάρτης
│ │ bootstrap-reboot.rtl.css
│ │ bootstrap-reboot.rtl.css.χάρτης
│ │ bootstrap-reboot.rtl.min.css
│ │ bootstrap-reboot.rtl.min.css.χάρτης
│ │ bootstrap-utilities.css
│ │ bootstrap-utilities.css.χάρτης
│ │ bootstrap-utilities.min.css
│ │ bootstrap-utilities.min.css.χάρτης
│ │ bootstrap-utilities.rtl.css
│ │ bootstrap-utilities.rtl.css.χάρτης
│ │ bootstrap-utilities.rtl.min.css
│ │ bootstrap-utilities.rtl.min.css.χάρτης
│ │ bootstrap.css
│ │ bootstrap.css.χάρτης
│ │ bootstrap.min.css
│ │ bootstrap.min.css.χάρτης
│ │ bootstrap.rtl.css
│ │ bootstrap.rtl.css.χάρτης
│ │ bootstrap.rtl.min.css
│ │ bootstrap.rtl.min.css.χάρτης
│  │
│ └─js
│ bootstrap.bundle.js
│ bootstrap.bundle.js.χάρτης
│ bootstrap.bundle.min.js
│ bootstrap.bundle.min.js.χάρτης
│ bootstrap.esm.js
│ bootstrap.esm.js.χάρτης
│ bootstrap.esm.min.js
│ bootstrap.esm.min.js.χάρτης
│ bootstrap.js
│ bootstrap.js.χάρτης
│ bootstrap.min.js
│ bootstrap.min.js.χάρτης

├─js
│ │ index.esm.js
│ │ index.umd.js
│  │
│ ├─dist
│ │ │ alert.js
│ │ │ alert.js.χάρτης
│ │ │ base-component.js
│ │ │ base-component.js.χάρτης
│ │ │ button.js
│ │ │ button.js.χάρτης
│ │ │ carousel.js
│ │ │ carousel.js.χάρτης
│ │ │ collapse.js
│ │ │ collapse.js.χάρτης
│ │ │ dropdown.js
│ │ │ dropdown.js.χάρτης
│ │ │ modal.js
│ │ │ modal.js.χάρτης
│ │ │ offcanvas.js
│ │ │ offcanvas.js.χάρτης
│ │ │ popover.js
│ │ │ popover.js.χάρτης
│ │ │ scrollspy.js
│ │ │ scrollspy.js.χάρτης
│ │ │ tab.js
│ │ │ tab.js.χάρτης
│ │ │ toast.js
│ │ │ toast.js.χάρτης
│ │ │ tooltip.js
│ │ │ tooltip.js.χάρτης
│  │  │
│ │ ├─dom
│ │ │ data.js
│ │ │ data.js.χάρτης
│ │ │ event-handler.js
│ │ │ event-handler.js.χάρτης
│ │ │ manipulator.js
│ │ │ manipulator.js.χάρτης
│ │ │ selector-engine.js
│ │ │ selector-engine.js.χάρτης
│  │  │
│ │ └─util
│ │ backdrop.js
│ │ backdrop.js.χάρτης
│ │ component-functions.js
│ │ component-functions.js.χάρτης
│ │ config.js
│ │ config.js.χάρτης
│ │ focustrap.js
│ │ focustrap.js.χάρτης
│ │ index.js
│ │ index.js.χάρτης
│ │ sanitizer.js
│ │ sanitizer.js.χάρτης
│ │ scrollbar.js
│ │ scrollbar.js.χάρτης
│ │ swipe.js
│ │ swipe.js.χάρτης
│ │ template-factory.js
│ │ template-factory.js.χάρτης
│  │
│ └─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
    │
    ├─Έντυπα
    │ _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
    │
    ├─βοηθοί
    │ _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
    │
    ├─Μίξεις
    │ _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-παραλλαγές.scss
    │ _text-truncate.scss
    │ _transition.scss
    │ _utilities.scss
    │ _visually-hidden.scss
    │
    ├─Βοηθητικά προγράμματα
    │ _api.scss
    │
    └─Πωλητής
            _rfs.scss

όπου ο φάκελος dist είναι το μεταγλωττισμένο αρχείο, το scss είναι το js και ο πηγαίος κώδικας είναι CSS και JavaScript.

Η δομή του αρχείου css για το μεταγλωττισμένο Bootstrap έχει ως εξής:



Γενικά, ανάλογα με τη δική σας κατάσταση, παραθέστε:bootstrap-utilities.min.cssbootstrap-grid.min.cssΜπορώ.

Αναφορά:Η σύνδεση με υπερσύνδεσμο είναι ορατή.





Προηγούμενος:Δύο ή τρία πράγματα σχετικά με την κοινόχρηστη μνήμη
Επόμενος:[Πρακτική] Χρησιμοποιήστε το Dapper για να χειριστείτε βάσεις δεδομένων SQLite
Αποκήρυξη:
Όλο το λογισμικό, το υλικό προγραμματισμού ή τα άρθρα που δημοσιεύονται από το Code Farmer Network προορίζονται μόνο για μαθησιακούς και ερευνητικούς σκοπούς. Το παραπάνω περιεχόμενο δεν θα χρησιμοποιηθεί για εμπορικούς ή παράνομους σκοπούς, άλλως οι χρήστες θα υποστούν όλες τις συνέπειες. Οι πληροφορίες σε αυτόν τον ιστότοπο προέρχονται από το Διαδίκτυο και οι διαφορές πνευματικών δικαιωμάτων δεν έχουν καμία σχέση με αυτόν τον ιστότοπο. Πρέπει να διαγράψετε εντελώς το παραπάνω περιεχόμενο από τον υπολογιστή σας εντός 24 ωρών από τη λήψη. Εάν σας αρέσει το πρόγραμμα, υποστηρίξτε γνήσιο λογισμικό, αγοράστε εγγραφή και λάβετε καλύτερες γνήσιες υπηρεσίες. Εάν υπάρχει οποιαδήποτε παραβίαση, επικοινωνήστε μαζί μας μέσω email.

Mail To:help@itsvse.com