?
This document uses PHP Chinese website manual Release
列表組是用于顯示一系列內(nèi)容的靈活且強(qiáng)大的組件。修改并擴(kuò)展它們以支持其中的任何內(nèi)容。
基本示例
最基本的列表組是包含列表項(xiàng)和適當(dāng)類的無(wú)序列表。使用后面的選項(xiàng)構(gòu)建它，或根據(jù)需要使用您自己的 CSS。
<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>
活動(dòng)項(xiàng)目
添加.active到一個(gè).list-group-item以指示當(dāng)前的活動(dòng)選擇。
<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>
禁用的項(xiàng)目
添加.disabled到一個(gè).list-group-item使其顯示禁用。請(qǐng)注意，一些帶有.disabled元素.disabled還需要自定義 JavaScript 來(lái)完全禁用其點(diǎn)擊事件（例如，鏈接）。
<ul class="list-group"> <li class="list-group-item disabled">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>或<button> 通過(guò)添加.list-group-item-action來(lái)創(chuàng)建具有懸停，禁用和活動(dòng)狀態(tài)的可操作列表組項(xiàng)目。我們將這些偽類分開(kāi)，以確保由非交互式元素（如<li>或<div>）組成的列表組不提供點(diǎn)擊或點(diǎn)擊功能。
一定不要在 這里使用標(biāo)準(zhǔn).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">Vestibulum at eros</a></div>
使用<button>，您也可以使用disabled屬性而不是.disabled類?？杀氖?，<a>不支持 disabled 屬性。
<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>
上下文類
使用上下文類來(lái)設(shè)置具有狀態(tài)背景和顏色的列表項(xiàng)。
<ul class="list-group"> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item list-group-item-primary">This is a primary list group item</li> <li class="list-group-item list-group-item-secondary">This is a secondary list group item</li> <li class="list-group-item list-group-item-success">This is a success list group item</li> <li class="list-group-item list-group-item-danger">This is a danger list group item</li> <li class="list-group-item list-group-item-warning">This is a warning list group item</li> <li class="list-group-item list-group-item-info">This is a info list group item</li> <li class="list-group-item list-group-item-light">This is a light list group item</li> <li class="list-group-item list-group-item-dark">This is a dark list group item</li></ul>
上下文類也適用于.list-group-item-action。請(qǐng)注意，在前面的示例中不存在懸停樣式。還支持的是.active狀態(tài)；將其應(yīng)用于指示上下文列表組項(xiàng)目上的活動(dòng)選擇。
<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">This is a primary list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-success">This is a success list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-danger">This is a danger list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-warning">This is a warning list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-info">This is a info list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-light">This is a light list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-dark">This is a dark list group item</a></div>
將意義傳遞給輔助技術(shù)
使用顏色來(lái)增加意義只能提供一種視覺(jué)指示，而不會(huì)傳達(dá)給輔助技術(shù)的用戶 - 如屏幕閱讀器。確保由顏色表示的信息或者來(lái)自內(nèi)容本身（例如可見(jiàn)文本），或者通過(guò)其他方式包含，例如隱藏在.sr-only類中的其他文本。
帶有徽章
在一些實(shí)用程序的幫助下，將徽章添加到任何列表組項(xiàng)目以顯示未讀的計(jì)數(shù)，活動(dòng)等等。
<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>
自定義內(nèi)容
在 Flexbox 實(shí)用程序的幫助下，添加幾乎所有的 HTML，甚至包括下面的鏈接列表組。
<div class="list-group"> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start 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 flex-column align-items-start"> <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 flex-column align-items-start"> <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 行為
使用選項(xiàng)卡 JavaScript 插件 - 單獨(dú)包含它或通過(guò)編譯的bootstrap.js文件 - 擴(kuò)展我們的列表組以創(chuàng)建本地內(nèi)容的可放置窗格。
<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>
使用數(shù)據(jù)屬性
您可以通過(guò)簡(jiǎn)單地指定data-toggle="list"或在元素上書寫任何JavaScript來(lái)激活列表組導(dǎo)航。在.list-group-item使用這些數(shù)據(jù)屬性。
<!-- 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>
通過(guò) JavaScript
通過(guò) JavaScript 啟用可放置列表項(xiàng)（每個(gè)列表項(xiàng)需要單獨(dú)激活）：
$('#myList a').on('click', function (e) {
e.preventDefault() $(this).tab('show')})您可以通過(guò)幾種方式激活單個(gè)列表項(xiàng)目：
$('#myList a[href="#profile"]').tab('show') // Select tab by name$('#myList a:first').tab('show') // Select first tab$('#myList a:last').tab('show') // Select last tab$('#myList li:eq(2) a').tab('show') // Select third tab (0-indexed)淡入淡出效果
為了使制表符面板淡入，添加.fade到每個(gè).tab-pane。第一個(gè)選項(xiàng)卡窗格還必須有.show使初始內(nèi)容可見(jiàn)。
<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
激活列表項(xiàng)元素和內(nèi)容容器。標(biāo)簽應(yīng)該有一個(gè)data-target或一個(gè)href目標(biāo)在 DOM 的容器節(jié)點(diǎn)。
<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').tab('show') })</script>.tab(‘show’)
選擇給定的列表項(xiàng)并顯示其關(guān)聯(lián)窗格。之前選擇的任何其他列表項(xiàng)目將被取消選中，并且其關(guān)聯(lián)的窗格將被隱藏。在實(shí)際顯示選項(xiàng)卡窗格之前返回給調(diào)用方（例如，在shown.bs.tab事件發(fā)生之前）。
$('#someListItem').tab('show')活動(dòng)
當(dāng)顯示新選項(xiàng)卡時(shí)，事件按以下順序觸發(fā)：
1. hide.bs.tab （在當(dāng)前活動(dòng)選項(xiàng)卡上）
2. show.bs.tab （在待顯示的選項(xiàng)卡上）
3. hidden.bs.tab（在上一個(gè)活動(dòng)選項(xiàng)卡上，與hide.bs.tab事件相同）
4. shown.bs.tab（在新近活動(dòng)的剛顯示的標(biāo)簽上，與show.bs.tab事件相同）
如果沒(méi)有標(biāo)簽已經(jīng)活躍，hide.bs.tab和hidden.bs.tab事件不會(huì)被解雇。
事件類型 | 描述 |
|---|---|
show.bs.tab | 此事件在選項(xiàng)卡顯示中觸發(fā)，但在顯示新選項(xiàng)卡之前。使用 event.target和event.relatedTarget分別定位活動(dòng)選項(xiàng)卡和上一個(gè)活動(dòng)選項(xiàng)卡（如果可用）。 |
shown.bs.tab | 在顯示標(biāo)簽后，此事件會(huì)在標(biāo)簽上顯示。使用 event.target 和 event.relatedTarget 分別定位活動(dòng)選項(xiàng)卡和上一個(gè)活動(dòng)選項(xiàng)卡（如果可用）。 |
hide.bs.tab | 當(dāng)要顯示新選項(xiàng)卡時(shí)會(huì)觸發(fā)此事件（因此將隱藏上一個(gè)活動(dòng)選項(xiàng)卡）。使用event.target和event.relatedTarget分別定位當(dāng)前活動(dòng)選項(xiàng)卡和即將生效的新選項(xiàng)卡。 |
hidden.bs.tab | 此事件在顯示新選項(xiàng)卡后觸發(fā)（因此上一個(gè)活動(dòng)選項(xiàng)卡被隱藏）。使用event.target和event.relatedTarget分別定位上一個(gè)活動(dòng)選項(xiàng)卡和新活動(dòng)選項(xiàng)卡。 |
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab})