リストグループ

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

このページの内容

基本例

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

アイテム1
アイテム2
アイテム3
アイテム4
アイテム5

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を追加します。

アクティブなアイテム
アイテム2
アイテム3
アイテム4
アイテム5

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を追加して、無効に見えるようにします。.disabledを持つ一部の要素では、クリックイベントを完全に無効にするためにカスタムJavaScriptも必要になることに注意してください（例：リンク）。

無効なアイテム
アイテム2
アイテム3
アイテム4
アイテム5

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>または<button>を使用して、.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" aria-disabled="true">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>

フラッシュ

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

アイテム1
アイテム2
アイテム3
アイテム4
アイテム5

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>要素を使用する）と、番号付きリストグループアイテムを選択できます。数値は、リストグループアイテム内の配置を改善し、より優れたカスタマイズを可能にするために、CSS（<ol>のデフォルトのブラウザスタイルとは対照的に）によって生成されます。

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

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

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 text-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 text-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 text-bg-primary rounded-pill">14</span>
  </li>
</ol>

水平

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

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

アイテム1
アイテム2
アイテム3

アイテム1
アイテム2
アイテム3

アイテム1
アイテム2
アイテム3

アイテム1
アイテム2
アイテム3

アイテム1
アイテム2
アイテム3

アイテム1
アイテム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>

バリアント

注意！ v5.3.0の時点で、list-group-item-variant()Sassミックスインは非推奨になりました。リストグループアイテムのバリアントは、SassループでCSS変数が上書きされるようになりました。

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

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

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状態もサポートされています。コンテキストリストグループアイテムのアクティブな選択を示すために適用します。

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

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

リストグループアイテム内にBootstrapのチェックボックスとラジオを配置し、必要に応じてカスタマイズします。<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>

最初のラジオ
2番目のラジオ
3番目のラジオ

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>に.stretched-linkを使用すると、リストグループアイテム全体をクリック可能にできます。

最初のチェックボックス
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変数アプローチの一環として、リストグループは、リアルタイムでのカスタマイズを強化するために、.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ミックスイン

v5.3.0で非推奨

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の動作

タブJavaScriptプラグインを使用します。個別に含めるか、コンパイル済みのbootstrap.jsファイルを通じて含めることで、リストグループを拡張して、ローカルコンテンツのタブ付きペインを作成できます。

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

「ホーム」に関連する段落内のプレースホルダーコンテンツです。そして、このタブパネルを埋めるためだけの、さらに多くのコンテンツです。実際には、ここにはより多くの実際のコンテンツがあるでしょう。そして、テキストだけではありません。テキスト、画像、フォームなど、何でも構いません。

「プロフィール」に関連する段落内のプレースホルダーコンテンツです。そして、このタブパネルを埋めるためだけの、さらに多くのコンテンツです。実際には、ここにはより多くの実際のコンテンツがあるでしょう。そして、テキストだけではありません。テキスト、画像、フォームなど、何でも構いません。

「メッセージ」に関連する段落内のプレースホルダーコンテンツです。そして、このタブパネルを埋めるためだけの、さらに多くのコンテンツです。実際には、ここにはより多くの実際のコンテンツがあるでしょう。そして、テキストだけではありません。テキスト、画像、フォームなど、何でも構いません。

「設定」に関連する段落内のプレースホルダーコンテンツです。そして、このタブパネルを埋めるためだけの、さらに多くのコンテンツです。実際には、ここにはより多くの実際のコンテンツがあるでしょう。そして、テキストだけではありません。テキスト、画像、フォームなど、何でも構いません。

<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"または要素に指定するだけで、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

フェード効果

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

メソッド

すべての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.tab（前のアクティブなタブ、hide.bs.tabイベントと同じもの）
shown.bs.tab（新しくアクティブになったばかりのタブ、show.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
  })
})