Bootstrap3のform-groupとinput-groupについて
ぐぐって出てくる他人のコードの form-group と input-group の使い方が気にかかったのでメモ。
.form-group
Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
http://getbootstrap.com/css/#formsより
.form-controleが設定された要素はデフォルトで幅が100%ととなる。幅をカスタマイズしたいときは.form-groupでラップしてくれ。
って感じ。幅100%にしたくないときに使えば良いっぽい。
.input-group
Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use .input-group with an .input-group-addon to prepend or append elements to a single .form-control.
http://getbootstrap.com/components/#input-groupsより
form-controleの前後や両端にテキストやボタンを拡張する。input-group-addonを使ってform-controlを拡張してくれ。
input-group-addonが使いたいときにはinput-groupで囲ってやればいい感じ。
inputタグ使うならinput-groupで囲うとかではなくて、拡張したい場合に使うようです。
UIまで手の回らないプログラマのためのBootstrap 3実用ガイド
- 作者: 大澤文孝
- 出版社/メーカー: 翔泳社
- 発売日: 2014/07/15
- メディア: 大型本
- この商品を含むブログ (1件) を見る