Bootstrap ソースコードのディレクトリ構造の概要

序文

Bootstrap は、Twitter によって開始されたフロントエンド開発用のオープンソースツールキットです。これは Twitter デザイナーの Mark Otto と Jacob Thornton によって開発された CSS/HTML フレームワークです。現在、Bootstrap の最新バージョンは 5.3 です。

ブートストラップのディレクトリ構造

Bootstrap は毎回、プリコンパイル版とソースコードの 2 つの形式でリリースされます。以下では、2 つのフォームの内容と構造について説明します。どの形式を使用する場合でも、Bootstrap の JavaScript プラグインには jQuery が必要であることに注意してください。

ブートストラップの概要

CSSは主にブートストラップ形式、JSは主にJavaScriptで定義された要素の操作を記録します。

bootstrap-grid: 主にブートストラップのグリッド構造

bootstrap-reboot: Reboot は Normalize に基づいて構築されており、要素セレクターのみを使用して、多くの HTML 要素に特定の独自のスタイルを提供します。

ブートストラップコンパイルファイル

BootStrap アーカイブをダウンロードして解凍すると、次のターゲット構造とファイルリストが表示されます。

bootstrap/
├── 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

これは、最も基本的な形式の Bootstrap であり、ほぼすべての Web プロジェクトで使用できる、ドロップインですぐに使用できるコンパイル済みファイルです。その中にはbootstrap.*プリコンパイルされたファイル (css+js) があります。これはコンパイルおよび圧縮されたファイル (css+js) でありbootstrap.min.*、ユーザーは必要に応じて参照できます。プログラムディレクトリには、ソースマップbootstrap.*.mapファイルであるフォーマットファイルもあり、特定のブラウザ開発者ツールで使用できる必要があります。バンドルされている JS ファイル ( および minification ) にはPopper が含まれています。bootstrap.bundle.jsbootstrap.bundle.min.js

*ソースマップテクノロジについては、ここをクリックしてください:
ソースマップとは何ですか? マップファイルとは何ですか? そしてその機能は何ですか? JQurey のソースマップは、緩和するテクノロジを使用しています。

CSSファイル | CSSファイルの機能比較と一覧

Bootstrap には、コンパイルされた CSS の一部またはすべてを組み込むためのオプションが含まれています。

書類	レイアウト	コンテンツ	コンポーネント	パブリックスタイル
`bootstrap.css` `bootstrap.min.css` `bootstrap.rtl.css` `bootstrap.rtl.min.css`	付属	付属	付属	付属
`bootstrap-grid.css` `bootstrap-grid.rtl.css` `bootstrap-grid.min.css` `bootstrap-grid.rtl.min.css`	グリッドクラスでのみ動作します	含まれていない	含まれていない	フレックスクラスでのみ動作します
`bootstrap-utilities.css` `bootstrap-utilities.rtl.css` `bootstrap-utilities.min.css` `bootstrap-utilities.rtl.min.css`	含まれていない	含まれていない	含まれていない	含む
`bootstrap-reboot.css` `bootstrap-reboot.rtl.css` `bootstrap-reboot.min.css` `bootstrap-reboot.rtl.min.css`	含まれていない	再起動のみ	含まれていない	含まれていない

JSファイル | JSファイルの機能比較と一覧

同様に、コンパイルされた JavaScript の一部またはすべてを含めることを選択できます。

jsファイルポッパー jQuery

jsファイル	ポッパー	jQuery
`bootstrap.bundle.js` `bootstrap.bundle.min.js`	含む	含まれていない
`bootstrap.js` `bootstrap.min.js`	含まれていない	含まれていない

bootstrap.bundle.js

bootstrap.bundle.min.js

含む

含まれていない

bootstrap.js

bootstrap.min.js

含まれていない

ブートストラップソースコードディレクトリ | リソースリスト

Bootstrap ソースコードパッケージには、プリコンパイルされた CSS および JavaScript リソースに加え、ソース Sass、JavaScript、サンプル、ドキュメントが含まれており、コア構造は次のとおりです。

bootstrap/
├── dist/
│   ├── css/
│   └── js/
├── site/
│   └──content/
│      └── docs/
│          └── 5.3/
│              └── examples/
├── js/
└── scss/

scss/js/CSS と JavaScript のソースコードです。

dist/このフォルダーには、上記のコンパイル済みダウンロードファイルがすべて含まれており、一般的な Web ページは dist ディレクトリ内のファイルを読み取ります。

docs/フォルダーは開発者フォルダーです。

examples/は例です。

その他のファイルは、BootStrap の開発とコンパイル、認証情報、サポートドキュメント全体のサポートを提供するファイルです。

参考文献

ブートストラップのディレクトリ構造ブートストラップのドキュメントネットワーク