Gereksinimler: Bootstrap, çok sayıda css stilini kapsayabilmemize yardımcı oluyor, sadece sınıfta referans vermemiz gerekiyor. Ön uç arayüz çerçevesi kullandığımızda (örneğin, Angular Material UI, NG-ZORRO, Kendo UI), ya stilleri Bootstrap'ta kullanmak istersek? Projenizde Bootstrap ve diğer arayüz çerçeveleriyle birbirinize müdahale etmeden nasıl bir arada var oluyorsunuz?
Bootstrap, güçlü ve özelliklerle zengin bir ön uç araç setidir. Prototipten üretime kadar her şeyi birkaç dakikada inşa edin.
Bootstrap sürüm 5.3.3'ü npm kullanarak aşağıdaki komutla kurun:
Kurulduktan sonra, node_modules\bootstrap dizin yapısı şu şekildedir:
Hacim seri numarası AA1B-3F2F'dir. D:. │ LISANS │ package.json │ README.md │ ├─dist │ ├─css │ │ bootstrap-grid.css │ │ bootstrap-grid.css.harita │ │ 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.harita │ │ bootstrap.rtl.css │ │ bootstrap.rtl.css.map │ │ bootstrap.rtl.min.css │ │ bootstrap.rtl.min.css.map │ │ │ └─js │ bootstrap.bundle.js │ bootstrap.bundle.js.harita │ 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.harita │ │ │ modal.js │ │ │ modal.js.harita │ │ │ offcanvas.js │ │ │ offcanvas.js.map │ │ │ popover.js │ │ │ popover.js.map │ │ │ scrollspy.js │ │ │ scrollspy.js.map │ │ │ tab.js │ │ │ tab.js.harita │ │ │ toast.js │ │ │ toast.js.map │ │ │ tooltip.js │ │ │ tooltip.js.map │ │ │ │ │ ├─dom │ │ │ data.js │ │ │ data.js.harita │ │ │ 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.harita │ │ 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 │ ├─formlar │ _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 │ ├─Yardımseverler │ _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 │ ├─Karışımlar │ _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 │ ├─Utilities │ _api.scss │ └─Satıcı _rfs.scss burada dist klasörü derlenmiş dosya, scss js, kaynak kodu ise CSS ve JavaScript'tir.
Derlenmiş Bootstrap için css dosya yapısı aşağıdaki gibidir:
Genel olarak, kendi durumunuza göre, şöyle alıntı yapın:bootstrap-utilities.min.css、bootstrap-grid.min.cssKutu.
Referans:Bağlantı girişi görünür.
|