[Bootstrap]初めてのBootStrap3:form

今日は、formについて

formsの部分を読むと、各構成要素を横組で作るか、縦組で作るか選択することができる。

まずは、横組から、試しに、下のようにコーディングしました。

<div class="container"> <div class="row"> <div class="span12"> <form class="well"> <input type="text"> <button class="btn">Please click!!</button> </form> </div> </div> </div>

実行結果は下のようになりました。

あれ、テキストとボタンの位置がずれている。

どうすればいいのかと悩んでいたら、どうやら、formタグに、form-inlineクラスを付与すれば解決するようだ。

というわけで、form-inlineを付与したコーディングを下に記載しました。

<div class="container"> <div class="row"> <div class="span12"> <form class="well form-inline"> <input type="text"> <button class="btn">Please click!!</button> </form> </div> </div> </div>

実行結果は、下のようになりました。

無事に、横並びにすることができました。

wellクラスをつけると薄い灰色をデフォルトでつけてくれるので、少し目立ってかっこいいなと思ったり。

次は、縦並び

下のようにコーディングを行いました。

<form class="form-horizontal"> <fieldset> <div class="control-group"> <label class="control-label" for="input01">Text input 01</label> <div class="controls"> <input type="text" class="input-xlarge" id="input01"> </div> </div> <div class="control-group"> <label class="control-label" for="input02">Text input 02</label> <div class="controls"> <input type="text" class="input-xlarge" id="input02"> </div> </div> </fieldset> </form>

実行結果は、下のようになりました。

ポイントは、各要素を、control-groupクラスが付与されたdivタグで囲む必要があるということ。

さらに、formタグに、form-horizontalクラスも付与する必要があります。

これで、formの段組みも困らないなと。