in English

リストグループ

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

基本的な例

最も基本的なリスト グループは、リスト アイテムと適切なクラスを含む順序付けられていないリストです。それに続くオプション、または必要に応じて独自の 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、現在のアクティブな選択を示します。

  • アクティブなアイテム
  • 2 番目の項目
  • 3番目のアイテム
  • 4番目の項目
  • そして五つ目
<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番目の項目
  • そして五つ目
<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 class="list-group-item list-group-item-action disabled">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-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 プラグインを使用して (個別に、またはコンパイル済み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-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-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-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

フェード効果

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

メソッド

$().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('表示')

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

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

イベント

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

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

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

イベントタイプ 説明
show.bs.tab このイベントは、タブの表示時に発生しますが、新しいタブが表示される前です。と を使用event.targetしevent.relatedTargetて、それぞれアクティブなタブと以前のアクティブなタブ (利用可能な場合) をターゲットにします。
表示された.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
})