サイズ制御 Control sizing
フォームのサイズを変更するクラス。
高さ
サンプル
ソースコード
<form> <div class="form-group"> <label class="control-label" for="usage1input1">高い高さのテキスト入力欄</label> <input type="text" class="form-control input-lg" id="usage1input1" placeholder="input-lg"> </div> <div class="form-group"> <label class="control-label" for="usage1input2">通常の高さのテキスト入力欄</label> <input type="text" class="form-control" id="usage1input2" placeholder="通常"> </div> <div class="form-group"> <label class="control-label" for="usage1input3">低い高さのテキスト入力欄</label> <input type="text" class="form-control input-sm" id="usage1input3" placeholder="input-sm"> </div> <div class="form-group"> <label class="control-label" for="usage1select1">高い高さのセレクトボックス</label> <select class="form-control input-lg" id="usage1select1"> <option>選択肢1</option> <option>選択肢2</option> <option>選択肢3</option> </select> </div> <div class="form-group"> <label class="control-label" for="usage1select2">通常の高さのセレクトボックス</label> <select class="form-control" id="usage1select2"> <option>選択肢1</option> <option>選択肢2</option> <option>選択肢3</option> </select> </div> <div class="form-group"> <label class="control-label" for="usage1select3">低い高さのセレクトボックス</label> <select class="form-control input-sm" id="usage1select3"> <option>選択肢1</option> <option>選択肢2</option> <option>選択肢3</option> </select> </div> </form>
レスポンシブ水平フォームにおける高さ
サンプル
ソースコード
<form class="form-horizontal"> <div class="form-group form-group-lg"> <label class="col-sm-4 control-label" for="usage2input1">高い高さのテキスト入力欄</label> <div class="col-sm-8"> <input type="text" class="form-control" id="usage2input1" placeholder="高い高さのテキスト入力欄"> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label" for="usage2input2">通常の高さのテキスト入力欄</label> <div class="col-sm-8"> <input type="text" class="form-control" id="usage2input2" placeholder="通常の高さのテキスト入力欄"> </div> </div> <div class="form-group form-group-sm"> <label class="col-sm-4 control-label" for="usage2input3">低い高さのテキスト入力欄</label> <div class="col-sm-8"> <input type="text" class="form-control" id="usage2input3" placeholder="低い高さのテキスト入力欄"> </div> </div> <div class="form-group form-group-lg"> <label class="col-sm-4 control-label" for="usage2select1">高い高さのセレクトボックス</label> <div class="col-sm-8"> <select class="form-control" id="usage2select1"> <option>選択肢1</option> <option>選択肢2</option> <option>選択肢3</option> </select> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label" for="usage2select2">通常の高さのセレクトボックス</label> <div class="col-sm-8"> <select class="form-control" id="usage2select2"> <option>選択肢1</option> <option>選択肢2</option> <option>選択肢3</option> </select> </div> </div> <div class="form-group form-group-sm"> <label class="col-sm-4 control-label" for="usage2select3">低い高さのセレクトボックス</label> <div class="col-sm-8"> <select class="form-control" id="usage2select3"> <option>選択肢1</option> <option>選択肢2</option> <option>選択肢3</option> </select> </div> </div> </form>
カラムによるサイズ変更
グリッド・システムのカラムによるサイズ変更。
サンプル
ソースコード
<div class="row"> <div class="col-xs-2"> <input type="text" class="form-control" placeholder=".col-xs-2"> </div> <div class="col-xs-3"> <input type="text" class="form-control" placeholder=".col-xs-3"> </div> <div class="col-xs-4"> <input type="text" class="form-control" placeholder=".col-xs-4"> </div> </div>