リストグループ

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

このページでは

基本的な例

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

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

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>

アクティブアイテム

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

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

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>

使用不可のアイテム

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

無効化されたアイテム
2 番目の項目
3番目のアイテム
4番目の項目
そして五つ目

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>

リンクとボタン

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

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

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

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>

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

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>

流す

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

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

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 を介して生成されます (既定のブラウザースタイルとは対照的に)。

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

リスト項目
リスト項目
リスト項目

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>

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

小見出し
リストアイテムのコンテンツ
14
小見出し
リストアイテムのコンテンツ
14
小見出し
リストアイテムのコンテンツ
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。現在、水平リストグループをフラッシュリストグループと組み合わせることはできません。

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

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

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

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

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

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

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

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>

コンテキストクラス

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

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

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>

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

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

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色で示される情報は、コンテンツ自体 (表示されるテキストなど) から明らかであるか、クラスで非表示の追加テキストなどの代替手段によって含まれていることを確認してください。

バッジ付き

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

リスト項目14
2 番目のリスト項目2
3 番目のリスト項目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 を内部に追加します。

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

3日前

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

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

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

3日前

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

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

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

3日前

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

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

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-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 番目のチェックボックス

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>

.stretched-linkon s を使用し<label>て、リストグループ項目全体をクリック可能にできます。

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

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

変数

v5.2.0 で追加

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

  --#{$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};

サス変数

$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 を介してタブ可能なリスト項目を有効にします (各リスト項目は個別に有効にする必要があります):

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

フェード効果

タブパネルをフェードインするには、.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>

メソッド

非同期メソッドと遷移

すべての API メソッドは非同期であり、遷移を開始します。トランジションが開始されるとすぐに呼び出し元に戻りますが、トランジションが終了する前に戻ります。さらに、遷移中のコンポーネントでのメソッド呼び出しは無視されます。

詳細については、JavaScript のドキュメントを参照してください。

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

コンストラクターを使用してタブインスタンスを作成できます。次に例を示します。

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

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

イベント

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

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

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

イベントタイプ	説明
`hide.bs.tab`	このイベントは、新しいタブが表示される (したがって、以前のアクティブなタブが非表示になる) ときに発生します。とを使用`event.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
  })
})

リストグループ

基本的な例

アクティブアイテム

使用不可のアイテム

リンクとボタン

流す

番号付き

水平

コンテキスト クラス

支援技術に意味を伝える

バッジ付き

カスタムコンテンツ

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

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

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

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

CSS

変数

サス変数

ミックスイン

ループ

JavaScript の動作

データ属性の使用

JavaScript 経由

フェード効果

メソッド

非同期メソッドと遷移

イベント

コンテキストクラス

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

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

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