6.form.html(その3)
(3)グリッドレイアウト
<div class="form-group">
<div class="col-sm-6">
form-group内部にはクラスとしてグリッドレイアウトを指定したdiv要素を配置する。
例えば、1行ぶち抜きでタイトル化したい場合は <div class="col-sm-12">
という形で指定する。
このときに指定したクラスの文字列「col-sm-12」のうち、colはcolumn(行)、smはsmall(画面サイズがsmall以上の場合適用)、12は当該パーツのサイズ(グリッドの横領域を最大12とした場合、どのくらい割当するか)を指定する。
なお、クラスにグリッドレイアウトを複数指定した場合、画面のサイズから自動的に適用される。
例えば"col-xs-12 col-sm-6"と指定した場合は、画面サイズがスマートフォン(xtra-small)の場合は領域一杯、タブレット端末(small)以上の場合は領域の半分で割り当てられる。
グリッドレイアウトでのプラグインの外観制御方法は以下の通り。
画面サイズ | 制御方法 |
---|---|
スマートフォン(xtra-small) | 横幅が狭いためxs-12で領域全体をラベルやテキストボックスに割当 |
タブレッド以上(small) | ラベルとテキストボックスを半々などにして表示させる。 文字列長さが必要な場合は領域全体を使用 |
グリッドレイアウトを指定した場合、その div タグの左右余白は 15pixel 確保されるので、グリッドレイアウトの親タグでform-groupを指定しておくとパーツの縦並びを揃えることが可能になる。