English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap基本教程

Bootstrapプラグイン

Bootstrap インプットグループ

この章では、Bootstrapがサポートする別の機能である入力ボックスグループについて説明します。入力ボックスグループは以下から拡張されています。 フォームコントロール入力ボックスグループを使用すると、テキストベースの入力ボックスにプレフィックスやサフィックスとしてテキストやボタンを簡単に追加できます。

ユーザー入力にプレフィックスやサフィックスの内容を追加することで、ユーザー入力に共有の要素を追加できます。例えば、ドル記号を追加したり、Twitterユーザー名の前に@を追加したり、アプリケーションインターフェースが必要な他の共有の要素を追加したりできます。

に .form-control プレフィックスやサフィックス要素を追加する手順は以下の通りです：

  • プレフィックスまたはサフィックス要素をclassを持つ .input-group の<div>内。

  • のclassが .input-group-addon の<span>内に追加の内容を配置します。

  • を<input>要素の前または後に配置します。

ブラウザ間の互換性を維持するために、WebKitブラウザでは完全にレンダリングされないため、<select>要素を使用を避けてください。また、フォームグループに直接入力フィールドグループのclassを適用することも避けてください。入力フィールドグループは独立したコンポーネントです。

基本的な入力フィールドグループ

以下の例では基本的な入力フィールドグループを示します：

オンラインサンプル

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">
	<title>Bootstrap　サンプル　-　基本的な入力フィールドグループ</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　style="padding:　100px　100px　10px;">
	<form　class="bs-example　bs-example-form"　role="form">
		<div　class="input-group">
			<span　class="input-group-addon">@</span>
			<input　type="text"　class="form-control"　placeholder="twitterhandle">
		</div>
		<br>
		<div　class="input-group">
			<input　type="text"　class="form-control">
			<span　class="input-group-addon">.00</span>
		</div>
		<br>
		<div　class="input-group">
			<span　class="input-group-addon">$</span>
			<input　type="text"　class="form-control">
			<span　class="input-group-addon">.00</span>
		</div>
	</form>
</div>
</body>
</html>
テストを見てみましょう ‹/›

以下の結果が表示されます：

入力フィールドグループのサイズ

を通じて .input-group 相対的なフォームサイズのclass（例えば .input-group-lg、input-group-sm）を使用して入力フィールドグループのサイズを変更します。入力フィールド内の内容は自動的にサイズ調整されます。

以下の例がその点を示しています：

オンラインサンプル

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">
	<title>Bootstrap　サンプル　-　入力フィールドグループのサイズ</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　style="padding:　100px　100px　10px;">
	<form　class="bs-example　bs-example-form"　role="form">
		<div　class="input-group　input-group-lg">
			<span　class="input-group-addon">@</span>
			<input　type="text"　class="form-control"　placeholder="Twitterhandle">
		</div><br>
		<div　class="input-group">
			<span　class="input-group-addon">@</span>
			<input　type="text"　class="form-control"　placeholder="Twitterhandle">
		</div><br>
		<div　class="input-group　input-group-sm">
			<span　class="input-group-addon">@</span>
			<input　type="text"　class="form-control"　placeholder="Twitterhandle">
		</div>
	</form>
</div>
</body>
</html>
テストを見てみましょう ‹/›

以下の結果が表示されます：

チェックボックスとラジオプラグイン

チェックボックスとラジオプラグインを入力フィールドグループのプレフィックスまたはサフィックス要素として使用することもできます。以下の例がその方法を示しています：

オンラインサンプル

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Bootstrap　サンプル　-　入力フィールドグループのチェックボックスとラジオプラグイン</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　style="padding:　100px　100px　10px;">
	<form　class="bs-example　bs-example-form"　role="form">
		<div　class="row">
			<div　class="col-lg-6">
				<div　class="input-group">
					<span　class="input-group-addon">
						<input　type="checkbox">
					</span>
					<input　type="text"　class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div　class="col-lg-6">
				<div　class="input-group">
					<span　class="input-group-addon">
						<input　type="radio">
					</span>
					<input　type="text"　class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
テストを見てみましょう ‹/›

以下の結果が表示されます：

ボタンプラグイン

ボタンを入力フィールドグループのプレフィックスまたはサフィックス要素として使用することもできます。この場合、ボタンプラグインを追加するのではなく、 .input-group-addon class、classを使用する必要があります .input-group-btn ボタンを囲むために必要です。デフォルトのブラウザのスタイルは上書きされません。以下の例がその点を示しています：

オンラインサンプル

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Bootstrap　サンプル　-　入力フィールドグループのボタンプラグイン</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　style="padding:　100px　100px　10px;">
	<form　class="bs-example　bs-example-form"　role="form">
		<div　class="row">
			<div　class="col-lg-6">
				<div　class="input-group">
					<span　class="input-group-btn">
						<button　class="btn　btn-default"　type="button">
							Go!
						</button>
					</span>
					<input　type="text"　class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div　class="col-lg-6">
				<div　class="input-group">
					<input　type="text"　class="form-control">
					<span　class="input-group-btn">
						<button　class="btn　btn-default"　type="button">
							Go!
						</button>
					</span>
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
テストを見てみましょう ‹/›

以下の結果が表示されます：

ドロップダウンメニューを持つボタン

入力フィールドグループにドロップダウンメニューを持つボタンを追加するには、単純に一つの .input-group-btn class 　内にボタンとドロップダウンメニューを囲むだけで、以下の例のように表示されます：

オンラインサンプル

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Bootstrap　サンプル　-　フォームグループのドロップダウンメニューのボタン</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　style="padding:　100px　100px　10px;">
	<form　class="bs-example　bs-example-form"　role="form">
		<div　class="row">
			<div　class="col-lg-6">
				<div　class="input-group">
					<div　class="input-group-btn">
						<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown">
							ドロップダウンメニュー　
							<span　class="caret"></span>
						</button>
						<ul　class="dropdown-menu">
							<li><a　href="#">機能</a></li>
							<li><a　href="#">別の機能</a></li>
							<li><a　href="#">その他</a></li>
							<li　class="divider"></li>
							<li><a　href="#">分離されたリンク</a></li>
						</ul>
					</div><!--　/btn-group　-->
					<input　type="text"　class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div　class="col-lg-6">
				<div　class="input-group">
					<input　type="text"　class="form-control">
					<div　class="input-group-btn">
						<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown">
							ドロップダウンメニュー　
							<span　class="caret"></span>
						</button>
						<ul　class="dropdown-menu　pull-right">
							<li><a　href="#">機能</a></li>
							<li><a　href="#">別の機能</a></li>
							<li><a　href="#">その他</a></li>
							<li　class="divider"></li>
							<li><a　href="#">分離されたリンク</a></li>
						</ul>
					</div><!--　/btn-group　-->
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
テストを見てみましょう ‹/›

以下の結果が表示されます：

分割されたドロップダウンメニューのボタン

フォームグループにドロップダウンメニューを持つ分割ボタンを追加し、ドロップダウンメニューのボタンとほぼ同じスタイルを使用しますが、以下の例のように主要な機能を追加します：

オンラインサンプル

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Bootstrap　サンプル　-　フォームグループ内に分割されたドロップダウンメニューのボタン</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　style="padding:　100px　100px　10px;">
	<form　class="bs-example　bs-example-form"　role="form">
		<div　class="row">
			<div　class="col-lg-6">
				<div　class="input-group">
					<div　class="input-group-btn">
						<button　type="button"　class="btn　btn-default"　tabindex="-1">ドロップダウンメニュー<
						</button>
						<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown"　tabindex="-1">
							<span　class="caret"></span>
							<span　class="sr-only">メニューを下げる</span>
						</button>
						<ul　class="dropdown-menu">
							<li><a　href="#">機能</a></li>
							<li><a　href="#">別の機能</a></li>
							<li><a　href="#">その他</a></li>
							<li　class="divider"></li>
							<li><a　href="#">分離されたリンク</a></li>
						</ul>
					</div><!--　/btn-group　-->
					<input　type="text"　class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div　class="col-lg-6">
				<div　class="input-group">
					<input　type="text"　class="form-control">
					<div　class="input-group-btn">
						<button　type="button"　class="btn　btn-default"　tabindex="-1">ドロップダウンメニュー<
						</button>
						<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown"　tabindex="-1">
							<span　class="caret"></span>
							<span　class="sr-only">メニューを下げる</span>
						</button>
						<ul　class="dropdown-menu　pull-right">
							<li><a　href="#">機能</a></li>
							<li><a　href="#">別の機能</a></li>
							<li><a　href="#">その他</a></li>
							<li　class="divider"></li>
							<li><a　href="#">分離されたリンク</a></li>
						</ul>
					</div><!--　/btn-group　-->
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
テストを見てみましょう ‹/›

以下の結果が表示されます：

Bootstrap ナビゲーション要素Bootstrap ボタンダウンロードメニュー