Bootstrapを使ってみる（その２） ～フォーム部品～

前回のBootstrapの続き

フォーム部品に適用してみる

フォーム部品に関しては、基本的にはclass属性で"form-control"などとすることでBootstrapのCSSが適用される。
各部品の具体的な使い方はCSS · Bootstrapを参照のこと。
HTML5で追加されたコントロールも含めテストしてみる。

controls.html

<div class="container" style="padding:10px 0">
    <form class="form">
        <!-- text -->
        <div class="form-group">
            <label class="control-label">text</label>
            <input type="text" class="form-control" placeholder="Text" />
        </div>
        <!-- textarea -->
        <div class="form-group">
            <label class="control-label">textarea</label>
            <textarea class="form-control" placeholder="TextArea"></textarea>
        </div>
        <!-- checkbox -->
        <div class="checkbox">
            <label>
                <input type="checkbox"/>
                checkbox
            </label>
        </div>
        <!-- radio -->
        <div class="radio">
            <label>
                <input type="radio" name="radio"/>
                radio1
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="radio"/>
                radio2
            </label>
        </div>
        <!-- select -->
        <div class="form-group">
            <label class="control-label">select</label>
            <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </div>
        <!-- password -->
        <div class="form-group">
            <label class="control-label">password</label>
            <input type="password" class="form-control" placeholder="Password" />
        </div>
        <!-- date -->
        <div class="form-group">
            <label class="control-label">date</label>
            <input type="date" class="form-control"/>
        </div>
        <!-- time -->
        <div class="form-group">
            <label class="control-label">time</label>
            <input type="time" class="form-control"/>
        </div>
        <!-- week -->
        <div class="form-group">
            <label class="control-label">week</label>
            <input type="week" class="form-control"/>
        </div>
        <!-- number -->
        <div class="form-group">
            <label class="control-label">number</label>
            <input type="number" class="form-control"/>
        </div>
        <!-- email -->
        <div class="form-group">
            <label class="control-label">email</label>
            <input type="email" class="form-control"/>
        </div>
        <!-- color -->
        <div class="form-group">
            <label class="control-label">color</label>
            <input type="color" class="form-control"/>
        </div>
        <!-- range -->
        <div class="form-group">
            <label class="control-label">range</label>
            <input type="range" class="form-control"/>
        </div>
        
    </form>
</div>

表示結果はこのようになった。

ちなみにBootstrapの適用を外してみると…

外観の違い

全体的にみてBootstrapを適用するとレイアウトが非常にゆったりとして見易くなる。
またフォーカスされたコントロールには、きれいなbox-shadowが適用される。

Bootstrapを適用したほうのレイアウトでコントロールの横幅が異様に長くなってしまっているのは、BootstrapのGrid Systemというものを無視してしまっているためで、きちんとカラムサイズ（画面横幅を12等分した幾つなのか）を指定すればよいようだ。

今回はこれまで。