リストグループ
リスト グループは、一連のコンテンツを表示するための柔軟で強力なコンポーネントです。それらを変更および拡張して、その中のほぼすべてのコンテンツをサポートします。
基本的な例
最も基本的なリスト グループは、リスト アイテムと適切なクラスを含む順序付けられていないリストです。それに続くオプション、または必要に応じて独自の 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
、現在のアクティブな選択を示します。
- アクティブなアイテム
- A second item
- A third item
- A fourth item
- And a fifth one
<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 が必要になることに注意してください。
- 無効化されたアイテム
- A second item
- A third item
- A fourth item
- And a fifth one
<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
クラスを使用しないでください。
<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-numbered
(およびオプションで<ol>
要素を使用) して、番号付きリスト グループ項目を選択します。<ol>
リスト グループ項目内の配置を改善し、より適切なカスタマイズを可能にするために、数値は CSS を介して生成されます (既定のブラウザー スタイルとは対照的に)。
数値は で生成さcounter-reset
れ、<ol>
スタイルが設定され、 および で::before
疑似要素に配置<li>
さcounter-increment
れcontent
ます。
- リスト項目
- リスト項目
- リスト項目
<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>
これらは、カスタム コンテンツでもうまく機能します。
-
小見出しリスト アイテムのコンテンツ
-
小見出しリスト アイテムのコンテンツ
-
小見出しリスト アイテムのコンテンツ
<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番目のアイテム
<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>
コンテキスト クラス
コンテキスト クラスを使用して、ステートフルな背景と色でリスト アイテムのスタイルを設定します。
- シンプルなデフォルト リスト グループ アイテム
- シンプルなプライマリ リスト グループ アイテム
- 単純な二次リスト グループ アイテム
- 単純な成功リストのグループ アイテム
- 単純な危険リスト グループ アイテム
- 単純な警告リスト グループ アイテム
- 単純な情報リスト グループ アイテム
- シンプルなライト リスト グループ アイテム
- 単純なダーク リスト グループ アイテム
<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>
支援技術に意味を伝える
色を使用して意味を追加しても、視覚的な指示しか提供されず、スクリーン リーダーなどの支援技術のユーザーには伝わりません。.visually-hidden
色で示される情報が、コンテンツ自体 (表示されるテキストなど) から明らかであるか、クラスで非表示の追加テキストなどの代替手段によって含まれていることを確認してください。
バッジ付き
いくつかのユーティリティの助けを借りて、バッジを任意のリスト グループ アイテムに追加して、未読数、アクティビティなどを表示します。
- リスト項目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 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 を内部に追加します。
<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 番目のチェックボックス
- 4 番目のチェックボックス
- 5 番目のチェックボックス
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
First checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Second checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Third checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fourth checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fifth checkbox
</li>
</ul>
また、大きなヒット エリア<label>
の として sが必要な場合は、それも可能です。.list-group-item
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
First checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Second checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Third checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fourth checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fifth checkbox
</label>
</div>
サス
変数
$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
ファイルを介してインクルード)、リスト グループを拡張して、ローカル コンテンツのタブ可能なペインを作成します。
<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 を介してタブ可能なリスト項目を有効にします (各リスト項目は個別に有効にする必要があります):
var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})
個々のリスト アイテムをアクティブ化するには、いくつかの方法があります。
var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
var 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>
メソッド
constructor
リスト アイテム要素とコンテンツ コンテナーをアクティブにします。タブには、DOM 内のコンテナ ノードを対象とするdata-bs-target
またはが必要です。href
<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>
<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>
var firstTabEl = document.querySelector('#myTab a:last-child')
var firstTab = new bootstrap.Tab(firstTabEl)
firstTab.show()
</script>
見せる
指定されたリスト項目を選択し、関連するペインを表示します。以前に選択されていたその他のリスト項目は選択解除され、関連するペインは非表示になります。タブ ペインが実際に表示される前 (たとえば、イベントが発生する前)に呼び出し元に戻ります。shown.bs.tab
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
廃棄
要素のタブを破棄します。
getInstance
DOM 要素に関連付けられたタブ インスタンスを取得できる静的メソッド
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
DOM 要素に関連付けられたタブ インスタンスを取得したり、初期化されていない場合に新しいタブ インスタンスを作成したりできる静的メソッド
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
イベント
新しいタブを表示すると、イベントは次の順序で発生します。
hide.bs.tab
(現在アクティブなタブ上)show.bs.tab
(表示されるタブで)hidden.bs.tab
hide.bs.tab
(前のアクティブなタブで、イベントと同じもの)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 て、それぞれ前のアクティブなタブと新しいアクティブなタブをターゲットにします。 |
var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
tabElm.addEventListener('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})
}