GitHubで表示

リストグループ

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

基本的な例

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

  • アイテム
  • 2番目のアイテム
  • 3番目のアイテム
  • 4番目のアイテム
  • そして5番目のアイテム
<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番目のアイテム
<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番目のアイテム
<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番目のリンクアイテム 無効化されたリンクアイテム
<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属性をサポートしていません。

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

フラッシュ

親コンテナ（例：カード）でリストグループアイテムを端から端までレンダリングするために、いくつかの境界線と角丸を削除するには、.list-group-flushを追加します。

  • アイテム
  • 2番目のアイテム
  • 3番目のアイテム
  • 4番目のアイテム
  • そして5番目のアイテム
<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-horizontalを追加します。または、レスポンシブバリアント.list-group-horizontal-{sm|md|lg|xl}を選択して、そのブレークポイントのmin-widthから始まるリストグループを水平にします。現在、水平リストグループはフラッシュリストグループと組み合わせることはできません。

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

  • アイテム
  • 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">
  <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>
支援技術に意味を伝える

色を使用して意味を追加すると、視覚的な表示のみが提供され、スクリーンリーダーなどの支援技術のユーザーには伝わりません。色で示される情報が、コンテンツ自体（表示されるテキストなど）から明らかであるか、.sr-onlyクラスで非表示になっている追加のテキストなど、別の方法で含まれていることを確認してください。

バッジ付き

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

  • リストアイテム 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 badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

カスタムコンテンツ

フレックスボックスユーティリティの助けを借りて、以下のリンクされたリストグループのように、ほぼすべてのHTMLを追加できます。

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

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

そして小さな活字。
リストグループアイテムの見出し
3日前

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

そしてミュートされた小さな活字。
リストグループアイテムの見出し
3日前

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

そしてミュートされた小さな活字。 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    <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>

JavaScriptの動作

タブJavaScriptプラグイン（個 jednotlivěに、またはコンパイルされた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-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="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属性を使用する

要素にdata-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-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-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を介してタブで移動可能なリストアイテムを有効にする（各リストアイテムは個別にアクティブ化する必要があります）

$('#myList a').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

個々のリストアイテムはいくつかの方法でアクティブ化できます

$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third 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>

メソッド

$().tab

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

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-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>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>

.tab(‘show’)

指定されたリストアイテムを選択し、関連付けられたペインを表示します。以前に選択されていた他のリストアイテムは選択解除され、関連付けられたペインは非表示になります。 タブペインが実際に表示される前に発信者に返ります（たとえば、shown.bs.tabイベントが発生する前）。

$('#someListItem').tab('show')

イベント

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

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

イベントタイプ 説明
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を使用して、それぞれ以前のアクティブなタブと新しいアクティブなタブをターゲットにします。 
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})