リスト グループは、一連のコンテンツを表示するための柔軟で強力なコンポーネントです。それらを変更および拡張して、その中のほぼすべてのコンテンツをサポートします。
基本的な例
最も基本的なリスト グループは、リスト アイテムと適切なクラスを含む順序付けられていないリストです。それに続くオプション、または必要に応じて独自の CSS を使用して構築します。
クラス・フスト・オディオ
Dapibus ac ファシリシス
Morbi leo risus
Porta ac consectetur ac
エロスの前庭
コピー
<ul class= "list-group" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
<li class= "list-group-item" > Porta ac consectetur ac</li>
<li class= "list-group-item" > Vestibulum at eros</li>
</ul>
アクティブアイテム
に追加.active
して.list-group-item
、現在のアクティブな選択を示します。
クラス・フスト・オディオ
Dapibus ac ファシリシス
Morbi leo risus
Porta ac consectetur ac
エロスの前庭
コピー
<ul class= "list-group" >
<li class= "list-group-item active" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
<li class= "list-group-item" > Porta ac consectetur ac</li>
<li class= "list-group-item" > Vestibulum at eros</li>
</ul>
使用不可のアイテム
に追加.disabled
して、無効.list-group-item
に見えるよう にします。一部の要素で.disabled
は、クリック イベント (リンクなど) を完全に無効にするためにカスタム JavaScript が必要になることに注意してください。
クラス・フスト・オディオ
Dapibus ac ファシリシス
Morbi leo risus
Porta ac consectetur ac
エロスの前庭
コピー
<ul class= "list-group" >
<li class= "list-group-item disabled" aria-disabled= "true" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
<li class= "list-group-item" > Porta ac consectetur ac</li>
<li class= "list-group-item" > Vestibulum at eros</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" >
Cras justo odio
</a>
<a href= "#" class= "list-group-item list-group-item-action" > Dapibus ac facilisis in</a>
<a href= "#" class= "list-group-item list-group-item-action" > Morbi leo risus</a>
<a href= "#" class= "list-group-item list-group-item-action" > Porta ac consectetur ac</a>
<a href= "#" class= "list-group-item list-group-item-action disabled" tabindex= "-1" aria-disabled= "true" > Vestibulum at eros</a>
</div>
s を使用すると、クラスの代わりに属性<button>
を利用することもできます。残念ながら、は disabled 属性をサポートしていません。disabled
.disabled
<a>
クラス・フスト・オディオ
Dapibus ac ファシリシス
Morbi leo risus
Porta ac consectetur ac
エロスの前庭
コピー
<div class= "list-group" >
<button type= "button" class= "list-group-item list-group-item-action active" >
Cras justo odio
</button>
<button type= "button" class= "list-group-item list-group-item-action" > Dapibus ac facilisis in</button>
<button type= "button" class= "list-group-item list-group-item-action" > Morbi leo risus</button>
<button type= "button" class= "list-group-item list-group-item-action" > Porta ac consectetur ac</button>
<button type= "button" class= "list-group-item list-group-item-action" disabled > Vestibulum at eros</button>
</div>
流す
Add.list-group-flush
を追加して、一部の境界線と丸みを帯びた角を削除し、リスト グループ アイテムを親コンテナー (カードなど) の端から端までレンダリングします。
クラス・フスト・オディオ
Dapibus ac ファシリシス
Morbi leo risus
Porta ac consectetur ac
エロスの前庭
コピー
<ul class= "list-group list-group-flush" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
<li class= "list-group-item" > Porta ac consectetur ac</li>
<li class= "list-group-item" > Vestibulum at eros</li>
</ul>
水平
追加.list-group-horizontal
して、すべてのブレークポイントでリスト グループ項目のレイアウトを垂直から水平に変更します。または、レスポンシブ バリアント.list-group-horizontal-{sm|md|lg|xl}
を選択して、そのブレークポイントから始まるリスト グループを水平にしますmin-width
。現在、水平リスト グループをフラッシュ リスト グループと組み合わせることはできません。
プロのヒント: 水平のときに等幅のリスト グループ アイテムが必要ですか? .flex-fill
各リスト グループ アイテムに追加します。
クラス・フスト・オディオ
Dapibus ac ファシリシス
Morbi leo risus
コピー
<ul class= "list-group list-group-horizontal" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
</ul>
クラス・フスト・オディオ
Dapibus ac ファシリシス
Morbi leo risus
コピー
<ul class= "list-group list-group-horizontal-sm" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
</ul>
クラス・フスト・オディオ
Dapibus ac ファシリシス
Morbi leo risus
コピー
<ul class= "list-group list-group-horizontal-md" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
</ul>
クラス・フスト・オディオ
Dapibus ac ファシリシス
Morbi leo risus
コピー
<ul class= "list-group list-group-horizontal-lg" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
</ul>
クラス・フスト・オディオ
Dapibus ac ファシリシス
Morbi leo risus
コピー
<ul class= "list-group list-group-horizontal-xl" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
</ul>
コンテキスト クラス
コンテキスト クラスを使用して、ステートフルな背景と色でリスト アイテムのスタイルを設定します。
Dapibus ac ファシリシス
シンプルなプライマリ リスト グループ アイテム
単純な二次リスト グループ アイテム
単純な成功リストのグループ アイテム
単純な危険リスト グループ アイテム
単純な警告リスト グループ アイテム
単純な情報リスト グループ アイテム
シンプルなライト リスト グループ アイテム
単純なダーク リスト グループ アイテム
コピー
<ul class= "list-group" >
<li class= "list-group-item" > Dapibus ac facilisis in</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" > Dapibus ac facilisis in</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
Dapibus ac ファシリシス2
Morbi leo risus1
コピー
<ul class= "list-group" >
<li class= "list-group-item d-flex justify-content-between align-items-center" >
Cras justo odio
<span class= "badge badge-primary badge-pill" > 14</span>
</li>
<li class= "list-group-item d-flex justify-content-between align-items-center" >
Dapibus ac facilisis in
<span class= "badge badge-primary badge-pill" > 2</span>
</li>
<li class= "list-group-item d-flex justify-content-between align-items-center" >
Morbi leo risus
<span class= "badge badge-primary badge-pill" > 1</span>
</li>
</ul>
カスタムコンテンツ
以下のようなリンクされたリスト グループであっても、フレックスボックス ユーティリティ を使用して、ほぼすべての HTML を内部に追加します。
コピー
<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" > Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small> Donec id elit non mi porta.</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" > Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class= "text-muted" > Donec id elit non mi porta.</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" > Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class= "text-muted" > Donec id elit non mi porta.</small>
</a>
</div>
JavaScript の動作
タブ JavaScript プラグインを使用して (個別に、またはコンパイル済みbootstrap.js
ファイルを介してインクルード)、リスト グループを拡張して、ローカル コンテンツのタブ可能なペインを作成します。
Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing execitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur execitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.
Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.
Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.
Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.
コピー
<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
。
コピー
<!-- 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>
JavaScript 経由
JavaScript を介してタブ可能なリスト項目を有効にします (各リスト項目は個別に有効にする必要があります):
コピー
$ ( ' #myList a ' ). on ( ' click ' , function ( e ) {
e . 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 ' )
イベント
新しいタブを表示すると、イベントは次の順序で発生します。
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
て、それぞれアクティブなタブと以前のアクティブなタブ (利用可能な場合) をターゲットにします。
表示された.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 ( e ) {
e . target // newly activated tab
e . relatedTarget // previous active tab
})