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

リストグループ(List group)

リストグループは、一連のコンテンツを表示するための柔軟で強力なコンポーネント。それらを修正して拡張して、その中のあらゆるコンテンツに対応。

目次

基本のリストグループ(Basic example)

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

見本
  • アイテム1
  • アイテム2
  • アイテム3
設定例
<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>
【設定】
  • ul.list-group > li.list-group-item

 

アクティブなアイテム(Active items)v5.0.0-alpha1設定変更

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

見本
  • アイテム1
  • アイテム2
  • アイテム3
Bootstrap5.xの設定例 緑背景が変更箇所
<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>
※Bootstrap4.xの設定例 赤背景が変更箇所
<ul class="list-group" style="max-width: 400px;">
	<li class="list-group-item active">アイテム1</li>
	<li class="list-group-item">アイテム2</li>
	<li class="list-group-item">アイテム3</li>
</ul>
【設定】
  • アクティブにしたいアイテムの .list-group-item.active を追加
アクセシビリティの設定】
  • .active と同じ要素に aria-current="true"(支援技術に現在のアイテムであることを伝える)を入れる
【変更履歴】
  • 【v5.0.0-alpha1】(v4.6.0でバックポート)
    • アクセシビリティの設定を追加

 

無効のアイテム(Disabled items)

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

見本
  • アイテム1
  • アイテム2
  • アイテム3
設定例
<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>
【設定】
  • 無効にしたいアイテムの .list-group-item.disabled を追加
アクセシビリティの設定】
  • .disabled と同じ要素に aria-disabled="true"(支援技術に要素が無効の状態であることを伝える)を入れる

 

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

ここでは、標準の .btn クラスは使用しないこと。

1. リンク付きリストグループ

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<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 href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">無効のリンクアイテム</a>
</div>
【設定】
  • div.list-group > a.list-group-item.list-group-item-action
  • アクティブ化したいリンクには、a.list-group-item.list-group-item-action.activearia-current="true" を追加
  • 無効化したいリンクには、a.list-group-item.list-group-item-action.disabled を追加
【注意】
  • リンク付きリストグループはリスト形式(ul > li > a)ではなく、div > a で作成
アクセシビリティの設定】
  • .active と同じ要素に aria-current="true"(支援技術に現在のアイテムであることを伝える)を入れる
  • .disabled と同じ要素に tabindex="-1" aria-disabled="true"(支援技術に要素が無効の状態であることを伝える)を入れる
【変更履歴】
  • 【v5.0.0-alpha1】(v4.6.0でバックポート)
    • .active 関連のアクセシビリティの設定を追加

2. ボタンによるリストグループ

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

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<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>
【設定】
  • div.list-group > button.list-group-item.list-group-item-action
  • アクティブ化したいボタンには、a.list-group-item.list-group-item-action.activearia-current="true" を追加
  • 無効化したいボタンには、<button>disabled 属性を追加

 

外枠なし(Flush)

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

見本
  • アイテム1
  • アイテム2
  • アイテム3
設定例
<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)v5.0.0-alpha1クラス追加

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

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

定義済みクラスの種類

●全てのブレークポイントで水平スタイル .list-group-horizontal

  • アイテム1
  • アイテム2(長め)
  • アイテム3

●ビューポートが576px以上で水平スタイル .list-group-horizontal-sm

  • アイテム1
  • アイテム2(長め)
  • アイテム3

●ビューポートが768px以上で水平スタイル .list-group-horizontal-md

  • アイテム1
  • アイテム2(長め)
  • アイテム3

●ビューポートが992px以上で水平スタイル .list-group-horizontal-lg

  • アイテム1
  • アイテム2(長め)
  • アイテム3

●ビューポートが1200px以上で水平スタイル .list-group-horizontal-xl

  • アイテム1
  • アイテム2(長め)
  • アイテム3

●ビューポートが1400px以上で水平スタイル .list-group-horizontal-xxl v5.0.0-alpha1追加

  • アイテム1
  • アイテム2(長め)
  • アイテム3

●等幅のリストグループ

  • アイテム1
  • アイテム2(長め)
  • アイテム3
設定例
全てのブレークポイント<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>
表示の範囲
ビューポートの幅 極小
<576px

≥576px

≥768px

≥992px
特大
≥1200px
超特大
≥1400px
.list-group.list-group-horizontal 横並び
.list-group.list-group-horizontal-sm 縦並び 横並び
.list-group.list-group-horizontal-md 縦並び 横並び
.list-group.list-group-horizontal-lg 縦並び 横並び
.list-group.list-group-horizontal-xl 縦並び 横並び
.list-group.list-group-horizontal-xxl
v5.0.0-alpha1追加
縦並び 横並び
【設定】
  • 常にリストグループを水平スタイルにするには .list-grouplist-group-horizontal を追加
  • 特定のビューポートでリストグループを水平スタイルにするには .list-group.list-group-horizontal-{breakpoint} を追加
    • {breakpoint}sm(小), md(中), lg(大), xl(特大), xxl(超特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる
  • 水平リストの幅を等幅にするには、.list-group-item.flex(-{breakpoint})-fill を追加
    • {breakpoint} は、.list-group-horizontal-{breakpoint}{breakpoint} に合わせる
【変更履歴】
  • 【v5.0.0-alpha1】
    • .list-group-horizontal-xxl が追加

 

リストグループの背景色(Contextual classes)

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

背景色の種類
  • Primary:.list-group-item-primary
  • Secondary:.list-group-item-secondary
  • Success:.list-group-item-success
  • Info:.list-group-item-info
  • Warning:.list-group-item-warning
  • Danger:.list-group-item-danger
  • Light:.list-group-item-light
  • Dark:.list-group-item-dark
  • ※通常のアイテム
設定例
<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" aria-current="true">アクティブ化</a>
	<a href="#" class="list-group-item list-group-item-action list-group-item-primary">アイテム</a>
	...
</div>
【設定】
  • 基本のリストグループ:li.list-group-item.list-group-item-{themecolor}.list-group-item-{themecolor} は、上記の「背景色の種類」から選択)を追加
    • {themecolor} は、primary, secondary, success, info, warning, danger, light, dark のいずれかを選択
  • リンク付きリストグループ:a.list-group-item.list-group-item-action.list-group-item-{themecolor}(上記の「背景色の種類」から選択)を追加し、さらに .active を追加するとアクティブ用の背景色になる

 

枠線の色 ※裏技

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

見本
  • アイテム1
  • アイテム2
  • アイテム3
設定例
<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>
【設定】
  • .list-group-item.border-{themecolor} を追加(.border-{themecolor}境界ユーティリティの枠の色の種類から選択)
    .list-group.border-{themecolor} を追加しても無効。全て同じ枠の色に設定する場合は、全ての .list-group-item に設定が必要
【注意】
  • リストごとに色を変える場合、最後のリスト以外は上部の線は指定した色が反映されない(前のリストで指定した色が反映)

 

バッジ付きリストグループ(With badges)

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

見本
  • リストアイテム114
  • リストアイテム22
  • リストアイテム31
設定例
<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 bg-primary rounded-pill">14</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
		リストアイテム2
		<span class="badge bg-primary rounded-pill">2</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
		リストアイテム3
		<span class="badge bg-primary rounded-pill">1</span>
	</li>
</ul>
【設定】
  • li.list-group-item.d-flex.justify-content-between.align-items-center(Flexboxで両端に配置) > span.badge.badge-{themecolor}.rounded-pill.badge-{themecolor} は、「バッジの種類」から選択)
【注意】
  • 行末側にバッジをとりつける場合は、《アイテムの内容》⇒《バッジの表示》の順に記載する必要がある

 

ヘッダありリンク付きリストグループ(Custom content)

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

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="list-group" style="max-width: 400px;">
	<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
		<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>
【設定】
  • a.list-group-item.list-group-item-action > {div.d-flex.w-100.justify-content-between(アイテムの幅を100%にして両端揃えに) > [h5.mb-1(下側のマージンを0.25remに) + <small>《サブコンテンツ》]}《ヘッダ》 + [p.mb-1(下側のマージンを0.25remに) + <small>《サブコンテンツ》]《コンテンツ》

 

チェックボックスとラジオボタン(Checkboxes and radios)v5.0.0-alpha1新設、v5.0.0-beta1設定変更

Bootstrapのチェックボックスとラジオボタンをリストグループアイテム内に配置し、必要に応じてカスタマイズ。<label> はなくても使用可能だが、アクセシビリティのために aria-label 属性と value 値は入れること。

1. 基本の設定

見本
  • チェックボックス1
  • チェックボックス2
  • チェックボックス3
  • チェックボックス4
  • チェックボックス5
Bootstrap5.xの設定例 緑背景が変更箇所
<ul class="list-group">
	<li class="list-group-item">
		<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
		チェックボックス1
	</li>
	<li class="list-group-item">
		<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
		チェックボックス2
	</li>
	<li class="list-group-item">
		<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
		チェックボックス3
	</li>
	<li class="list-group-item">
		<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
		チェックボックス4
	</li>
	<li class="list-group-item">
		<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
		チェックボックス5
	</li>
</ul>
※Bootstrap4.xの設定例 赤背景が変更箇所
<ul class="list-group">
	<li class="list-group-item">
		<input class="form-check-input mr-1" type="checkbox" value="" aria-label="...">
		チェックボックス1
	</li>
	<li class="list-group-item">
		<input class="form-check-input mr-1" type="checkbox" value="" aria-label="...">
		チェックボックス2
	</li>
	<li class="list-group-item">
		<input class="form-check-input mr-1" type="checkbox" value="" aria-label="...">
		チェックボックス3
	</li>
	<li class="list-group-item">
		<input class="form-check-input mr-1" type="checkbox" value="" aria-label="...">
		チェックボックス4
	</li>
	<li class="list-group-item">
		<input class="form-check-input mr-1" type="checkbox" value="" aria-label="...">
		チェックボックス5
	</li>
</ul>
【設定】
  • ul.list-group > li.list-group-item > input[type="checkbox"].form-check-input.me-1
  • [type="checkbox"][type="radio"] に変更すれば、チェックボックスがラジオボタンになる
アクセシビリティの設定】
  • ラベルテキストの代替として <input>aria-label 属性(要素に対してラベル付けを行う)を入れる
【変更履歴】
  • 【v5.0.0-beta1】
    • RTL(右書き)の設定追加に伴い空白ユーティリティのクラス名変更
      • .mr-1.me-1

2. ラベル付き

また、大きなヒットエリアの .list-group-item として <label> が必要な場合は、それも設定可能。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="list-group">
	<label class="list-group-item">
		<input class="form-check-input me-1" type="checkbox" value="">
		チェックボックス1
	</label>
	<label class="list-group-item">
		<input class="form-check-input me-1" type="checkbox" value="">
		チェックボックス2
	</label>
	<label class="list-group-item">
		<input class="form-check-input me-1" type="checkbox" value="">
		チェックボックス3
	</label>
	<label class="list-group-item">
		<input class="form-check-input me-1" type="checkbox" value="">
		チェックボックス4
	</label>
	<label class="list-group-item">
		<input class="form-check-input me-1" type="checkbox" value="">
		チェックボックス5
	</label>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="list-group">
	<label class="list-group-item">
		<input class="form-check-input mr-1" type="checkbox" value="">
		チェックボックス1
	</label>
	<label class="list-group-item">
		<input class="form-check-input mr-1" type="checkbox" value="">
		チェックボックス2
	</label>
	<label class="list-group-item">
		<input class="form-check-input mr-1" type="checkbox" value="">
		チェックボックス3
	</label>
	<label class="list-group-item">
		<input class="form-check-input mr-1" type="checkbox" value="">
		チェックボックス4
	</label>
	<label class="list-group-item">
		<input class="form-check-input mr-1" type="checkbox" value="">
		チェックボックス5
	</label>
</div>
【設定】
  • div.list-group > label.list-group-item > input[type="checkbox"].form-check-input.me-1
【変更履歴】
  • 【v5.0.0-beta1】
    • RTL(右書き)の設定追加に伴い空白ユーティリティのクラス名変更
      • .mr-1.me-1

 

JavaScriptの動作(JavaScript behavior)v5.0.0-beta1設定変更

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

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<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" aria-current="true" id="list-home-list" data-bs-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-bs-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-bs-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-bs-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 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>
【設定】
  • div.list-group > a.list-group-item.list-group-item-action[data-bs-toggle="list"]《リスト部分》 + [.tab-content > .tab-pane]《パネル部分》
アクセシビリティの設定】
  • div.list-group に、role="tablist"(タブリストの役割を伝える)を入れる
  • a.list-group-item.list-group-item-action に、
    • role="tab" 属性(支援技術にタブ部分の役割を伝える)
    • aria-controls="パネルのID" 属性(タブパネルのタブ部分とパネル部分を関連付ける)
    • .active を追加する場合は、[aria-current="true"](支援技術に現在のリストであることを伝える)
    を入れる
  • div.tab-pane に、
    • role="tabpanel" 属性(支援技術にパネル部分の役割を伝える)
    • aria-labelledby="リストのID" 属性(タブパネルのタブ部分とパネル部分を関連付ける)
    を入れる
【変更履歴】
  • 【v5.0.0-alpha1】
    • a.list-group-item.list-group-item-action.active[aria-current="true"] を入れる
  • 【v5.0.0-beta1】
    • data- 属性に名前空間 bs- を追加
      • [data-toggle="list"][data-bs-toggle="list"]

データ属性の使用(Using data attributes)

単に data-bs-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" aria-current="true" data-bs-toggle="list" href="#home" role="tab">ホーム</a>
		<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">プロフィール</a>
		<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">メッセージ</a>
		<a class="list-group-item list-group-item-action" data-bs-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)v5.0.0-alpha1設定変更

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

Bootstrap5.xの設定例
JavaScriptvar triggerTabList = [].slice.call(document.querySelectorAll('#myList a'))
triggerTabList.forEach(function (triggerEl) {
	var tabTrigger = new bootstrap.Tab(triggerEl)

	triggerEl.addEventListener('click', function (event) {
		event.preventDefault()
		tabTrigger.show()
	})
})

※Bootstrap4.xの設定例
JavaScript$('#myList a').on('click',function (event) {
	event.preventDefault()
	$(this).tab('show')
})

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

Bootstrap5.xの設定例
JavaScriptvar triggerEl = document.querySelector('#myList a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // リストアイテム名で選択

var triggerFirstTabEl = document.querySelector('#myList li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // 最初のリストアイテムを選択

※Bootstrap4.xの設定例
JavaScript$('#myList a[href="#profile"]').tab('show') // リストアイテム名で選択

$('#myList a:first-child').tab('show') // 最初のリストアイテムを選択
【変更履歴】
  • 【v5.0.0-alpha1】
    • JavaScriptの設定がjQueryに依存しない方法に変更

フェード効果(Fade effect)

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

メソッド(Methods)v5.0.0-alpha1設定変更、追加

コンストラクタ(constructor)

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

HTML<div class="list-group" id="myList" role="tablist">
	<a class="list-group-item list-group-item-action active" aria-current="true" data-bs-toggle="list" href="#home" role="tab">ホーム</a>
	<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">プロフィール</a>
	<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">メッセージ</a>
	<a class="list-group-item list-group-item-action" data-bs-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>
Bootstrap5.xの設定例
JavaScriptvar firstTabEl = document.querySelector('#myList a:last-child')
var firstTab = new bootstrap.Tab(firstTabEl)

firstTab.show()
※Bootstrap4.xの設定例
JavaScript<script>
	$(function () {
		$('#myList a:last-child').tab('show')
	})
</script>

show

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

JavaScript  var someListItemEl = document.querySelector('#someListItem')
	var tab = new bootstrap.Tab(someListItemEl)

	tab.show()

dispose

要素のタブを破棄。

getInstance v5.0.0-alpha1追加

DOM要素に関連付けられたタブ・インスタンスを取得することを可能にする静的メソッド

JavaScriptvar triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Bootstrapタブ・インスタンスを返す
【変更履歴】
  • 【v5.0.0-alpha1】
    • $().tab('show')tab.show()
    • getInstance メソッドが追加

イベント(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.tabhidden.bs.tab イベントは発動しない。

イベントタイプ 説明
show.bs.tab タブが表示される前に、タブの表示で発動。アクティブなタブと前のアクティブなタブ(使用可能な場合)をそれぞれターゲットにするには event.targetevent.relatedTarget を使用
shown.bs.tab タブが表示された後、タブの表示で発動。アクティブなタブと前のアクティブなタブ(使用可能な場合)をそれぞれターゲットにするには event.targetevent.relatedTarget を使用
hide.bs.tab 新しいタブが表示されるときに発動(従って、前のアクティブなタブは非表示になる)。event.targetevent.relatedTarget を使用して、現在のアクティブなタブと次にアクティブになる新しいタブをそれぞれターゲットにする
hidden.bs.tab 新しいタブが表示された後に発動(従って、前のアクティブなタブは非表示になる)。event.targetevent.relatedTarget を使用して、前のアクティブなタブと新しいアクティブなタブをそれぞれターゲットにする
使用例 v5.0.0-beta1設定変更
JavaScriptvar tabEl = document.querySelector('a[data-bs-toggle="list"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
	event.target // 新しくアクティブ化されたタブ
	event.relatedTarget // 前のアクティブなタブ
})