Bootstrap3
日本語リファレンス
広告
  1. Bootstrap3日本語リファレンス
  2. コンポーネント
  3. インプット・グループ

インプット・グループ　　Input groups

テキスト入力欄の左サイド、右サイド、もしくは、両サイドに、テキストやボタンを、１つ配置することができる。

サンプル
ユーザー名


使い方 　 左にテキストを配置 　 右にテキストを配置 　 両サイドに配置 　 サイズ・バリエーション 　 チェックボックスを配置 　 ラジオボタンを配置 　 ボタンを配置 　 ドロップダウン・ボタンを配置 　 セパレート式ドロップダウン・ボタンを配置

使い方

ポイントは２つ。

  1. 入力欄の左に配置する場合は入力欄の直前に、入力欄の右に配置する場合は入力欄の直後に、入力欄の両サイドに配置する場合は入力欄の直前と直後に、class属性に、input-group-addonを指定したspan要素を配置する。そのspan要素内にテキストやボタンを配置する。
  2. 入力欄（input要素）とspan要素を、class属性にinput-groupを指定したdiv要素で括る。
<div class="input-group">
	<span class="input-group-addon">ユーザー名</span>
	<input type="text" class="form-control" placeholder="太郎">
</div>

左にテキストを配置

テキスト入力欄の左サイドにテキストを配置するスタイル。

表示サンプル

ユーザー名

ソースコード

<div class="input-group">
	<span class="input-group-addon">ユーザー名</span>
	<input type="text" class="form-control" placeholder="太郎">
</div>

右にテキストを配置

テキスト入力欄の右サイドにテキストを配置するスタイル。

表示サンプル

@example.com

ソースコード

<div class="input-group">
	<input type="text" class="form-control" placeholder="abc123">
	<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

両サイドに配置

テキスト入力欄の両サイドにテキストを配置するスタイル。

表示サンプル

¥ 00

ソースコード

<div class="input-group">
	<span class="input-group-addon">\</span>
	<input type="text" class="form-control">
	<span class="input-group-addon">00</span>
</div>

サイズ・バリエーション

classにinput-groupを指定したdiv要素のclass属性に、btn-group-lg（大）やbtn-group-sm（小）を追加するだけで、大きさを変更できる。

表示サンプル

大

通常

小

ソースコード

<div class="input-group input-group-lg">
	<span class="input-group-addon">大</span>
	<input type="text" class="form-control" placeholder="input-group-lg">
</div>
<br>
<div class="input-group">
	<span class="input-group-addon">通常</span>
	<input type="text" class="form-control" placeholder="">
</div>
<br>
<div class="input-group input-group-sm">
	<span class="input-group-addon">小</span>
	<input type="text" class="form-control" placeholder="input-group-sm">
</div>

チェックボックスを配置

テキスト入力欄のサイドにチェックボックスを配置するスタイル。

表示サンプル



ソースコード

<div class="input-group">
	<span class="input-group-addon">
		<input type="checkbox">
	</span>
	<input type="text" class="form-control" placeholder="テキスト入力欄">
</div>
<br>
<div class="input-group">
	<input type="text" class="form-control" placeholder="テキスト入力欄">
	<span class="input-group-addon">
		<input type="checkbox">
	</span>
</div>
<br>
<div class="input-group">
	<span class="input-group-addon">
		<input type="checkbox">
	</span>
	<input type="text" class="form-control" placeholder="テキスト入力欄">
	<span class="input-group-addon">
		<input type="checkbox">
	</span>
</div>

ラジオボタンを配置

テキスト入力欄のサイドにラジオボタンを配置するスタイル。

表示サンプル



ソースコード

<div class="input-group">
	<span class="input-group-addon">
		<input type="radio">
	</span>
	<input type="text" class="form-control" placeholder="テキスト入力欄">
</div>
<br>
<div class="input-group">
	<input type="text" class="form-control" placeholder="テキスト入力欄">
	<span class="input-group-addon">
		<input type="radio">
	</span>
</div>
<br>
<div class="input-group">
	<span class="input-group-addon">
		<input type="radio">
	</span>
	<input type="text" class="form-control" placeholder="テキスト入力欄">
	<span class="input-group-addon">
		<input type="radio">
	</span>
</div>

ボタンを配置

テキスト入力欄のサイドにボタンを配置するスタイル。

ボタンを括るspan要素のclass属性にinput-group-btnを指定する。input-group-addonでない点に注意。

表示サンプル



ソースコード

<div class="input-group">
	<span class="input-group-btn">
		<button type="button" class="btn btn-default">ボタン</button>
	</span>
	<input type="text" class="form-control" placeholder="テキスト入力欄">
</div>
<br>
<div class="input-group">
	<input type="text" class="form-control" placeholder="テキスト入力欄">
	<span class="input-group-btn">
		<button type="button" class="btn btn-default">ボタン</button>
	</span>
</div>
<br>
<div class="input-group">
	<span class="input-group-btn">
		<button type="button" class="btn btn-default">ボタン</button>
	</span>
	<input type="text" class="form-control" placeholder="テキスト入力欄">
	<span class="input-group-btn">
		<button type="button" class="btn btn-default">ボタン</button>
	</span>
</div>

ドロップダウン・ボタンを配置

テキスト入力欄のサイドに、ドロップダウン・ボタンを配置するスタイル。

表示サンプル



ソースコード

<div class="input-group">
	<span class="input-group-btn">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
			ボタン
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">リンクのリスト１</a></li>
			<li><a href="#">リンクのリスト２</a></li>
			<li><a href="#">リンクのリスト３</a></li>
		</ul>
	</span>
	<input type="text" class="form-control" placeholder="テキスト入力欄">
</div>
<br>
<div class="input-group">
	<input type="text" class="form-control" placeholder="テキスト入力欄">
	<span class="input-group-btn">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
			ボタン
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">リンクのリスト１</a></li>
			<li><a href="#">リンクのリスト２</a></li>
			<li><a href="#">リンクのリスト３</a></li>
		</ul>
	</span>
</div>
<br>
<div class="input-group">
	<span class="input-group-btn">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
			ボタン
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">リンクのリスト１</a></li>
			<li><a href="#">リンクのリスト２</a></li>
			<li><a href="#">リンクのリスト３</a></li>
		</ul>
	</span>
	<input type="text" class="form-control" placeholder="テキスト入力欄">
	<span class="input-group-btn">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
			ボタン
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">リンクのリスト１</a></li>
			<li><a href="#">リンクのリスト２</a></li>
			<li><a href="#">リンクのリスト３</a></li>
		</ul>
	</span>
</div>

セパレート式ドロップダウン・ボタンを配置

テキスト入力欄のサイドに、セパレート式ドロップダウン・ボタンを配置するスタイル。

表示サンプル



ソースコード

<div class="input-group">
	<span class="input-group-btn">
		<button type="button" class="btn btn-default">
			ボタン
		</button>
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">リンクのリスト１</a></li>
			<li><a href="#">リンクのリスト２</a></li>
			<li><a href="#">リンクのリスト３</a></li>
		</ul>
	</span>
	<input type="text" class="form-control" placeholder="テキスト入力欄">
</div>
<br>
<div class="input-group">
	<input type="text" class="form-control" placeholder="テキスト入力欄">
	<span class="input-group-btn">
		<button type="button" class="btn btn-default">
			ボタン
		</button>
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">リンクのリスト１</a></li>
			<li><a href="#">リンクのリスト２</a></li>
			<li><a href="#">リンクのリスト３</a></li>
		</ul>
	</span>
</div>
<br>
<div class="input-group">
	<span class="input-group-btn">
		<button type="button" class="btn btn-default">
			ボタン
		</button>
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">リンクのリスト１</a></li>
			<li><a href="#">リンクのリスト２</a></li>
			<li><a href="#">リンクのリスト３</a></li>
		</ul>
	</span>
	<input type="text" class="form-control" placeholder="テキスト入力欄">
	<span class="input-group-btn">
		<button type="button" class="btn btn-default">
			ボタン
		</button>
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">リンクのリスト１</a></li>
			<li><a href="#">リンクのリスト２</a></li>
			<li><a href="#">リンクのリスト３</a></li>
		</ul>
	</span>
</div>
広告
関連ページ
アイコンドロップダウンボタン・グループドロップダウン・ボタンインプット・グループナビゲーションナビゲーション・バーパンくずリストページネーションラベルバッジジャンボトロンページ・ヘッダーサムネイルアラートプログレス・バーメディア・オブジェクトリスト・グループパネルレスポンシブな埋め込み埋め込み効果
広告