Bootstrap3
日本語リファレンス

広告

モバイル・ファーストな基本スタイル  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>

広告