メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

インプットグループ(Input group) v4.0.0-beta.3設定変更

テキスト入力、カスタム選択、カスタムファイル入力の両側にテキスト、ボタン、またはボタングループを追加して、フォームコントロールを簡単に拡張可能。

基本のインプットグループ(Basic example)v4.0.0-beta.3設定変更

1つのアドオンまたはボタンをインプットの両側に配置。また、インプットの両側に配置することも可能。<label> はインプットグループの外に置くこと。

見本

●前にアドオン:.input-group-prepend

@

●後にアドオン:.input-group-append

@example.com

●ラベル付きアドオン

https://example.com/users/

●前後にアドオン

$
.00

●コントロールがテキストエリアの場合

テキストエリア付き
Bootstrap3.xの設定例 赤背景が変更箇所
前にアドオン<div class="input-group">
	<span class="input-group-addon" id="basic-addon1">@</span>
	<input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
</div>
後にアドオン<div class="input-group">
	<input type="text" class="form-control" placeholder="受信者のユーザー名" aria-label="受信者のユーザー名" aria-describedby="basic-addon2">
	<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
ラベル付きアドオン<label for="basic-url">偽のURL</label>
<div class="input-group">
	<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
	<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
前後にアドオン<div class="input-group">
	<span class="input-group-addon">$</span>
	<input type="text" class="form-control" aria-label="ドル金額(小数点以下2桁)">
	<span class="input-group-addon">.00</span>
</div>
設定例
コントロールがテキストエリア<div class="input-group">
	<span class="input-group-addon" id="basic-textarea">テキストエリア付き</span>
	<textarea class="form-control" aria-label="テキストエリア付き" aria-describedby="basic-textarea"></textarea>
</div>
Bootstrap4.xの設定例 緑背景が変更箇所
前にアドオンコピー<div class="input-group mb-3">
	<div class="input-group-prepend">
		<span class="input-group-text" id="basic-addon1">@</span>
	</div>
	<input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
</div>
後にアドオンコピー<div class="input-group mb-3">
	<input type="text" class="form-control" placeholder="受信者のユーザー名" aria-label="受信者のユーザー名" aria-describedby="basic-addon2">
	<div class="input-group-append">
		<span class="input-group-text" id="basic-addon2">@example.com</span>
	</div>
</div>
ラベル付きアドオンコピー<label for="basic-url">偽のURL</label>
<div class="input-group mb-3">
	<div class="input-group-prepend">
		<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
	</div>
	<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
前後にアドオンコピー<div class="input-group">
	<div class="input-group-prepend">
		<span class="input-group-text">$</span>
	</div>
	<input type="text" class="form-control" aria-label="ドル金額(小数点以下2桁)">
	<div class="input-group-append">
		<span class="input-group-text">.00</span>
	</div>
</div>
設定例
コントロールがテキストエリアコピー<div class="input-group">
	<div class="input-group-prepend">
		<span class="input-group-text" id="basic-textarea">テキストエリア付き</span>
	</div>
	<textarea class="form-control" aria-label="テキストエリア付き" aria-describedby="basic-textarea"></textarea>
</div>

【設定】

  • 前にアドオン:.input-group > [div.input-group-prepend > span.input-group-text《アドオン》 + input.form-control《コントロール》]
  • 後にアドオン:.input-group > [input.form-control《コントロール》 + div.input-group-append > span.input-group-text《アドオン》]
  • ラベル付きアドオン:<label> + .input-group
  • 前後にアドオン:.input-group > [div.input-group-prepend > span.input-group-text《アドオン》 + input.form-control《コントロール》 + input.form-control《コントロール》 + div.input-group-append > span.input-group-text《アドオン》]

【注意】

アクセシビリティの設定】

  • <input> には、
    • アドオンが1つだけの場合は aria-describedby 属性(アドオン部のIDを指定)
    • アドオンが2つの場合は aria-label 属性(代替テキストを指定)
    を入れる

【Bootstrap3.xとの変更箇所】

  • アドオン:span.input-group-addondiv.input-group-{prepend,append} > span.input-group-text

 

インプットグループのラッピング(Wrapping)v4.2.1新設

インプットグループ内のカスタムフォームフィールドの検証に対応するために、インプットグループはデフォルトでは flex-wrap:wrap(折り返しあり)で囲まれている。.flex-nowrap(折り返しなし)でこれを無効に。

見本
@
設定例
コピー<div class="input-group flex-nowrap">
	<div class="input-group-prepend">
		<span class="input-group-text" id="addon-wrapping">@</span>
	</div>
	<input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="addon-wrapping">
</div>

【設定】

  • .input-group.flex-nowrap を追加

 

インプットグループのサイズ(Sizing)

相対的なフォームサイズのクラスを .input-group 自体に追加すると、その中の内容は自動的にサイズ変更される。各要素のフォームコントロールサイズのクラスを繰り返す必要はない。

個々のインプットグループ要素のサイズ設定はサポートされていない。

見本

●大きめ:.input-group-lg

大きめ

●小さめ:.input-group-sm

小さめ

※標準(参考)

標準
設定例
大きめコピー<div class="input-group input-group-lg mb-3">
	<div class="input-group-prepend">
		<span class="input-group-text" id="inputGroup-sizing-lg">@</span>
	</div>
	<input type="text" class="form-control" placeholder="ユーザー名" aria-label="サイズの入力例" aria-describedby="inputGroup-sizing-lg">
</div>
小さめコピー<div class="input-group input-group-sm mb-3">
	<div class="input-group-prepend">
		<span class="input-group-text" id="inputGroup-sizing-sm">@</span>
	</div>
	<input type="text" class="form-control" placeholder="ユーザー名" aria-label="サイズの入力例" aria-describedby="inputGroup-sizing-sm">
</div>

【設定】

  • .input-group.input-group-{size}(上記の「サイズの種類」から選択)を追加

 

チェックボックスとラジオボタン(Checkboxes and radios)

インプットグループのアドオン内にテキストではなくチェックボックスまたはラジオボタンのオプションを配置。

見本

●チェックボックスの場合

●ラジオボタンの場合

設定例
チェックボックスの場合コピー<div class="input-group mb-3">
	<div class="input-group-prepend">
		<div class="input-group-text">
			<input type="checkbox" aria-label="...">
		</div>
	</div>
	<input type="text" class="form-control" aria-label="...">
</div>
ラジオボタンの場合コピー<div class="input-group">
	<div class="input-group-prepend">
		<div class="input-group-text">
			<input type="radio" aria-label="...">
		</div>
	</div>
	<input type="text" class="form-control" aria-label="...">
</div>

【設定】

  • チェックボックス:.input-group > [div.input-group-{prepend,append} > input[type="checkbox"]]《アドオン》
  • ラジオボタン:.input-group > [div.input-group-{prepend,append} > input[type="radio"]]《アドオン》

アクセシビリティの設定】

  • チェックボックスやラジオボタン部分の <input> にも aria-label 属性(代替テキストを指定)を入れる

 

マルチインプット(Multiple inputs)v4.0.0-beta.3新設

複数の <input> が視覚的にサポートされているが、検証スタイルでは単一の <input> を持つインプットグループに対してのみ使用可能。

見本
名前と苗字
設定例
コピー<div class="input-group">
	<div class="input-group-prepend">
		<span class="input-group-text">苗字と名前</span>
	</div>
	<input type="text" class="form-control" aria-label="苗字">
	<input type="text" class="form-control" aria-label="名前">
</div>

【設定】

  • コントロール部分に複数の input.form-control を入れる

 

マルチアドオン(Multiple addons)

複数のアドオンがサポートされており、チェックボックスやラジオボタンの入力バージョンと混在させることも可能。

見本
$ 0.00
$ 0.00
設定例
コピー<div class="input-group mb-3">
	<div class="input-group-prepend">
		<span class="input-group-text">$</span>
		<span class="input-group-text">0.00</span>
	</div>
	<input type="text" class="form-control" aria-label="ドル金額(小数点以下2桁)">
</div>

<div class="input-group">
	<input type="text" class="form-control" aria-label="ドル金額(小数点以下2桁)">
	<div class="input-group-append">
		<span class="input-group-text">$</span>
		<span class="input-group-text">0.00</span>
	</div>
</div>

【設定】

  • 片側に2つのアドオンを入れる(アドオンはチェックボックスやラジオボタン付きでも可)

 

ボタンアドオン(Button addons)v4.0.0-beta.3設定変更

アドオン部分がボタンになっている。

見本

●前にボタン

●後にボタン

●前後にボタン

●前に複数のボタン

●後に複数のボタン

Bootstrap3.xの設定例 赤背景が変更箇所
前にボタン<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="..." aria-label="...">
</div>
後にボタン<div class="input-group">
	<input type="text" class="form-control" placeholder="..." aria-label="...">
	<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">ボタン</button>
	</span>
	<input type="text" class="form-control" placeholder="..." aria-label="...">
	<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">ボタン</button>
		<button type="button" class="btn btn-default">ボタン</button>
	</span>
	<input type="text" class="form-control" placeholder="..." aria-label="...">
</div>
後に複数のボタン<div class="input-group">
	<input type="text" class="form-control" placeholder="..." aria-label="...">
	<span class="input-group-btn">
		<button type="button" class="btn btn-default">ボタン</button>
		<button type="button" class="btn btn-default">ボタン</button>
	</span>
</div>
Bootstrap4.xの設定例 緑背景が変更箇所
前にボタンコピー<div class="input-group mb-3">
	<div class="input-group-prepend">
		<button type="button" id="button-addon1" class="btn btn-outline-secondary">ボタン</button>
	</div>
	<input type="text" class="form-control" placeholder="..." aria-label="..." aria-describedby="button-addon1">
</div>
後にボタンコピー<div class="input-group mb-3">
	<input type="text" class="form-control" placeholder="..." aria-label="..." aria-describedby="button-addon2">
	<div class="input-group-append">
		<button type="button" id="button-addon2" class="btn btn-outline-secondary">ボタン</button>
	</div>
</div>
前後にボタンコピー<div class="input-group mb-3">
	<div class="input-group-prepend">
		<button type="button" class="btn btn-outline-secondary">ボタン</button>
	</div>
	<input type="text" class="form-control" placeholder="..." aria-label="...">
	<div class="input-group-append">
		<button type="button" class="btn btn-outline-secondary">ボタン</button>
	</div>
</div>
前に複数のボタンコピー<div class="input-group mb-3">
	<div class="input-group-prepend" id="button-addon3">
		<button type="button" class="btn btn-outline-secondary">ボタン</button>
		<button type="button" class="btn btn-outline-secondary">ボタン</button>
	</div>
	<input type="text" class="form-control" placeholder="..." aria-label="..." aria-describedby="button-addon3">
</div>
後に複数のボタン<div class="input-group">
	<input type="text" class="form-control" placeholder="..." aria-label="..." aria-describedby="button-addon4">
	<div class="input-group-append" id="button-addon4">
		<button type="button" class="btn btn-outline-secondary">ボタン</button>
		<button type="button" class="btn btn-outline-secondary">ボタン</button>
	</div>
</div>
設定例

【設定】

  • .input-group > [div.input-group-{prepend,append} > button.btn]《アドオン》

【Bootstrap3.xとの変更箇所】

  • span.input-group-btndiv.input-group-{prepend,append}

 

ドロップダウンつきボタンアドオン(Buttons with dropdowns)v4.0.0-beta.3設定変更

アドオン部分がボタンドロップダウンになっている。

見本
Bootstrap3.xの設定例 赤背景が変更箇所
前にボタン<div class="input-group">
	<div class="input-group-btn">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			アクション <span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">メニュー1</a></li>
			...
			<li role="separator" class="divider"></li>
			...
		</ul>
	</div><!-- /.input-group-btn -->
	<input type="text" class="form-control" aria-label="...">
</div><!-- /.input-group -->
後にボタン<div class="input-group">
	<input type="text" class="form-control" aria-label="...">
	<div class="input-group-btn">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			アクション <span class="caret"></span>
		</button>
		<ul class="dropdown-menu dropdown-menu-right">
			<li><a href="#">メニュー1</a></li>
			...
			<li role="separator" class="divider"></li>
			...
		</ul>
	</div><!-- /.input-group-btn -->
</div><!-- /.input-group -->
Bootstrap4.xの設定例 緑背景が変更箇所
前にボタンコピー<div class="input-group">
	<div class="input-group-prepend">
		<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			アクション
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="#">メニュー1</a>
			...
			<div role="separator" class="dropdown-divider"></div>
			...
		</div><!-- /.dropdown-menu -->
	</div><!-- /.input-group-prepend -->
	<input type="text" class="form-control" aria-label="...">
</div><!-- /.input-group -->
後にボタンコピー<div class="input-group">
	<input type="text" class="form-control" aria-label="...">
	<div class="input-group-append">
		<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			アクション
		</button>
		<div class="dropdown-menu dropdown-menu-right">
			<a class="dropdown-item" href="#">メニュー1</a>
			...
			<div role="separator" class="dropdown-divider"></div>
			...
		</div><!-- /.dropdown-menu -->
	</div><!-- /.input-group-append -->
</div><!-- /.input-group -->

【設定】

  • .input-group > {div.input-group-{prepend,append} > [button.btn.dropdown-toggle[data-toggle="dropdown"]]《ドロップダウンボタン》 + [div.dropdown-menu > a.dropdown-item]《ドロップメニュー》}《アドオン》
  • 後にボタンドロップダウンがつく場合は、div.dropdown-menu.dropdown-menu-right を追加

【Bootstrap3.xとの変更箇所】

  • アドオンボタン:.input-group-btn.input-group-{prepend,append}
  • キャレット(▼):<span class="caret"></span> の設定は不要
  • ドロップメニュー:ul.dropdown-menu > li > adiv.dropdown-menu > a.dropdown-item
  • 仕切り線: li.dividerdiv.dropdown-divider

 

分離ボタンのアドオン(Segmented buttons)v4.0.0-beta.3設定変更

アドオン部分が分離ボタンになっている。

見本
Bootstrap3.xの設定例 赤背景が変更箇所
前にボタン<div class="input-group">
	<div class="input-group-btn">
		<button type="button" class="btn btn-default">アクション <span class="caret"></span></button>
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			<span class="sr-only">切替ボタン</span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">メニュー1</a></li>
			...
			<li role="separator" class="divider"></li>
			...
		</ul>
	</div><!-- /.input-group-btn -->
	<input type="text" class="form-control" aria-label="...">
</div><!-- /.input-group -->
後にボタン<div class="input-group">
	<input type="text" class="form-control" aria-label="...">
	<div class="input-group-btn">
		<button type="button" class="btn btn-default">アクション <span class="caret"></span></button>
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			<span class="sr-only">切替ボタン</span>
		</button>
		<ul class="dropdown-menu dropdown-menu-right">
			<li><a href="#">メニュー1</a></li>
			...
			<li role="separator" class="divider"></li>
			...
		</ul>
	</div><!-- /.input-group-btn -->
</div><!-- /.input-group -->
Bootstrap4.xの設定例 緑背景が変更箇所
前にボタンコピー<div class="input-group">
	<div class="input-group-prepend">
		<button type="button" class="btn btn-outline-secondary">アクション</button>
		<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			<span class="sr-only">切替ボタン</span>
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="#">メニュー1</a>
			...
			<div role="separator" class="dropdown-divider"></div>
			...
		</div><!-- /.dropdown-menu -->
	</div><!-- /.input-group-prepend -->
	<input type="text" class="form-control" aria-label="...">
</div><!-- /.input-group -->
後にボタンコピー<div class="input-group">
	<input type="text" class="form-control" aria-label="...">
	<div class="input-group-append">
		<button type="button" class="btn btn-outline-secondary">アクション</button>
		<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			<span class="sr-only">切替ボタン</span>
		</button>
		<div class="dropdown-menu dropdown-menu-right">
			<a class="dropdown-item" href="#">メニュー1</a>
			...
			<div role="separator" class="dropdown-divider"></div>
			...
		</div><!-- /.dropdown-menu -->
	</div><!-- /.input-group-append -->
</div><!-- /.input-group -->

【設定】

  • .input-group > {div.input-group-{prepend,append} > [button.btn《ボタン》 + [button.btn.dropdown-toggle[data-toggle="dropdown"]]《ドロップダウンボタン》 + [div.dropdown-menu > a.dropdown-item]《ドロップメニュー》]}《アドオン》
  • 後にボタンドロップダウンがつく場合は、div.dropdown-menu.dropdown-menu-right を追加

【Bootstrap3.xとの変更箇所】

  • アドオンボタン:.input-group-btn.input-group-{prepend,append}
  • キャレット(▼):<span class="caret"></span> の設定は不要
  • ドロップメニュー:ul.dropdown-menu > li > adiv.dropdown-menu > a.dropdown-item
  • 仕切り線: li.dividerdiv.dropdown-divider

 

カスタムフォーム(Custom forms)v4.0.0-beta.3新設

インプットグループには、カスタム選択とカスタムファイル入力のサポートが含まれる。これらのブラウザのデフォルトバージョンはサポートされていない。

カスタム選択メニュー(Custom select)

見本
設定例
前にアドオンコピー<div class="input-group mb-3">
	<div class="input-group-prepend">
		<label class="input-group-text" for="inputGroupSelect01">オプション</label>
	</div>
	<select class="custom-select" id="inputGroupSelect01">
		<option selected>選択...</option>
		<option value="1">その1</option>
		<option value="2">その2</option>
		<option value="3">その3</option>
	</select>
</div>
後にアドオンコピー<div class="input-group mb-3">
	<select class="custom-select" id="inputGroupSelect02">
		<option selected>選択...</option>
		<option value="1">その1</option>
		<option value="2">その2</option>
		<option value="3">その3</option>
	</select>
	<div class="input-group-append">
		<label class="input-group-text" for="inputGroupSelect02">オプション</label>
	</div>
</div>
前にボタンコピー<div class="input-group mb-3">
	<div class="input-group-prepend">
		<button type="button" class="btn btn-outline-secondary">ボタン</button>
	</div>
	<select class="custom-select" id="inputGroupSelect03" aria-label="ボタンアドオンで選択する例">
		<option selected>選択...</option>
		<option value="1">その1</option>
		<option value="2">その2</option>
		<option value="3">その3</option>
	</select>
</div>
後にボタンコピー<div class="input-group">
	<select class="custom-select" id="inputGroupSelect04" aria-label="ボタンアドオンで選択する例">
		<option selected>選択...</option>
		<option value="1">その1</option>
		<option value="2">その2</option>
		<option value="3">その3</option>
	</select>
	<div class="input-group-append">
		<button class="btn btn-outline-secondary" type="button">ボタン</button>
	</div>
</div>

【設定】

【注意】

  • 選択メニューの幅は、メニューの幅ではなく100%になる

カスタムファイル選択(Custom file input)

※注意:v4.1.2ではcssの設定にバグがあり、ファイル選択画面が起動しない⇒v4.1.3で修正済

見本 カスタムで日本語に設定済
アップロード
アップロード
設定例
前にアドオンコピー<div class="input-group mb-3">
	<div class="input-group-prepend">
		<span class="input-group-text" id="inputGroupFileAddon01">アップロード</span>
	</div>
	<div class="custom-file">
		<input type="file" id="inputGroupFile01" class="custom-file-input" aria-describedby="inputGroupFileAddon01">
		<label class="custom-file-label" for="inputGroupFile01">ファイル選択...</label>
	</div>
</div>
後にアドオンコピー<div class="input-group mb-3">
	<div class="custom-file">
		<input type="file" id="inputGroupFile02" class="custom-file-input" aria-describedby="inputGroupFileAddon02">
		<label class="custom-file-label" for="inputGroupFile02">ファイル選択...</label>
	</div>
	<div class="input-group-append">
		<span class="input-group-text" id="inputGroupFileAddon02">アップロード</span>
	</div>
</div>
前にボタンコピー<div class="input-group mb-3">
	<div class="input-group-prepend">
		<button type="button" class="btn btn-outline-secondary" id="inputGroupFileAddon03">ボタン</button>
	</div>
	<div class="custom-file">
		<input type="file" id="inputGroupFile03" class="custom-file-input" aria-describedby="inputGroupFileAddon03">
		<label class="custom-file-label" for="inputGroupFile03">ファイル選択...</label>
	</div>
</div>
後にボタンコピー<div class="input-group">
	<div class="custom-file">
		<input type="file" id="inputGroupFile04" class="custom-file-input" aria-describedby="inputGroupFileAddon04">
		<label class="custom-file-label" for="inputGroupFile04">ファイル選択...</label>
	</div>
	<div class="input-group-append">
		<button type="button" class="btn btn-outline-secondary" id="inputGroupFileAddon04">ボタン</button>
	</div>
</div>

【設定】

  • コントロールの部分を div.custom-file > [input.custom-file-input[type="file"] + label.custom-file-label] のカスタムファイル選択にする

【注意】

  • ファイル選択の幅は、メニューの幅ではなく100%になる

 

アクセシビリティ(Accessibility)

すべてのインプットにラベルを付けないと、スクリーンリーダーでフォームに問題が発動する。これらのインプットグループについては、追加のラベルまたは機能が支援技術に伝えられることを確認すること。

使用される正確な技術(.sr-only クラスを使用して非表示にした <label> 要素、または aria-describedby と組み合わせた aria-labelaria-labelledby 属性の使用)と、どのような追加情報を伝える必要があるかは、実装しているインターフェース・ウィジェットの正確なタイプによって異なる。このアイテムの例では、ケース固有のアプローチをいくつか提案している。