Skip to main content Skip to docs navigation
GitHubで見る

リストグループ

List group

リストグループは、一連のコンテンツを表示するための柔軟で強力なコンポーネントです。それらを変更して拡張して、その中のあらゆるコンテンツをサポートします。リストグループの使い方の例を示します。

項目

一般的な例

最も基本的なリストグループは、リスト項目と適切なクラスを持つ順不同のリストです。 以下のオプションを参考にしてください。必要に応じて独自のCSSを使ってそれを構築してください。

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
html 
<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>

アクティブなアイテム

現在アクティブな選択範囲を示すためには.list-group-itemに.activeを追加します。

  • An active item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
html 
<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>

無効化

.list-group-itemに.disabledを追加すると、.list-group-itemが無効化されているように見えます。 .disabledを持つ要素の中には、クリックイベント(リンクなど)を完全に無効にするためにカスタムJavaScriptを使用してください。

  • A disabled item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
html 
<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>

リンクとボタン

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

ここでは標準の .btnクラスを使用しないように注意してください。

The current link item A second link item A third link item A fourth link item A disabled link item
html 
<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 class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

<button>では、.disabledクラスの代わりにdisabled属性を使用できます。<a>はdisabled属性をサポートしていません。

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

Flush

.list-group-flushを追加して、親コンテナ(カードなど)のリストグループ項目を端から端までレンダリングするために、いくつかの境界線と角の丸みを取り除きます。

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
html 
<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を介して生成され、リストグループのアイテム内での配置を改善し、より良いカスタマイズを可能にします。

番号は<ol>のcounter-resetによって生成され、::before擬似要素で<li>のcounter-incrementとcontentと共にスタイリングされて配置されます。

  1. A list item
  2. A list item
  3. A list item
html 
<ol class="list-group list-group-numbered">
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
</ol>

これらはカスタムコンテンツとも相性が良いです。

  1. Subheading
    Content for list item
    14
  2. Subheading
    Content for list item
    14
  3. Subheading
    Content for list item
    14
html 
<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>
      Content for list item
    </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>
      Content for list item
    </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>
      Content for list item
    </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から始まるリストグループを水平にします。現在、水平リストグループをflushリストグループと組み合わせることはできません。

ProTip: リストグループの項目を水平方向に等幅にしたい場合は、リストグループの各項目に`.flex-fillを追加します。

  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
html 
<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>

変数

気をつけてください! v5.3.0より、list-group-item-variant()Sass mixinは非推奨となりました。リストグループアイテムのバリアントは、SassループでCSS変数をオーバーライドするようになりました。

コンテクストクラスを使って、リストアイテムのステートフルな背景や色をスタイルにします。

  • A simple default list group item
  • A simple primary list group item
  • A simple secondary list group item
  • A simple success list group item
  • A simple danger list group item
  • A simple warning list group item
  • A simple info list group item
  • A simple light list group item
  • A simple dark list group item
html 
<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>

リンクとボタン

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

A simple default list group item A simple primary list group item A simple secondary list group item A simple success list group item A simple danger list group item A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item
html 
<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クラスで隠された追加テキストなど、別の手段で含まれていることを確認してください。

バッジを追加

フレックスユーティリティを使って、未読数やアクティビティなどを表示するためのバッジをリストグループの項目に追加します。

  • A list item 14
  • A second list item 2
  • A third list item 1
html 
<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を中に追加することができます。

List group item heading
3 days ago

Some placeholder content in a paragraph.

And some small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.
html 
<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-body-secondary">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-body-secondary">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-body-secondary">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-body-secondary">And some muted small print.</small>
  </a>
</div>

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

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

html 
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
  </li>
</ul>
html 
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
  </li>
</ul>

また、大きなヒット領域のために<label>を.list-group-itemとして使用したい場合は、下記の例を参考にしてください。

html 
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
    <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
    <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
  </li>
</ul>

CSS

変数

Added in v5.2.0

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

scss/_list-group.scss 
--#{$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変数

scss/_variables.scss 
$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%; // Deprecated in v5.3.0
$list-group-item-color-scale:       40%; // Deprecated in 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 mixins

Deprecated in v5.3.0

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

scss/mixins/_list-group.scss 
@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ループ

CSS変数をオーバーライドして修飾クラスを生成するループです。

scss/_list-group.scss 
// 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 in map-keys($theme-colors) {
  .list-group-item-#{$state} {
    --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$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-emphasis);
    --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
  }
}

JavaScriptの動作

Tab JavaScriptプラグインを使用してください。個別に、またはコンパイルされたbootstrap.jsファイルを通して、ローカルコンテンツのタブ可能なペインを作成するためにリストグループを拡張します。

Some placeholder content in a paragraph relating to "Home". 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 "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>

データ属性

JavaScriptを書かなくても、data-bs-toggle="list"を指定するか要素に指定するだけで、リストグループナビゲーションを有効にすることができます。これらのデータ属性を.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>

Via JavaScript

JavaScriptでタブ可能なリスト項目を有効にします（各リスト項目を個別に有効にする必要があります）。

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

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

個々のリスト項目をいくつかの方法でアクティブにすることができます。

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

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

フェード効果

タブパネルをフェードインさせるには、.tab-paneに.fadeを追加します。最初のタブパネルには、最初のコンテンツを表示するために.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>

Methods

すべてのAPIメソッドは非同期でトランジションを開始します。 トランジションが開始されるとすぐに、しかし終了する前に、呼び出し元に戻ります。また、遷移中のコンポーネントに対するメソッド呼び出しは無視されます。詳しくはJavaScriptのドキュメントをご覧ください

コンテンツをタブ要素としてアクティブにします。

例えば、コンストラクタでタブのインスタンスを作成できます。：

const bsTab = new bootstrap.Tab('#myTab')
Method Description
dispose 要素のタブを破棄します。
getInstance DOM要素に関連付けられたタブのインスタンスを取得できる静的メソッドで、次のように使用できます:bootstrap.Tab.getInstance(element).
getOrCreateInstance DOM要素に関連付けられたタブのインスタンスを返すか、初期化されていない場合は新規に作成する静的なメソッドです。次のように使用します。:bootstrap.Tab.getOrCreateInstance(element).
show 指定されたタブを選択し、関連するペインを表示します。それまで選択されていた他のタブは非選択となり、関連するペインは非表示となります。 タブペインが実際に表示される前に呼び出し元に返します。(つまりshown.bs.tabイベントが発生する前)

イベント

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

  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イベントは発生しません。

Event type Description
hide.bs.tab このイベントは、新しいタブが表示されたときに発生します（したがって、以前のアクティブなタブは非表示になります）。Useevent.targetと`event.relatedTargetを使用して、それぞれ現在のアクティブなタブと、もうすぐアクティブになる新しいタブをターゲットにします。
hidden.bs.tab このイベントは、新しいタブが表示された後に発生します（したがって、以前のアクティブなタブは非表示になります）。event.targetとevent.relatedTargetを使用して、それぞれ前のアクティブなタブと新しいアクティブなタブをターゲットにします。
show.bs.tab このイベントはタブ表示時に発生しますが、新しいタブが表示される前に発生します。event.targetとevent.relatedTargetを使用して、それぞれアクティブなタブと前のアクティブなタブ（利用可能な場合）をターゲットにします。
shown.bs.tab タブが表示された後のタブ表示時に発生します。event.targetとevent.relatedTargetを使用して、それぞれアクティブなタブと前のアクティブなタブ（利用可能な場合）をターゲットにします。 
const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
})