モバイル・ファーストな基本スタイル Basic example
input
要素、textarea
要素、select
要素は、class
属性にform-control
を指定することで、幅がwidth: 100%;
になる。
class
属性にform-group
を指定したdiv
要素で、ラベルとフォーム部品を括るとよい。これにより、下に15pxのマージンを設定できる。
サンプル
ソースコード
<form> <div class="form-group"> <label for="InputEmail">メール・アドレス</label> <input type="email" class="form-control" id="InputEmail" placeholder="メール・アドレスを入力して下さい。"> </div> <div class="form-group"> <label for="InputPassword">パスワード</label> <input type="password" class="form-control" id="InputPassword" placeholder="パスワードを入力して下さい。"> </div> <div class="form-group"> <label for="InputTextarea">要件</label> <textarea class="form-control" id="InputTextarea" placeholder="要件を入力して下さい。"></textarea> </div> <div class="form-group"> <label for="InputSelect">選択</label> <select class="form-control" id="InputSelect"> <option>選択肢1</option> <option>選択肢2</option> <option>選択肢3</option> </select> </div> <div class="form-group"> <label for="InputFile">ファイル</label> <input type="file" id="InputFile"> <p class="help-block">ヘルプ用ブロック。これはサンプルです。</p> </div> <div class="checkbox"> <label> <input type="checkbox" value="checkboxA"> チェックボックスA </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="checkboxB"> チェックボックスB </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"> ラジオボタン1 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> ラジオボタン2 </label> </div> <button type="submit" class="btn btn-default">送信</button> </form>