この記事は機械翻訳のミラー記事です。元の記事にジャンプするにはこちらをクリックしてください。

眺める: 2539|答える: 0

[ブートストラップ] Bootstrap 5のファイル構成の概要を簡単にご確認ください

[リンクをコピー]
掲載地 2024/07/25 9:18:53 | | | |
要件:Bootstrapは多くのCSSスタイルをカプセル化するのに役立ちます。クラス上で参照すればいいだけです。 フロントエンドのUIフレームワーク(例:Angular Material UI、NG-ZORRO、Kendo UI)を使う場合、Bootstrapのスタイルを使いたい場合、どうすればいいのでしょうか? Bootstrapや他のUIフレームワークと、どのようにして互いに干渉せずに共存していますか?

Bootstrapは強力で機能豊富なフロントエンドツールキットです。 プロトタイプから量産まで、何でも数分で作れます。

以下のコマンドでnpmを使ってブートストラップバージョン5.3.3をインストールします:

インストール後、フォルダ node_modules\bootstrap ディレクトリ構造は以下の通りです:

巻のシリアル番号はAA1B-3F2Fです
D:.
† ライセンス
│ 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.scsss
    │ bootstrap-utilities.scss
    │ bootstrap.scss
    │ _accordion.scsss
    │ _alert.SCSS
    │ _badge.SCSS
    │ _breadcrumb.scss
    │ _button-group.scsss
    │ _buttons.SCSS
    │ _card.SCSS
    │ _carousel.SCSS
    │ _close.SCSS
    │ _containers.scsss
    │ _dropdown.scss
    │ _forms.scsss
    │ _functions.SCSS
    │ _grid.SCSS
    │ _helpers.SCSS
    │ _images.SCSS
    │ _list-group.scss
    │ _maps.SCSS
    │ _mixins.SCSS
    │ _modal.scss
    │ _nav.scss
    │ _navbar.scsss
    │ _offcanvas.SCSS
    │ _pagination.scss
    │ _placeholders.scss
    │ _popover.SCSS
    │ _progress.SCSS
    │ _reboot.SCSS
    │ _root.scss
    │ _spinners.scss
    │ _tables.scsss
    │ _toasts.scss
    │ _tooltip.scss
    │ _transitions.scss
    │ _type.scss
    │ _utilities.scsss
    │ _variables-dark.scsss
    │ _variables.scsss
    │
    ├─形態
    │ _floating-labels.scss
    │ _form-check.scsss
    │ _form-control.scss
    │ _form-range.scsss
    │ _form-select.scss
    │ _form-text.scsss
    │ _input-group.scss
    │ _labels.SCSS
    │ _validation.scss
    │
    ├─ヘルパーズ
    │ _clearfix.SCSS
    │ _color-bg.scss
    │ _colored-links.scss
    │ _focus-ring.scsss
    │ _icon-link.scss
    │ _position.SCSS
    │ _ratio.SCSS
    │ _stacks.scss
    │ ごこんなに_stretched-link.scsss
    │ _text-短縮.scss
    │ _visually-hidden.scsss
    │ _vr.scss
    │
    ├─ミキシン
    │ _alert.SCSS
    │ _backdrop.SCSS
    │ _banner.SCSS
    │ _border-radius.scsss
    │ _box-shadow.scsss
    │ _breakpoints.SCSS
    │ _buttons.SCSS
    │ _caret.SCSS
    │ _clearfix.SCSS
    │ _color-mode.scsss
    │ _color-scheme.scsss
    │ _container.scsss
    │ _deprecate.SCSS
    │ _forms.scsss
    │ _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.scsss
    │ _visually-hidden.scsss
    │
    ├─公益事業
    │ _api.scss
    │
    └─ ベンダー
            _rfs.scsss

ここでdistフォルダはコンパイル済みファイル、scssはjs、ソースコードはCSSとJavaScriptです。

コンパイル済みBootstrapのCSSファイル構造は以下の通りです:



一般的に、あなたの状況に応じて引用してください:bootstrap-utilities.min.cssbootstrap-grid.min.css缶。

参考:ハイパーリンクのログインが見えます。





先の:共有記憶について2、3つのポイントがあります
次に:[練習] Dapperを使ってSQLiteデータベースを運用する
免責事項:
Code Farmer Networkが発行するすべてのソフトウェア、プログラミング資料、記事は学習および研究目的のみを目的としています。 上記の内容は商業的または違法な目的で使用されてはならず、そうでなければ利用者はすべての結果を負うことになります。 このサイトの情報はインターネットからのものであり、著作権紛争はこのサイトとは関係ありません。 ダウンロード後24時間以内に上記の内容を完全にパソコンから削除してください。 もしこのプログラムを気に入ったら、正規のソフトウェアを支持し、登録を購入し、より良い本物のサービスを受けてください。 もし侵害があれば、メールでご連絡ください。

Mail To:help@itsvse.com