リストグループ（List group） v4.0.0一部変更 v4.3.0一部追加

基本のリストグループ（Basic example）

最も基本的なリストグループは、リストアイテムと適切なクラスを持つ順不同のリスト。それに続くオプションや必要に応じて独自のCSSを使って構築。

見本

設定例

コピー<ul class="list-group" style="max-width: 400px;">
	<li class="list-group-item">アイテム1</li>
	<li class="list-group-item">アイテム2</li>
	<li class="list-group-item">アイテム3</li>
</ul>

アクティブなアイテム（Active items）v4.6.0設定変更

.active を .list-group-item に追加すると、現在のアクティブな選択を示す。

見本

設定例 緑背景がv4.6.0での変更箇所

コピー<ul class="list-group" style="max-width: 400px;">
	<li class="list-group-item active" aria-current="true">アイテム1</li>
	<li class="list-group-item">アイテム2</li>
	<li class="list-group-item">アイテム3</li>
</ul>

無効のアイテム（Disabled items）v4.2.1設定変更

.disabled を .list-group-item に追加すると、無効に見えるようになる。.disabled を持つ要素の中には、（リンクなど）クリックイベントを完全に無効にするカスタムJavaScriptが必要な場合がある。

見本

設定例

コピー<ul class="list-group" style="max-width: 400px;">
	<li class="list-group-item disabled" aria-disabled="true">アイテム1</li>
	<li class="list-group-item">アイテム2</li>
	<li class="list-group-item">アイテム3</li>
</ul>

リンク付き＆ボタンによるリストグループ（Links and buttons）

.list-group-item-action を追加することで、ホバー、無効、アクティブ状態のアクション可能なリストグループアイテムを作成するには、<a> または <button> を使用する。これらの擬似クラスを分離して、非対話型要素（<li> または <div> など）で作成されたリストグループがクリックまたはタップ機能を提供しないようにする。

ここでは、デフォルトの .btn クラスは使用しないこと。

1. リンク付きリストグループ v4.6.1設定変更

見本

<div class="list-group" style="max-width: 400px;">
	<a href="#" class="list-group-item active">現在のリンクアイテム</a>
	<a href="#" class="list-group-item">リンクアイテム2</a>
	<a href="#" class="list-group-item">リンクアイテム3</a>
	<a href="#" class="list-group-item disabled" tabindex="-1" aria-disabled="true">無効のリンクアイテム</a>
</div>

コピー<div class="list-group" style="max-width: 400px;">
	<a href="#" class="list-group-item list-group-item-action active" aria-current="true">現在のリンクアイテム</a>
	<a href="#" class="list-group-item list-group-item-action">リンクアイテム2</a>
	<a href="#" class="list-group-item list-group-item-action">リンクアイテム3</a>
	<a class="list-group-item list-group-item-action disabled">無効のリンクアイテム</a>
</div>

2. ボタンによるリストグループ v4.0.0設定変更、v4.3.0機能変更

<button> では、.disabled クラスの代わりに disabled 属性も使用可能。悲しいことに、<a> は disabled 属性をサポートしていない。

見本

<div class="list-group" style="max-width: 400px;">
	<button type="button" class="list-group-item active">現在のボタンアイテム</button>
	<button type="button" class="list-group-item">ボタンアイテム2</button>
	<button type="button" class="list-group-item">ボタンアイテム3</button>
	<button type="button" class="list-group-item disabled">無効のボタンアイテム</button>
</div>

コピー<div class="list-group" style="max-width: 400px;">
	<button type="button" class="list-group-item list-group-item-action active" aria-current="true">現在のボタンアイテム</button>
	<button type="button" class="list-group-item list-group-item-action">ボタンアイテム2</button>
	<button type="button" class="list-group-item list-group-item-action">ボタンアイテム3</button>
	<button type="button" class="list-group-item list-group-item-action" disabled>無効のボタンアイテム</button>
</div>

枠なし（Flush）4.0.0新設

.list-group-flush を追加すると、親コンテナ（カードなど）内でリストグループアイテムを端から端まで描画するために、いくつかの枠線と丸みのある角を削除可能。

見本

設定例

コピー<ul class="list-group list-group-flush" style="max-width: 400px;">
	<li class="list-group-item">アイテム1</li>
	<li class="list-group-item">アイテム2</li>
	<li class="list-group-item">アイテム3</li>
</ul>

水平スタイル（Horizontal）v4.3.0新設

全てのブレークポイントにわたってリストグループアイテムのレイアウトを縦並びから横並びに変更するには .list-group-horizontal を追加する。あるいは、レスポンシブ形式の .list-group-horizontal-{sm|md|lg|xl} を選択して、そのブレークポイントの min-width で始まるリストグループを水平にする。今のところ水平リストグループは枠なしリストグループと組み合わせることは不可。

ヒント：横並びの場合、等幅のリストグループアイテムが必要なら、各リストグループアイテム（.list-group-item）に .flex-fill を追加すること。

定義済クラスの組み合わせ

見本

設定例

全てのブレークポイントコピー<ul class="list-group list-group-horizontal">
	<li class="list-group-item">アイテム1</li>
	<li class="list-group-item">アイテム2（長め）</li>
	<li class="list-group-item">アイテム3</li>
</ul>

特定のブレークポイントコピー<ul class="list-group list-group-horizontal-**">
	<li class="list-group-item">アイテム1</li>
	<li class="list-group-item">アイテム2（長め）</li>
	<li class="list-group-item">アイテム3</li>
</ul>

等幅のリストグループコピー<ul class="list-group list-group-horizontal">
	<li class="list-group-item flex-fill">アイテム1</li>
	<li class="list-group-item flex-fill">アイテム2（長め）</li>
	<li class="list-group-item flex-fill">アイテム3</li>
</ul>

リストグループの背景色（Contextual classes）

背景色のクラスを使用して、状態が反映された背景と色でリストアイテムのスタイルを設定。

背景色の種類

設定例

コピー<ul class="list-group" style="max-width: 500px;">
	<li class="list-group-item list-group-item-primary">アイテム</li>
	...
</ul>

背景色のクラスも .list-group-item-action で動作。ここではホバースタイルも追加されていることに注意。.active 状態もサポートし、背景色のついたリストグループアイテムのアクティブな選択を示すためにそれを適用。

背景色の種類

設定例

コピー<div class="list-group" style="max-width: 500px;">
	<a href="#" class="list-group-item list-group-item-action list-group-item-primary active">アクティブ化</a>
	<a href="#" class="list-group-item list-group-item-action list-group-item-primary">アイテム</a>
	...
</div>

枠線の色 ※裏技

各リストの枠線の色を変える。

見本

設定例

コピー<ul class="list-group" style="max-width: 400px;">
	<li class="list-group-item border-warning">アイテム1</li>
	<li class="list-group-item border-info">アイテム2</li>
	<li class="list-group-item border-danger">アイテム3</li>
</ul>

バッジ付きリストグループ（With badges）v4.0.0設定変更

いくつかのユーティリティの助けを借りて、未読の数、活動などを表示するために、リストグループアイテムにバッジを追加。

見本

<ul class="list-group" style="max-width: 400px;">
	<li class="list-group-item">
		<span class="badge">14</span>
		リストアイテム1
	</li>
	<li class="list-group-item">
		<span class="badge">2</span>
		リストアイテム2
	</li>
	<li class="list-group-item">
		<span class="badge">1</span>
		リストアイテム3
	</li>
</ul>

コピー<ul class="list-group" style="max-width: 400px;">
	<li class="list-group-item d-flex justify-content-between align-items-center">
		リストアイテム1
		<span class="badge badge-primary badge-pill">14</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
		リストアイテム2
		<span class="badge badge-primary badge-pill">2</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
		リストアイテム3
		<span class="badge badge-primary badge-pill">1</span>
	</li>
</ul>

ヘッダありリンク付きリストグループ（Custom content）v4.2.1設定変更

Flexユーティリティの助けを借りて、下記のようなリンクリストグループの場合でも、ほぼすべてのHTMLを追加すること。

見本

<div class="list-group" style="max-width: 400px;">
	<a href="#" class="list-group-item list-group-item-action active">
		<h4 class="list-group-item-heading">リストグループ1のヘッダ</h4>
		<p class="list-group-item-text">段落内のプレースホルダーコンテンツ。</p>
	</a>
	<a href="#" class="list-group-item list-group-item-action">
		<h4 class="list-group-item-heading">リストグループ2のヘッダ</h4>
		<p class="list-group-item-text">段落内のプレースホルダーコンテンツ。</p>
	</a>
	<a href="#" class="list-group-item list-group-item-action">
		<h4 class="list-group-item-heading">リストグループ3のヘッダ</h4>
		<p class="list-group-item-text">段落内のプレースホルダーコンテンツ。</p>
	</a>
</div>

コピー<div class="list-group" style="max-width: 400px;">
	<a href="#" class="list-group-item list-group-item-action active">
		<div class="d-flex w-100 justify-content-between">
			<h5 class="mb-1">リストグループ1のヘッダ</h5>
			<small>3日前</small>
		</div>
		<p class="mb-1">段落内のプレースホルダーコンテンツ。</p>
		<small>サブコンテンツ</small>
	</a>
	<a href="#" class="list-group-item list-group-item-action">
		<div class="d-flex w-100 justify-content-between">
			<h5 class="mb-1">リストグループ2のヘッダ</h5>
			<small>3日前</small>
		</div>
		<p class="mb-1">段落内のプレースホルダーコンテンツ。</p>
		<small>サブコンテンツ</small>
	</a>
	<a href="#" class="list-group-item list-group-item-action">
		<div class="d-flex w-100 justify-content-between">
			<h5 class="mb-1">リストグループ3のヘッダ</h5>
			<small>3日前</small>
		</div>
		<p class="mb-1">段落内のプレースホルダーコンテンツ。</p>
		<small>サブコンテンツ</small>
	</a>
</div>

JavaScriptの動作（JavaScript behavior）v4.0.0新設

個別にまたはコンパイルされた bootstrap.js ファイルを通じてタブJavaScriptプラグインを使用して、リストグループを拡張して、ローカルコンテンツのタブ切替パネルを作成。

見本

設定例

コピー<div class="row">
	<div class="col-4">
		<div class="list-group" id="list-tab" role="tablist">
			<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="list-home">ホーム</a>
			<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">プロフィール</a>
			<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">メッセージ</a>
			<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">セッティング</a>
		</div>
	</div>
	<div class="col-8">
		<div class="tab-content" id="nav-tabContent">
			<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">「ホーム」に関連する段落のプレースホルダーコンテンツ。...</div></div>
			<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">「プロフィール」に関連する段落のプレースホルダーコンテンツ。...</div>
			<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">「メッセージ」に関連する段落のプレースホルダーコンテンツ。...</div>
			<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">「セッティング」に関連する段落のプレースホルダーコンテンツ。...</div>
		</div>
	</div>
</div>

データ属性の使用（Using data attributes）

単に data-toggle="list" を指定するだけで、要素にJavaScriptを書くことなく、リストグループのナビゲーションを有効にすることが可能。これらのデータ属性は、.list-group-item で使用。

設定例

コピー<div role="tabpanel">
	<!-- リストグループ -->
	<div class="list-group" id="myList" role="tablist">
		<a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">ホーム</a>
		<a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">プロフィール</a>
		<a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">メッセージ</a>
		<a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">セッティング</a>
	</div>

	<!-- パネル部分 -->
	<div class="tab-content">
		<div class="tab-pane active" id="home" role="tabpanel">...</div>
		<div class="tab-pane" id="profile" role="tabpanel">...</div>
		<div class="tab-pane" id="messages" role="tabpanel">...</div>
		<div class="tab-pane" id="settings" role="tabpanel">...</div>
	</div>
</div>

JavaScript経由で（Via JavaScript）サンプル

JavaScriptを使用してタブ切替可能なリストアイテムを有効にする（各リストアイテムは個別に有効にする必要あり）：

設定例

JavaScript$('#myList a').on('click',function (event) {
	event.preventDefault()
	$(this).tab('show')
})

いくつかの方法で個々のリストアイテムをアクティブにすることが可能：

JavaScript$('#myList a[href="#profile"]').tab('show') // リストアイテム名で選択
$('#myList a:first-child').tab('show') // 最初のリストアイテムを選択
$('#myList a:last-child').tab('show') // 最後のリストアイテムを選択
$('#myList a:nth-child(3)').tab('show') // 3番目のリストアイテムを選択

フェード効果（Fade effect）

タブパネルをフェードインさせるには、各 .tab-pane に .fade を追加。最初のタブパネルには、最初のコンテンツを表示させるために .show が必要。

メソッド（Methods）

$().tab

リストアイテム要素とコンテンツコンテナをアクティブにする。タブは、DOM内のコンテナの接点をターゲットとする data-target または href が必要。

HTML<div class="list-group" id="myList" role="tablist">
	<a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">ホーム</a>
	<a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">プロフィール</a>
	<a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">メッセージ</a>
	<a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">セッティング</a>
</div>

<div class="tab-content">
	<div class="tab-pane active" id="home" role="tabpanel">...</div>
	<div class="tab-pane" id="profile" role="tabpanel">...</div>
	<div class="tab-pane" id="messages" role="tabpanel">...</div>
	<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

JavaScript<script>
	$(function () {
		$('#myList a:last-child').tab('show')
	})
</script>

.tab('show')

指定されたリストアイテムを選択し、関連するコンテンツを表示。その前に選択された他のリストアイテムは選択解除され、関連するコンテンツは非表示になる。タブパネル区画が実際に表示される前に（shown.bs.tab イベント発動前など）に呼び出し元に戻る。

JavaScript$('#someListItem').tab('show')

イベント（Events）

新しいタブを表示すると、イベントは次の順序で発動：

1. hide.bs.tab（現在のアクティブなタブに）
2. show.bs.tab（次に表示されるタブに）
3. hidden.bs.tab（前のアクティブなタブでは hide.bs.tab イベントと同じもの）
4. shown.bs.tab（新しくアクティブ化されて表示されるタブでは show.bs.tab イベントと同じもの）

既にアクティブなタブがない場合、hide.bs.tab と hidden.bs.tab イベントは発動しない。

JavaScript$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
	event.target // 新しくアクティブ化されたタブ
	event.relatedTarget // 前のアクティブなタブ
})