エンジニアに捧げる「Bootstrapを使っての入力フォームの体系的な作成法」2
- 2018年5月10日
- 技術情報
前回は、FormGroupを使って縦の入力フォームの作り方を紹介させていただきました。
今回は、グリッドレイアウトシステムを使ってFormGroupを横並びに配置する方法を紹介させていただきます。
グリッドレイアウトシステムは、rowやcolumnを使って画面を分割しながらレイアウトが行うことができるCSSの機能の一つです。
Bootstrapでは、form-rowというクラスを使用することで、FormGroupを横並びに配置することが出来ます。
form-rowを使ってのform-groupの横並び配置
例としてform-rowを使用すると、
以下のように郵便番号、都道府県、市町村を入力するコントロールを横並びに配置することが出来ます。
<div class=”container”> |
上記それぞれの入力コントロールをform-group化し、form-rowによって
1つの列を3つに分割して配置しています。
このようにBootstrapではform-rowを使うことで、
form-groupをグリッドレイアウトシステムによる配置が行えます。
さらに例えば右側のform-groupを右寄せにしたいという要望があるかもしれません。
この時Bootstrapでは、form-groupにtext-rightクラスを追加するだけで右寄せにすることが出来ます。
<div class=”container”> |
このようにBootstrapでは、
各レイアーに分けて入力コントロールの配置を考えることが出来るようになっており、
体系的にFormを作成することが出来ます。
以上、Bootstrapを使ってのFormの体系的な作成方法のご紹介になります。
木曜担当 yoshimoto
参照
Bootstrap from-row 公式解説
https://getbootstrap.com/docs/4.0/components/forms/#form-row
yoshimoto at 2018年05月10日 10:00:36