Bootstrap Grid systemについてプログラミング初心者向け

始めに

BootstrapのGrid systemが理解できていないため学習してみた。

単語	意味
grid	格子

恐らく、コンテンツをコンテナという容器に入れ、それを行列に区切られた空間に収めるという考え方なのかなと思う。シンプルでわかりやすい配置の仕方である。

まずはコードを見てみる

app

<div class="container">   <!--コンテナ（容器）-->
  <div class="row">
    <div class="col-sm">　　　　 <!--列の要素だがsmとは、、、？-->
      One of three columns　　　　<!--左のように３列表示したい時は３つ class="col"を記載することがわかる-->
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

smとはなんなのだろうか
調べてみるとGrid optionsに説明があった。

Grid options
Bootstrapではサイズの定義で em か rem 単位を使用していますが, グリッドのブレークポイントとコンテナ幅には px 単位を使用しています。
viewport の幅が px 単位なのと font size のよって変化しないためです。

	ExSm<576px	Sm≥576px	Md≥768px	Lg≥992px	Exlg≥1200px
最大コンテナ幅	None (auto)	540px	720px	960px	1140px
Class prefix	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-

単語	意味
Extra	特別な

つまり、恐らくcol-smの大きさは576px<col-sm<768pxの範囲内であり、

どうやらコンテナ（容器）の幅の大きさを表しているらしい