メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

ファイルの内容(Contents)

あらかじめコンパイルされたコードやソースコードのフレーバーなど、Bootstrapに組み込まれているものを確認。BootstrapのJavaScriptプラグインにはjQueryが必要であることを覚えておくこと。

コンパイル済みのファイル(Precompiled Bootstrap)

ダウンロードして圧縮フォルダを解凍すると、以下のように表示:

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の最も基本的な形式:ほぼすべてのWebプロジェクトでの迅速なドロップインで使用可能なコンパイル済みのファイルであり、コンパイルされたCSSとJSファイル(bootstrap.*)と、コンパイルされた軽量版のCSSとJSファイル(bootstrap.min.*)を提供。ソースマップファイル(bootstrap.*.map)は、特定のブラウザの開発者向けツールで使用可能。バンドルされたJSファイル(bootstrap.bundle.js および軽量版 bootstrap.bundle.min.js)には、Popperが組み込まれるが、jQueryは組み込まれない。

CSSファイル(CSS files)

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

JSファイル(JS files)

JSファイル Popper jQuery
bootstrap.bundle.js
bootstrap.bundle.min.js
組み込まれる 組み込まれない
bootstrap.js
bootstrap.min.js
組み込まれない 組み込まれない

 

ソースコード(Bootstrap source code)

Bootstrapのソースコードのダウンロードファイルには、コンパイル済みのCSSとJavaScriptファイル一式とソースのSassとJavaScript、ドキュメント(解説)が入っている。具体的には、以下のとおり:

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

scss/js/ には、それぞれCSSとJavaScriptのソースコードが入っており、dist/ フォルダには、上記の「コンパイル済みのファイル」に記載されているすべてのファイルが入っている。site/docs/ フォルダはドキュメントのソースコードで、examples/ にはBootstrapの実例が入っている。それ以外にも他にパッケージ、ライセンス情報、開発用のサポートを提供するファイルが入っている。