【BootStrap】Gridシステムのキソのキソ

Gridシステムとは

テキストボックスやフォームなどの各要素の大きさを調整することが出来る。
パソコンとスマホなど、異なるデバイスでレイアウトが崩れないように出来る。

分母は12

分母は「12」です。

下記はフォームのテキストボックスです。

top.html

<div class="col-12 col-sm-6 col-md-4">
	<input type="text" th:field="*{monthlyIncome}" class="form-control"><br>
</div>

上記の<div class="col-12 col-sm-6 col-md-4">がGridシステムの肝です。

各項目について

col	Gridシステムであることを示すクラス
sm,md	画面サイズ
12,6,4	分母12に対して画面の何割占めるか

sm, mdは、それぞれ画面サイズを指定しています。
「ブレイクポイント」といいます。

smは、幅 576px 以上の画面（スマートフォン程度）
mdは、幅 768px 以上の画面（タブレット程度）となります。

そのため、実際のデバイスの画面サイズによって、適用される割合が変わります。
下記の通りです。

576px以下	col-12
576~767px	col-6
768px以上	col-4

768px以上では、画面の横幅に対して、
12分の4の大きさのテキストボックスが配置されることになります。

使用例

下記の例では、
「月収は？」という項目の説明と、テキストボックスを横一列に並べています。

<div class="col-12 col-sm-6 col-md-4">
    <label for="monthlyIncome" class="form-label">月収は？</label>
</div>
<div class="col-12 col-sm-6 col-md-8">
    <input type="text" id = "monthlyIncome" th:field="*{monthlyIncome}">
</div>

• 576px以下では、各項目が12/12で横幅いっぱいを占めます。（=2列になる）
• 576~767pxでは、各項目が横幅の6/12ずつ(半分ずつ)占めます（=1列)
• 768px以上では、「月収は？」が4/12、テキストボックスが8/12占めます。(=1列）