コンテンツ

Bootstrap のファイル構成を知りましょう。

On this page

コンパイルされた Bootstrap

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

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

CSS files

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

CSS files	Layout	Content	Components	Utilities
`bootstrap.css` `bootstrap.rtl.css` `bootstrap.min.css` `bootstrap.rtl.min.css`	含む	含む	含む	含む
`bootstrap-grid.css` `bootstrap-grid.rtl.css` `bootstrap-grid.min.css` `bootstrap-grid.rtl.min.css`	グリッドシステムのみ	—	—	Flex ユーティリティのみ
`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`	—	Reboot のみ	—	—

JS files

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

JS files	Popper
`bootstrap.bundle.js` `bootstrap.bundle.min.js`	含む
`bootstrap.js` `bootstrap.min.js`	—

Bootstrap source code

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

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

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