[Bootstrap ] 初めてのBootstrap

レスポンシブでサイトを作る時にとっても便利なBootstrap。基本的な事だけ覚えれば、初心者でも何だか良く分かっていなくても、形になる便利なフレームワークです。何だかBootstrap4は盛り上がっていないような・・・3で作ってしまったサイトを4にするのはとても面倒なので、盛り上がっていないのかな？

追記：Bootstrap5がリリースされています。基本は同じです。

考え方：グリットシステムについて

Bootstrapは12グリットで構成されています。1カラムに何グリット使うかを調節し、構築してゆきます。

• 1カラムにしたい場合は　12×1(カラム数）=12
• 2カラムにしたい場合は　6×2(カラム数）=12
• 3カラムにしたい場合は　4×3(カラム数）=12
• 4カラムにしたい場合は　3×4(カラム数）=12

複雑な事もできます。
3カラムにしたい。でも中央だけ大きくしたい場合　3+6+3=12　でもOK。とにかく合計を12グリットにすれば良いのです。

これを見ればイメージが分かると思います。Bootstrap公式ページ　グリットについて

考え方：グリットを納めるclassについて

Bootstrapの基本の12のグリットを納めるclassは3種。外側から.container/.row/.col

.container	container(容器）コンテナの横幅を保ちます。PCからスマホまで変化する横幅を.containerで制御します。これが無いと、画面の幅いっぱいに広がります。
.row	row(列）その名のとおり、横の列を保ちます。
.col	カラムです。12グリットをどう分割するか設定します。

グリットオプションについて

.colをデバイス毎に設定する事ができます。小さなデバイスでは2カラム、大きなデバイスでは4カラムなど、使い分ける事が出来る様になります。.col-sm-3とか・・・

グリットオプションについての詳細