Bootstrap4移行ガイドを読む(導入編)
Bootstrapはできれば使いたくない。個人で使うにもチームで使うにも巨大すぎるシステムな気がして、触りたいと思えない。
しかし中身を知らずにそう言ってばかりはいられない。それにBootstrap製の案件がいつ舞い込んでくるかわからない。
備えあれば憂いなし。まずは日本語に翻訳されたドキュメントを見ながら、Bootstrap4の概要を把握したいと思う。
- Bootstrapを使うには、スタイルシート1つとスクリプト3つ(Bootstrapのスクリプト自体と、それが依存す2つのスクリプト)を読み込む必要がある
- また、レスポンシブ対応のために viewport メタタグが必要
- Bootstrapを使うには、コンパイル済みファイルをダウンロードする、ソースファイルをダウンロードしてコンパイルする、CDNを使う、パッケージマネージャーを使うなどの手段がある
- スタイルシートは標準(
bootstrap.css
) のものを読み込むこともできるし、部分的にグリットだけ(bootstrap-grid.css
)読み込んだりRebootだけ(bootstrap-reboot.css
)読み込んだりできる bootstrap.min.css
のように軽量版もある
bootstrap/docs/examples/
にBootstrapの使用例が入っている
- 最新の安定リリース版をサポート。WindowsではIE10とIE11、Edge
- IE10ではHTML5とCSS3が完全にはサポートされていないので、プレフィックスつきのクラスが必要
- バグや最善の体験を提供するためにCSSハックを使っている箇所がある。これらの箇所はバリデーターで警告がでることもあるが、実際は問題ない
bootstrap.bundle.js
およびその軽量版にはPopper.jsが組み込まれている- Popper.jsに依存しているのは
dropdown.js
、popover.js
、tooltip.js
js/dist/
内のJavaScriptファイルはalert.js
やbutton.js
など、コンポーネント別に管理されている- BootstrapのJavaScriptはjQueryに依存している
- BootstrapのJavaScriptファイルをHTMLで読み込む前に、別途jQueryファイルを読み込む必要がある
- JQueryのどのバージョンをサポートしているかは
package.json
を確認 - JavaScriptはHTMLのデータ属性を使って適用される
- テーマのカスタマイズはSass変数、Sassマップ、およびカスタムCSSによっておこなう
- カスタマイズするSassファイル(
custom.scss
)は、Bootstrapのファイルとは完全に分けて管理されることを想定 - Sassの
@import
を使って部分的にスタイルを読み込むこともできるが、Bootstrapのコンポーネントにはいくつかの要件と依存関係があるので注意 - BootstrapのSass変数には
!default
フラグがつけられているので、カスタマイズするSassファイルで変数の上書きがしやすい
- 構築システムにNPM scriptsを利用。ローカルで実行するにはNode v8.xをインストール
npm run dist
でコンパイル。SassとAutoprefixerとUglifyJSを実行するnpm test
でテストを実行するnpm run docs
でJavaScriptを構築してlintでチェック- ローカルでドキュメントを書くのにJekyllを使ってる。ドキュメントを更新する場合は
bundle install
が必要になる
- Webpack 3を使ってBootstrapを組み込む方法の紹介