リストグループ

リストグループは、一連のコンテンツを表示するための柔軟で強力なコンポーネントです。それらを変更および拡張して、その中のほぼすべてのコンテンツをサポートします。

このページでは

基本的な例

最も基本的なリストグループは、リストアイテムと適切なクラスを含む順序付けられていないリストです。それに続くオプション、または必要に応じて独自の CSS を使用して構築します。

アイテム
2 番目の項目
3番目のアイテム
4番目の項目
そして五つ目

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

アクティブアイテム

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

アクティブなアイテム
A second item
A third item
A fourth item
And a fifth one

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

使用不可のアイテム

に追加.disabledして、無効.list-group-itemに見えるようにします。一部の要素で.disabledは、クリックイベント (リンクなど) を完全に無効にするためにカスタム JavaScript が必要になることに注意してください。

無効化されたアイテム
A second item
A third item
A fourth item
And a fifth one

<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

リンクとボタン

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

ここでは標準.btnクラスを使用しないでください。

現在のリンクアイテム 2 つ目のリンクアイテム 3 つ目のリンクアイテム 4 番目のリンクアイテム無効なリンクアイテム

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div>

s を使用すると、クラスの代わりに属性<button>を利用することもできます。残念ながら、は disabled 属性をサポートしていません。disabled.disabled<a>

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

流す

Add.list-group-flushを追加して、一部の境界線と丸みを帯びた角を削除し、リストグループアイテムを親コンテナー (カードなど) の端から端までレンダリングします。

アイテム
2 番目の項目
3番目のアイテム
4番目の項目
そして五つ目

<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

番号付き

修飾子クラスを追加.list-group-numbered(およびオプションで<ol>要素を使用) して、番号付きリストグループ項目を選択します。<ol>リストグループ項目内の配置を改善し、より適切なカスタマイズを可能にするために、番号は CSS を介して生成されます (既定のブラウザースタイルとは対照的に)。

数値はで生成さcounter-resetれ、<ol>スタイルが設定され、およびで疑似要素を使用して配置さ::beforeれ<li>ます。counter-incrementcontent

クラス・フスト・オディオ
クラス・フスト・オディオ
クラス・フスト・オディオ

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
</ol>

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

小見出し
クラス・フスト・オディオ
14
小見出し
クラス・フスト・オディオ
14
小見出し
クラス・フスト・オディオ
14

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </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">Subheading</div>
      Cras justo odio
    </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">Subheading</div>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

水平

追加.list-group-horizontalして、すべてのブレークポイントでリストグループ項目のレイアウトを垂直から水平に変更します。または、レスポンシブバリアント.list-group-horizontal-{sm|md|lg|xl|xxl}を選択して、そのブレークポイントから始まるリストグループを水平にしますmin-width。現在、水平リストグループをフラッシュリストグループと組み合わせることはできません。

プロのヒント:水平のときに等幅のリストグループアイテムが必要ですか? .flex-fill各リストグループアイテムに追加します。

アイテム
2 番目の項目
3番目のアイテム

アイテム
2 番目の項目
3番目のアイテム

アイテム
2 番目の項目
3番目のアイテム

アイテム
2 番目の項目
3番目のアイテム

アイテム
2 番目の項目
3番目のアイテム

アイテム
2 番目の項目
3番目のアイテム

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

コンテキストクラス

コンテキストクラスを使用して、ステートフルな背景と色でリストアイテムのスタイルを設定します。

シンプルなデフォルトリストグループアイテム
シンプルなプライマリリストグループアイテム
単純な二次リストグループアイテム
単純な成功リストのグループアイテム
単純な危険リストグループアイテム
単純な警告リストグループアイテム
単純な情報リストグループアイテム
シンプルなライトリストグループアイテム
単純なダークリストグループアイテム

<ul class="list-group">
  <li class="list-group-item">A simple default list group item</li>

  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

コンテキストクラスもで動作し.list-group-item-actionます。前の例にはなかったホバースタイルがここに追加されていることに注意してください。状態もサポートされてい.activeます。これを適用して、コンテキストリストグループアイテムのアクティブな選択を示します。

シンプルなデフォルトリストグループアイテムシンプルなプライマリリストグループアイテム単純な二次リストグループアイテム単純な成功リストのグループアイテム単純な危険リストグループアイテム単純な警告リストグループアイテム単純な情報リストグループアイテムシンプルなライトリストグループアイテム単純なダークリストグループアイテム

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>

支援技術に意味を伝える

色を使用して意味を追加しても、視覚的な指示しか提供されず、スクリーンリーダーなどの支援技術のユーザーには伝わりません。.visually-hidden色で示される情報は、コンテンツ自体 (表示されるテキストなど) から明らかであるか、クラスで非表示の追加テキストなどの代替手段によって含まれていることを確認してください。

バッジ付き

いくつかのユーティリティの助けを借りて、バッジを任意のリストグループアイテムに追加して、未読数、アクティビティなどを表示します。

リスト項目14
2 番目のリスト項目2
3 番目のリスト項目1

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge bg-primary rounded-pill">1</span>
  </li>
</ul>

カスタムコンテンツ

以下のようなリンクされたリストグループであっても、フレックスボックスユーティリティを使用して、ほぼすべての HTML を内部に追加します。

リストグループアイテムの見出し

3日前

段落内の一部のプレースホルダーコンテンツ。

そして、いくつかの小さな文字。

リストグループアイテムの見出し

3日前

段落内の一部のプレースホルダーコンテンツ。

そして、いくつかのミュートされた小さな活字。

リストグループアイテムの見出し

3日前

段落内の一部のプレースホルダーコンテンツ。

そして、いくつかのミュートされた小さな活字。

<div class="list-group">
  <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">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small>And some small print.</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">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</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">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
</div>

チェックボックスとラジオ

Bootstrap のチェックボックスとラジオをリストグループ項目内に配置し、必要に応じてカスタマイズします。sなしで使用できますが、アクセシビリティのために属性と値<label>を含めることを忘れないでください。aria-label

最初のチェックボックス
2 番目のチェックボックス
3 番目のチェックボックス
4 番目のチェックボックス
5 番目のチェックボックス

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    First checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Second checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Third checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fourth checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fifth checkbox
  </li>
</ul>

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

最初のチェックボックス 2 番目のチェックボックス 3 番目のチェックボックス 4 番目のチェックボックス 5 番目のチェックボックス

<div class="list-group">
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    First checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Second checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Third checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fourth checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fifth checkbox
  </label>
</div>

サス

変数

$list-group-color:                  $gray-900;
$list-group-bg:                     $white;
$list-group-border-color:           rgba($black, .125);
$list-group-border-width:           $border-width;
$list-group-border-radius:          $border-radius;

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
$list-group-item-bg-scale:          -80%;
$list-group-item-color-scale:       40%;

$list-group-hover-bg:               $gray-100;
$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:         $gray-600;
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           $gray-700;
$list-group-action-hover-color:     $list-group-action-color;

$list-group-action-active-color:    $body-color;
$list-group-action-active-bg:       $gray-200;

ミックスイン

と組み合わせて使用して、のコンテキストバリアントクラスを$theme-colors生成します。.list-group-item

@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;
      }
    }
  }
}

ループ

ミックスインで修飾子クラスを生成するループlist-group-item-variant()。

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

JavaScript の動作

タブ JavaScript プラグインを使用して (個別に、またはコンパイル済みbootstrap.jsファイルを介してインクルード)、リストグループを拡張して、ローカルコンテンツのタブ可能なペインを作成します。

家プロフィールメッセージ設定

「ホーム」に関連する段落の一部のプレースホルダーコンテンツ。ここでは、このタブパネルをパディングして埋めるためだけに使用されるコンテンツをいくつか追加します。本番環境では、明らかによりリアルなコンテンツがここにあります。そしてテキストだけではありません。それは本当に何でもかまいません。テキスト、画像、フォーム。

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

<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-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">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">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">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">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>

データ属性の使用

data-bs-toggle="list"要素に or を指定するだけで、JavaScript を記述せずにリストグループナビゲーションを有効にすることができます。でこれらのデータ属性を使用します.list-group-item。

<div role="tabpanel">
  <!-- List group -->
  <div class="list-group" id="myList" role="tablist">
    <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
  </div>

  <!-- Tab panes -->
  <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 経由

JavaScript を介してタブ可能なリスト項目を有効にします (各リスト項目は個別に有効にする必要があります):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

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

個々のリストアイテムをアクティブ化するには、いくつかの方法があります。

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

フェード効果

タブパネルをフェードインするには、.fadeそれぞれにを追加します.tab-pane。最初のタブペインでも.show、最初のコンテンツを表示できるようにする必要があります。

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

メソッド

constructor

リストアイテム要素とコンテンツコンテナーをアクティブにします。タブには、DOM 内のコンテナノードを対象とするdata-bs-targetまたはが必要です。href

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</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>

<script>
  var firstTabEl = document.querySelector('#myTab a:last-child')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

見せる

指定されたリスト項目を選択し、関連するペインを表示します。以前に選択されていたその他のリスト項目は選択解除され、関連するペインは非表示になります。タブペインが実際に表示される前 (たとえば、イベントが発生する前)に呼び出し元に戻ります。shown.bs.tab

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

  tab.show()

廃棄

要素のタブを破棄します。

getInstance

DOM 要素に関連付けられたタブインスタンスを取得できる静的メソッド

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

DOM 要素に関連付けられたタブインスタンスを取得したり、初期化されていない場合に新しいタブインスタンスを作成したりできる静的メソッド

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

イベント

新しいタブを表示すると、次の順序でイベントが発生します。

hide.bs.tab(現在アクティブなタブ上)
show.bs.tab（表示されるタブで）
hidden.bs.tabhide.bs.tab(前のアクティブなタブで、イベントと同じもの)
shown.bs.tabshow.bs.tab(新しくアクティブになったばかりのタブで、イベントと同じもの)

タブがまだアクティブになっていない場合、hide.bs.tabおよびhidden.bs.tabイベントは発生しません。

イベントタイプ	説明
`show.bs.tab`	このイベントは、タブの表示時に発生しますが、新しいタブが表示される前です。とを使用`event.target`し`event.relatedTarget`て、それぞれアクティブなタブと以前のアクティブなタブ (利用可能な場合) をターゲットにします。
`shown.bs.tab`	このイベントは、タブが表示された後にタブ表示で発生します。とを使用`event.target`し`event.relatedTarget`て、それぞれアクティブなタブと以前のアクティブなタブ (利用可能な場合) をターゲットにします。
`hide.bs.tab`	このイベントは、新しいタブが表示される (したがって、以前のアクティブなタブが非表示になる) ときに発生します。とを使用`event.target`し`event.relatedTarget`て、それぞれ現在アクティブなタブと新しい間もなくアクティブになるタブをターゲットにします。
`hidden.bs.tab`	このイベントは、新しいタブが表示された後に発生します (したがって、以前のアクティブなタブは非表示になります)。とを使用`event.target`し`event.relatedTarget`て、それぞれ前のアクティブなタブと新しいアクティブなタブをターゲットにします。

var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
  tabElm.addEventListener('shown.bs.tab', function (event) {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
}

リストグループ

基本的な例

アクティブアイテム

使用不可のアイテム

リンクとボタン

流す

番号付き

水平

コンテキスト クラス

支援技術に意味を伝える

バッジ付き

カスタムコンテンツ

リスト グループ アイテムの見出し

リスト グループ アイテムの見出し

リスト グループ アイテムの見出し

チェックボックスとラジオ

サス

変数

ミックスイン

ループ

JavaScript の動作

データ属性の使用

JavaScript 経由

フェード効果

メソッド

constructor

見せる

廃棄

getInstance

getOrCreateInstance

イベント

コンテキストクラス

リストグループアイテムの見出し

リストグループアイテムの見出し

リストグループアイテムの見出し