Ten artykuł jest lustrzanym artykułem tłumaczenia maszynowego, kliknij tutaj, aby przejść do oryginalnego artykułu.

Widok: 2539|Odpowiedź: 0

[Bootstrap] Szybko zapoznaj się ze strukturą zawartości plików Bootstrap 5

[Skopiuj link]
Opublikowano 25.07.2024 09:18:53 | | | |
Wymagania: Bootstrap pomaga nam zahalić dużą liczbę stylów CSS, wystarczy je odwołać na zajęciach. Kiedy używamy frameworka interfejsu front-end (np. Angular Material UI, NG-ZORRO, Kendo UI), co jeśli chcemy użyć stylów z Bootstrapa? Jak współistnieć z Bootstrapem i innymi frameworkami UI w swoim projekcie, nie przeszkadzając sobie nawzajem?

Bootstrap to potężny i bogaty w funkcje zestaw narzędzi frontendowych. Zbuduj wszystko (od prototypu po produkcję) w kilka minut.

Zainstaluj bootstrap w wersji 5.3.3 za pomocą npm za pomocą następującego polecenia:

Po zainstalowaniu struktura katalogu node_modules\bootstrap wygląda następująco:

Numer seryjny woluminu to AA1B-3F2F
D:.
│ LICENCJA
│ 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.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.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-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
    │
    ├─formy
    │ _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
    │
    ├─pomocnicy
    │ _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
    │
    ├─mieszanki
    │ _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
    │
    ├─Usługi
    │ _api.scss
    │
    └─sprzedawca
            _rfs.scss

gdzie folder dist to skompilowany plik, scss to js, a kod źródłowy to CSS i JavaScript.

Struktura pliku CSS dla skompilowanego Bootstrapa wygląda następująco:



Zazwyczaj, w zależności od Twojej sytuacji, cytuję:bootstrap-utilities.min.cssbootstrap-grid.min.cssPuszka.

Odniesienie:Logowanie do linku jest widoczne.





Poprzedni:Dwie lub trzy rzeczy o wspólnej pamięci
Następny:[Ćwiczenie] Użyj Dapper do obsługi baz danych SQLite
Zrzeczenie się:
Całe oprogramowanie, materiały programistyczne lub artykuły publikowane przez Code Farmer Network służą wyłącznie celom edukacyjnym i badawczym; Powyższe treści nie mogą być wykorzystywane do celów komercyjnych ani nielegalnych, w przeciwnym razie użytkownicy ponoszą wszelkie konsekwencje. Informacje na tej stronie pochodzą z Internetu, a spory dotyczące praw autorskich nie mają z nią nic wspólnego. Musisz całkowicie usunąć powyższą zawartość z komputera w ciągu 24 godzin od pobrania. Jeśli spodoba Ci się program, wspieraj oryginalne oprogramowanie, kup rejestrację i korzystaj z lepszych, autentycznych usług. W przypadku naruszenia praw prosimy o kontakt mailowy.

Mail To:help@itsvse.com