Cet article est un article miroir de traduction automatique, veuillez cliquer ici pour accéder à l’article original.

Vue: 2539|Répondre: 0

[Bootstrap] Obtenez un aperçu rapide de la structure du contenu des fichiers Bootstrap 5

[Copié le lien]
Publié sur 25/07/2024 09:18:53 | | | |
Exigences : Bootstrap nous aide à englober un grand nombre de styles CSS, il suffit de les référencer dans le cours. Lorsque nous utilisons un framework d’interface utilisateur front-end (par exemple, Angular Material INTERFACE, NG-ZORRO, KENDO), que se passe-t-il si nous voulons utiliser les styles dans Bootstrap ? Comment coexistez-vous avec Bootstrap et d’autres frameworks d’interface utilisateur dans votre projet sans interférer les uns avec les autres ?

Bootstrap est une boîte à outils front-end puissante et riche en fonctionnalités. Construis n’importe quoi (du prototype à la production) en seulement quelques minutes.

Installez la version bootstrap 5.3.3 en utilisant npm avec la commande suivante :

Une fois installé, la structure des dossiers node_modules\bootstrap est la suivante :

Le numéro de série du volume est AA1B-3F2F
D:.
│ LICENCE
│ package.json
│ README.md
│  
├─dist
│ ├─css
│ │ bootstrap-grid.css
│ │ bootstrap-grid.css.carte
│ │ bootstrap-grid.min.css
│ │ bootstrap-grid.min.css.carte
│ │ bootstrap-grid.rtl.css
│ │ bootstrap-grid.rtl.css.carte
│ │ bootstrap-grid.rtl.min.css
│ │ bootstrap-grid.rtl.min.css.carte
│ │ bootstrap-reboot.css
│ │ bootstrap-reboot.css.carte
│ │ bootstrap-reboot.min.css
│ │ bootstrap-reboot.min.css.carte
│ │ bootstrap-reboot.rtl.css
│ │ bootstrap-reboot.rtl.css.carte
│ │ bootstrap-reboot.rtl.min.css
│ │ bootstrap-reboot.rtl.min.css.carte
│ │ bootstrap-utilities.css
│ │ bootstrap-utilities.css.carte
│ │ bootstrap-utilities.min.css
│ │ bootstrap-utilities.min.css.carte
│ │ bootstrap-utilities.rtl.css
│ │ bootstrap-utilities.rtl.css.carte
│ │ bootstrap-utilities.rtl.min.css
│ │ bootstrap-utilities.rtl.min.css.carte
│ │ bootstrap.css
│ │ bootstrap.css.carte
│ │ bootstrap.min.css
│ │ bootstrap.min.css.carte
│ │ bootstrap.rtl.css
│ │ bootstrap.rtl.css.carte
│ │ bootstrap.rtl.min.css
│ │ bootstrap.rtl.min.css.carte
│  │
│ └─js
│ bootstrap.bundle.js
│ bootstrap.bundle.js.carte
│ bootstrap.bundle.min.js
│ bootstrap.bundle.min.js.map
│ bootstrap.esm.js
│ bootstrap.esm.js.carte
│ bootstrap.esm.min.js
│ bootstrap.esm.min.js.map
│ bootstrap.js
│ bootstrap.js.carte
│ bootstrap.min.js
│ bootstrap.min.js.carte

├─js
│ │ index.esm.js
│ │ index.umd.js
│  │
│ ├─dist
│ │ │ alert.js
│ │ │ alert.js.carte
│ │ │ base-component.js
│ │ │ base-component.js.carte
│ │ │ button.js
│ │ │ button.js.carte
│ │ │ carousel.js
│ │ │ carousel.js.carte
│ │ │ collapse.js
│ │ │ collapse.js.carte
│ │ │ dropdown.js
│ │ │ dropdown.js.carte
│ │ │ modal.js
│ │ │ modal.js.carte
│ │ │ offcanvas.js
│ │ │ offcanvas.js.carte
│ │ │ popover.js
│ │ │ popover.js.carte
│ │ │ scrollspy.js
│ │ │ scrollspy.js.carte
│ │ │ tab.js
│ │ │ tab.js.carte
│ │ │ toast.js
│ │ │ toast.js.carte
│ │ │ tooltip.js
│ │ │ tooltip.js.carte
│  │  │
│ │ ├─dom
│ │ │ data.js
│ │ │ data.js.carte
│ │ │ event-handler.js
│ │ │ event-handler.js.carte
│ │ │ manipulator.js
│ │ │ manipulator.js.carte
│ │ │ selector-engine.js
│ │ │ selector-engine.js.carte
│  │  │
│ │ └─util
│ │ backdrop.js
│ │ backdrop.js.carte
│ │ component-functions.js
│ │ component-functions.js.carte
│ │ config.js
│ │ config.js.carte
│ │ focustrap.js
│ │ focustrap.js.carte
│ │ index.js
│ │ index.js.carte
│ │ sanitizer.js
│ │ sanitizer.js.carte
│ │ scrollbar.js
│ │ scrollbar.js.carte
│ │ swipe.js
│ │ swipe.js.carte
│ │ template-factory.js
│ │ template-factory.js.carte
│  │
│ └─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-utilitaires.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
    │
    ├─formes
    │ _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
    │
    ├─Aides
    │ _clearfix.scss
    │ _color-bg.scss
    │ _colored-links.scss
    │ _focus-ring.scss
    │ _icon-link.scss
    │ _position.scss
    │ _ratio.scss
    │ _stacks.scss
    │ _stretched-link.scss
    │ _text-troncature.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
    │
    ├─Utilités
    │ _api.scss
    │
    └─ vendeur
            _rfs.scss

où le dossier dist est le fichier compilé, scss est le js, et le code source est CSS et JavaScript.

La structure des fichiers css pour Bootstrap compilé est la suivante :



En général, selon votre propre situation, citez :bootstrap-utilities.min.cssbootstrap-grid.min.cssPouvoir.

Référence:La connexion hyperlientérée est visible.





Précédent:Deux ou trois choses à propos de Shared Memory
Prochain:[Entraînement] Utilisez Dapper pour exploiter des bases de données SQLite
Démenti:
Tous les logiciels, supports de programmation ou articles publiés par Code Farmer Network sont uniquement destinés à l’apprentissage et à la recherche ; Le contenu ci-dessus ne doit pas être utilisé à des fins commerciales ou illégales, sinon les utilisateurs assumeront toutes les conséquences. Les informations sur ce site proviennent d’Internet, et les litiges de droits d’auteur n’ont rien à voir avec ce site. Vous devez supprimer complètement le contenu ci-dessus de votre ordinateur dans les 24 heures suivant le téléchargement. Si vous aimez le programme, merci de soutenir un logiciel authentique, d’acheter l’immatriculation et d’obtenir de meilleurs services authentiques. En cas d’infraction, veuillez nous contacter par e-mail.

Mail To:help@itsvse.com