ファイル構成

Bootstrap のファイル構成を知りましょう。コンパイルされたコードとソース, JavaScript は jQuery が必要だということも忘れてはいけません。

コンパイルされた Bootstrap

ダウンロードして zip ファイルを解凍すると次のような構成になっていることが分かります。

bootstrap/
├── css/
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map

これは Bootstrap の基本形式です。コンパイルされた CSS と JS (bootstrap.*), ミニファイされた CSS と JS (bootstrap.min.*) も提供しています。ソースマップ (bootstrap.*.map) は特定のブラウザの開発者ツールで使用できます。 バンドルされた JS ファイル (bootstrap.bundle.js とミニファイされた bootstrap.bundle.min.js) は Popper を含みますが jQuery は含んでいません。

CSS ファイル

Bootstrap にはコンパイルされた全てを含んだ CSS といくつかのオプションを含んだ部分的な CSS があります。

CSS ファイル レイアウト コンテンツ コンポーネント ユーティリティ
bootstrap.css
bootstrap.min.css
含む 含む 含む 含む
bootstrap-grid.css
bootstrap-grid.min.css
グリッドシステムのみ 含まない 含まない Flexユーティリティのみ
bootstrap-reboot.css
bootstrap-reboot.min.css
含まない Reboot のみ 含まない 含まない

JS ファイル

CSS 同様にコンパイルされた JavaScript ファイルがあります。

JS ファイル Popper jQuery
bootstrap.bundle.js
bootstrap.bundle.min.js
含む 含まない
bootstrap.js
bootstrap.min.js
含まない 含まない

Bootstrap ソースコード

Bootstrap のソースをダウンロードすると下記のような構成になっています。

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

scss/js/ は CSS と JavaScript のソースコードです。dist/ はコンパイル済みのダウンロードセクションにリストされている全てのものが含まれています。 docs/ はソースコードやドキュメント, そして examples/ は Bootstrap の使い方です。それ以外のファイルは, パッケージ, ライセンス情報, および開発のサポートになります。