概要
- Bootstrapを使って美的センスのなさをごまかしたい
- 公式ページにあるStarter Templateをカスタマイズしていけば解るだろう
- 公式ドキュメント解らない！
となった経験を踏まえ「これくらい知っておけば公式ドキュメントを読めたのでは？」という項目をまとめました。
基本はグリッドシステム
画面を格子状に区切って、そこにパーツを配置していこうというのが、グリッドシステムです。
<div class="row">で行を作り、<div class="col">で列を作ってグリッドにします。
1行に12の列が含まれると考えます。
See the Pen
bzQRBW by sgigagaeru (@sgigagaeru)
on CodePen.
primaryとかsecondaryとかは色のこと
ドキュメントを読んでいくとprimary、secondary、success、danger、warning、info、dark、lightとか出てきます。名前がもっともらしいので、何か意味があるのかと思いましたが、これは色の別名でした。primaryでなくblueでも良かった気がするんだけど。
See the Pen
KJrqYG by sgigagaeru (@sgigagaeru)
on CodePen.
breakpointはレスポンシブデザインに関係がある
ドキュメントを読んでいって<div class="col-2 mx-2">なら「2列を使うdivブロックで、左右にマージンを2単位とる」までは理解できたんですが、<div class="col-2 mx-sm-2">のsmが解らなかった。
クラス名は{property}{sides}-{breakpoint}-{size}なので、smはbreakpointなんですが、それは何なの？
それは画面サイズに関わる指定です。
| breakpoint | 画面サイズ |
|---|---|
| sm | ≧576px |
| md | ≧768px |
| lg | ≧992px |
| xl | ≧1200px |
mx-sm-2は「画面サイズがsmより(576pxより)大きかったら、左右にマージンを2単位とる」を指定してます。
色々なclassでbreakpointが指定できて、これでレスポンシブデザインを実現します。
rebootは映画でおなじみ
rebootは知らなくても困らなかったんですが「なんか秘密の呪文があるのかな？」と構えてしまいました。
ブラウザによる違いを吸収するために、かなり多くのタグに対して、CSSが再定義されています。
これくらいでいかがでしょう？
これくらいの前提知識があれば、公式ドキュメントを読んでいける気がしています。色々やるなかで「これも解らない」ということが出てきたら追記します。
ちなみに公式ドキュメントに挫折した私は「Bootstrap 4 フロントエンド開発の教科書」で勉強しました。とても良い本です。皆さんも公式ドキュメントに挫折したり、手元にリファレンスがある方が簡単だと思われたりしたら、御購入をお勧めします。