Bootstrap3 フォームレイアウト

Bootstrap3でフォームを作ろうとして結構はまってしまったので、 ポイントとサンプルコードをメモしておきます。

ポイント

• 基本はlabel.control-labelとinput.form-controlをdiv.form-groupで囲む。
• inputの幅は100%になるので、制限したい場合はstyleを指定する。
• labelとinputを横並びにするには、labelとinputの親となるdivを用意し、col-xx-xを指定する。
• 複数のinputを横並びにするには、inputの親となるdivを用意し、form-inlineを指定する。

サンプルコード

   <form class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-xs-2">aaa</label>
            <div class="col-xs-10">
                <input type="text" placeholder="aaa" class="form-control"  style="width:200px">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-2">bbb ccc</label>
            <div class="form-inline col-xs-10">
                <input type="text" placeholder="bbb" class="form-control"   style="width:200px;margin-right:10px;">
                <input type="text" placeholder="ccc" class="form-control"   style="width:200px">
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <input type="submit" value="Submit" class="btn btn-primary">
            </div>
        </div>
    </form>

参考

• http://qiita.com/zaburo/items/8983993d173c51cb3827