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を組み込む方法の紹介
