Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。
ファイルの内容(Contents)
あらかじめコンパイルされたコードやソースコードのフレーバーなど、Bootstrapに組み込まれているものを確認。BootstrapのJavaScriptプラグインにはjQueryが必要であることを覚えておくこと。
コンパイル済のファイル(Precompiled Bootstrap)v4.6.2時点
ダウンロードして圧縮フォルダを解凍すると、次の表示になる:
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)v4.6.2時点
Bootstrapのソースコードのダウンロードファイルには、コンパイル済のCSSとJavaScriptファイル一式とソースのSassとJavaScript、ドキュメント(解説)が入っている。具体的には、次のとおり:
bootstrap/
├── dist/
│ ├── css/
│ └── js/
├── site/
│ └──docs/
│ └── 4.6/
│ └── examples/
├── js/
└── scss/
scss/
と js/
には、それぞれCSSとJavaScriptのソースコードが入っており、dist/
フォルダには、上記の「コンパイル済のファイル」に記載されているすべてのファイルが入っている。site/docs/
フォルダはドキュメントのソースコードで、examples/
にはBootstrapの実例が入っている。その他にパッケージ、ライセンス情報、開発用のサポートを提供するファイルが入っている。