リストグループ（List group）

基本のリストグループ（Basic example）v5.2.0デザイン変更

最も基本的なリストグループは、リストアイテムと適切なクラスを持つ順不同のリスト。それに続くオプションや必要に応じて独自の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）v5.0.0-alpha1設定変更

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

見本

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>

無効のアイテム（Disabled items）

.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. リンク付きリストグループ v5.1.1設定変更

見本

Bootstrap5.1.1～の設定例 緑背景が変更箇所

<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>

※Bootstrap5.1.0の設定例 赤背景が変更箇所

<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>

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>

外枠なし（Flush）

.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>

番号付き（Numbered）v5.0.0-beta3新設

.list-group-numbered 修飾子クラスを追加（オプションで <ol> 要素を使用）して、番号付きリストグループアイテムを再定義する。番号は（<ol> のデフォルトのブラウザスタイルではなく）CSSを経由して生成され、リストグループアイテム内での配置を改善し、カスタマイズを改善する。

番号は、<ol> の counter-reset によって生成され、<li> の ::before 疑似要素で counter-increment と content を使用してスタイル設定と配置をする。

見本

設定例

<ol class="list-group list-group-numbered" style="max-width: 400px;">
  <li class="list-group-item">アイテム</li>
  <li class="list-group-item">アイテム</li>
  <li class="list-group-item">アイテム</li>
</ol>

これらはカスタムコンテンツでもうまく機能。

見本

設定例

<ol class="list-group list-group-numbered" style="max-width: 400px;">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">小見出し</div>
      アイテムのコンテンツ
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">小見出し</div>
      アイテムのコンテンツ
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">小見出し</div>
      アイテムのコンテンツ
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

水平スタイル（Horizontal）v5.0.0-alpha1クラス追加

全てのブレークポイントにわたってリストグループアイテムのレイアウトを縦並びから横並びに変更するには .list-group-horizontal を追加する。あるいは、レスポンシブ形式の .list-group-horizontal-{sm|md|lg|xl|xxl} を選択して、そのブレークポイントの 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>

表示の範囲

背景色バリエーション（Variants）v5.3.0リストグループの背景色から名称変更

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

背景色の種類

設定例

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

リンクやボタンについて（For links and buttons）v5.3.0項目として独立

背景色のクラスも <a> と <button> 要素での .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">アイテム</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）

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

見本

設定例

<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>

ヘッダありリンク付きリストグループ（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>

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

Bootstrapのチェックボックスとラジオボタンをリストグループアイテム内に配置し、必要に応じてカスタマイズ。

1. 基本のチェックボックス

見本

Bootstrap5.2.0～の設定例 緑背景が5.2.0での変更箇所

<ul class="list-group">
  <li class="list-group-item">
    <input type="checkbox" class="form-check-input me-1" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">チェックボックス1</label>
  </li>
  <li class="list-group-item">
    <input type="checkbox" class="form-check-input me-1" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">チェックボックス2</label>
  </li>
  <li class="list-group-item">
    <input type="checkbox" class="form-check-input me-1" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">チェックボックス3</label>
  </li>
</ul>

※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所

<ul class="list-group">
  <li class="list-group-item">
    <input type="checkbox" class="form-check-input me-1" value="" aria-label="...">
    チェックボックス1
  </li>
  <li class="list-group-item">
    <input type="checkbox" class="form-check-input me-1" value="" aria-label="...">
    チェックボックス2
  </li>
  <li class="list-group-item">
    <input type="checkbox" class="form-check-input me-1" value="" aria-label="...">
    チェックボックス3
  </li>
</ul>

2. ラジオボタン v5.2.0追加

見本

設定例

<ul class="list-group">
  <li class="list-group-item">
    <input type="radio" class="form-check-input me-1" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">ラジオボタン1</label>
  </li>
  <li class="list-group-item">
    <input type="radio" class="form-check-input me-1" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">ラジオボタン2</label>
  </li>
  <li class="list-group-item">
    <input type="radio" class="form-check-input me-1" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">ラジオボタン3</label>
  </li>
</ul>

3. アイテム全体をクリック

<label> に .stretched-link を使用すれば、リストグループアイテム全体をクリック可能にできる。

見本

Bootstrap5.2.0～の設定例 緑背景が5.2.0での変更箇所

<ul class="list-group">
  <li class="list-group-item">
    <input type="checkbox" class="form-check-input me-1" value="" id="firstCheckboxStretched">
    <label class="form-check-label stretched-link" for="firstCheckboxStretched">チェックボックス1</label>
  </li>
  <li class="list-group-item">
    <input type="checkbox" class="form-check-input me-1" value="" id="secondCheckboxStretched">
    <label class="form-check-label stretched-link" for="secondCheckboxStretched">チェックボックス2</label>
  </li>
  <li class="list-group-item">
    <input type="checkbox" class="form-check-input me-1" value="" id="thirdCheckboxStretched">
    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">チェックボックス3</label>
  </li>
</ul>

※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所

<div class="list-group">
  <label class="list-group-item">
    <input type="checkbox" class="form-check-input me-1" value="">
    チェックボックス1
  </label>
  <label class="list-group-item">
    <input type="checkbox" class="form-check-input me-1" value="">
    チェックボックス2
  </label>
  <label class="list-group-item">
    <input type="checkbox" class="form-check-input me-1" value="">
    チェックボックス3
  </label>
</div>

CSS v5.0.0-beta3追加、v5.2.0Sassから名称変更

CSS変数（Variables）v5.2.0設定移行

Bootstrapの進化するCSS変数アプローチの一環として、リストグループは、リアルタイムのカスタマイズを強化するために、.list-group でローカルCSS変数を使用するようにした。CSS変数の値はSassを経由して設定されるため、Sassのカスタマイズも引き続きサポートされる。

デフォルトの設定

scss/_list-group.scss 内 list-group-css-vars の設定--#{$prefix}list-group-color: #{$list-group-color};
--#{$prefix}list-group-bg: #{$list-group-bg};
--#{$prefix}list-group-border-color: #{$list-group-border-color};
--#{$prefix}list-group-border-width: #{$list-group-border-width};
--#{$prefix}list-group-border-radius: #{$list-group-border-radius};
--#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
--#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
--#{$prefix}list-group-action-color: #{$list-group-action-color};
--#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
--#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
--#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
--#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
--#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
--#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
--#{$prefix}list-group-active-color: #{$list-group-active-color};
--#{$prefix}list-group-active-bg: #{$list-group-active-bg};
--#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};

Sass変数（Sass variables）v5.2.0変数から名称変更

デフォルトの設定

scss/_variables.scss 内 list-group-variables の設定$list-group-color:                  var(--#{$prefix}body-color);
$list-group-bg:                     var(--#{$prefix}body-bg);
$list-group-border-color:           var(--#{$prefix}border-color);
$list-group-border-width:           var(--#{$prefix}border-width);
$list-group-border-radius:          var(--#{$prefix}border-radius);

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
// fusv-disable
$list-group-item-bg-scale:          -80%; // v5.3.0で非推奨
$list-group-item-color-scale:       40%; // v5.3.0で非推奨
// fusv-enable

$list-group-hover-bg:               var(--#{$prefix}tertiary-bg);
$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         var(--#{$prefix}secondary-color);
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           var(--#{$prefix}secondary-color);
$list-group-action-hover-color:     var(--#{$prefix}emphasis-color);

$list-group-action-active-color:    var(--#{$prefix}body-color);
$list-group-action-active-bg:       var(--#{$prefix}secondary-bg);

Sassミックスイン（Sass mixins）v5.3.0mixinから名称変更 v5.3.0非推奨

$theme-colors と組み合わせて使用し、.list-group-items のカラーバリエーションクラスを生成。

デフォルトの設定

scss/mixins/_list-group.scss 内 list-group-modifiers の設定@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    color: $color;
    background-color: $background;

    &.list-group-item-action {
      &:hover,
      &:focus {
        color: $color;
        background-color: shade-color($background, 10%);
      }

      &.active {
        color: $white;
        background-color: $color;
        border-color: $color;
      }
    }
  }
}

Sassループ（Sass loops)v5.3.0ループから名称変更

CSS変数を再定義して修飾子クラスを生成するループ。

デフォルトの設定

scss/_list-group.scss 内 list-group-modifiers の設定// リストグループのカラーバリエーションを一覧表示
//
// 個々のアイテムのテキストや背景色を変更するための修飾子クラスを追加
// 組織的には、これは `:hover` 状態の後に来る必要がある

@each $state in map-keys($theme-colors) {
  .list-group-item-#{$state} {
    --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text);
    --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
    --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
    --#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text);
    --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text);
  }
}

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>

データ属性の使用（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.2.0設定変更

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

Bootstrap5.2.0～の設定例 緑背景が5.2.0での変更箇所

JavaScriptconst triggerTabList = document.querySelectorAll('#myList a')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

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

※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所

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.2.0～の設定例 緑背景が5.2.0での変更箇所

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

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

※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所

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')

フェード効果（Fade effect）

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

メソッド（Methods）v5.0.2メソッド追加、v5.2.0設定変更

コンテンツをタブ要素として有効にする。

タブのインスタンスは、例えばコンストラクタで作成できる：

Bootstrap5.2.0～の設定例 緑背景が5.2.0での変更箇所

JavaScriptconst bsTab = new bootstrap.Tab('#myTab')

※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所

JavaScriptvar someListItemEl = document.querySelector('#myTab')
var bsTab = new bootstrap.Tab(someListItemEl)

イベント（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 イベントは発動しない。

使用例 v5.2.0設定変更

JavaScriptconst tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // 新しくアクティブ化されたタブ
    event.relatedTarget // 前のアクティブなタブ
  })
}