Bootstrapでフォームが一瞬でカッコよく

2012/4/12 未分類

先日も書いた様に、Twitter Bootstrapが便利すぎるのでいろいろ調べながら使っています。いや、僕もデザインの知識やセンスがあればオリジナルで作りたいんですよ。Bootstrap使うとどれも同じようなデザインになっちゃいますしね。でも、どう考えてもBootstrapよりもカッコいいデザインは自分では作れないので、どんどん使っていきたいと思います。
よくあるパターンとして、フォームの見栄えを良くするサンプルがこちらにありました。
Twitter Bootstrap Forms tutorial
この中でも、「Create an Horizontal Form layout」の部分が一番よくある入力フォームではないでしょうか。ちょっと抜粋してみます。

<form class="form-horizontal">
        <fieldset>
          <legend>Controls Bootstrap supports</legend>
          <div class="control-group">
            <label class="control-label" for="input01">Text input</label>
            <div class="controls">
              <input type="text" class="input-xlarge" id="input01">
              <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
            </div>
          </div>
          <div class="form-actions">
            <button type="submit" class="btn btn-primary">Save changes</button>
            <button class="btn">Cancel</button>
          </div>
        </fieldset>
</form>

まず、formのclassにform-horizontalを付けます。フォームの見出しと入力欄をdivでまとめてcontrol-groupのclassを付け、見出しにはlabelでclass = “control-label”とし、入力欄はdiv class=”controls”で囲みます。
ボタン類はform-actionsのclassが付いたdivで囲み、ボタンにはbtnかbtn primary（ボタンが青くなる）のclassを設定します。こちらで実物が見れます。
また、<fieldset>や<legend>も、何もしなくてもカッコよく表示してくれます。
何もデザインしていないのに、クラス名をちょこちょこ書いただけでこんなになるとはありがたや〜