Bootstrap3
日本語リファレンス

広告

サイズ制御  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>

広告