フォーム部品の代わりにテキスト ≪ フォーム ≪ CSS ≪ Bootstrap3日本語リファレンス

フォーム部品の代わりにテキストを表示するスタイル。

フォーム部品の代わりにテキスト１フォーム部品の代わりにテキスト２（インライン・フォーム）

class属性にform-control-staticを指定したp要素を使うことで、フォーム部品の代わりにテキストを表示できる。

サンプル

ソースコード

<form class="form-horizontal">
	<div class="form-group">
		<label class="col-sm-2 control-label">チーム名</label>
		<div class="col-sm-10">
			<p class="form-control-static">ブルーＳＣ</p>
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label">ホーム</label>
		<div class="col-sm-10">
			<p class="form-control-static">地球</p>
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label">Ｅメール</label>
		<div class="col-sm-10">
			<p class="form-control-static">example@foo.tld</p>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<button type="submit" class="btn btn-default">送信</button>
			<p class="help-block">以上の内容でよろしければ、送信ボタンを押してください。ただし、これはサンプルであり、実際には送信しません。</p>
		</div>
	</div>
</form>

class属性にform-control-staticを指定したp要素を使い、フォーム部品の代わりにテキストを表示するインライン・フォーム。

サンプル

ソースコード

<form class="form-inline">
	<div class="form-group">
		<label class="sr-only">Ｅメール</label>
		<p class="form-control-static">example@foo.tld</p>
	</div>
	<div class="form-group">
		<label class="sr-only" for="InputPassword">パスワード</label>
		<input type="password" class="form-control" id="InputPassword" placeholder="パスワード">
	</div>
	<div class="form-group">
		<button type="submit" class="btn btn-default">確認</button>
	</div>
</form>