Getting started
Accessibility（無障礙）
Browsers and devices（瀏覽器和設(shè)備）
Build tools（構(gòu)建工具）
Contents（內(nèi)容）
Download（下載）
JavaScript
Theming Bootstrap（主題Bootstrap）
Webpack
Components: Alerts
Alerts（警報）
Components: Badges
Badges（徽章）
Components: Breadcrumb
Breadcrumb
Components: Button group
Button group（按鈕組）
Components: Buttons
Buttons（按鈕）
Components: Cards
Components: Carousel
Cards（卡）
Carousel（圓盤傳送帶）
Components: Collapse
Collapse（折疊）
Components: Dropdowns
Dropdowns（下拉菜單）
Components: Forms
Forms（表單）
Components: Input group
Input group（輸入群組）
Components: Input group
Jumbotron（廣告大屏幕）
Components: List group
List group（列表組）
Components: Modal
Modal（互動視窗）
Components: Navbar
Navbar（導(dǎo)航欄）
Components: Navs
Navs（導(dǎo)航欄）
Components: Pagination
Pagination（分頁）
Components: Popovers
Popovers（彈出框）
Components: Progress
Progress（進(jìn)度條）
Components: Scrollspy
Scrollspy（滾動監(jiān)聽）
Components: Tooltips
Tooltips（提示工具）
Content
Code（代碼）
Figures（圖片區(qū)）
Images（圖片）
Reboot（重置）
Tables（表格）
Typography（排版）
Layout
Grid（網(wǎng)格）
Layout（布局）
Media object（多媒體對象）
Utilities for layout（排版通用類別）
Migration
Migrating to v4（遷移到v4）
Utilities
Borders（邊框）
Clearfix（清除浮動）
Close icon（關(guān)閉圖標(biāo)）
Colors（顏色）
Display property（顯示屬性）
Embeds（內(nèi)嵌）
Flex（彈性）
Float（浮動）
Image replacement（圖像替換）
Position（位置）
Screenreaders（熒幕閱讀器）
Sizing（尺寸）
Spacing（間隔）
Text（文本）
Vertical alignment（垂直對齊）
Visibility（能見度）
?
This document uses PHP Chinese website manual Release
characters
列表組是用于顯示一系列內(nèi)容的靈活且強大的組件。修改并擴展它們以支持其中的任何內(nèi)容。
基本示例
最基本的列表組是包含列表項和適當(dā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>
活動項目
添加.active到一個.list-group-item以指示當(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>
禁用的項目
添加.disabled到一個.list-group-item使其顯示禁用。請注意，一些帶有.disabled元素.disabled還需要自定義 JavaScript 來完全禁用其點擊事件（例如，鏈接）。
<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> 通過添加.list-group-item-action來創(chuàng)建具有懸停，禁用和活動狀態(tài)的可操作列表組項目。我們將這些偽類分開，以確保由非交互式元素（如<li>或<div>）組成的列表組不提供點擊或點擊功能。
一定不要在 這里使用標(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>
上下文類
使用上下文類來設(shè)置具有狀態(tài)背景和顏色的列表項。
<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。請注意，在前面的示例中不存在懸停樣式。還支持的是.active狀態(tài)；將其應(yī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ù)
使用顏色來增加意義只能提供一種視覺指示，而不會傳達(dá)給輔助技術(shù)的用戶 - 如屏幕閱讀器。確保由顏色表示的信息或者來自內(nèi)容本身（例如可見文本），或者通過其他方式包含，例如隱藏在.sr-only類中的其他文本。
帶有徽章
在一些實用程序的幫助下，將徽章添加到任何列表組項目以顯示未讀的計數(shù)，活動等等。
<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 實用程序的幫助下，添加幾乎所有的 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 行為
使用選項卡 JavaScript 插件 - 單獨包含它或通過編譯的bootstrap.js文件 - 擴展我們的列表組以創(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ù)屬性
您可以通過簡單地指定data-toggle="list"或在元素上書寫任何JavaScript來激活列表組導(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>
通過 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').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到每個.tab-pane。第一個選項卡窗格還必須有.show使初始內(nèi)容可見。
<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
激活列表項元素和內(nèi)容容器。標(biāo)簽應(yīng)該有一個data-target或一個href目標(biāo)在 DOM 的容器節(jié)點。
<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’)
選擇給定的列表項并顯示其關(guān)聯(lián)窗格。之前選擇的任何其他列表項目將被取消選中，并且其關(guān)聯(lián)的窗格將被隱藏。在實際顯示選項卡窗格之前返回給調(diào)用方（例如，在shown.bs.tab事件發(fā)生之前）。
$('#someListItem').tab('show')活動
當(dāng)顯示新選項卡時，事件按以下順序觸發(fā)：
1. hide.bs.tab （在當(dāng)前活動選項卡上）
2. show.bs.tab （在待顯示的選項卡上）
3. hidden.bs.tab（在上一個活動選項卡上，與hide.bs.tab事件相同）
4. shown.bs.tab（在新近活動的剛顯示的標(biāo)簽上，與show.bs.tab事件相同）
如果沒有標(biāo)簽已經(jīng)活躍，hide.bs.tab和hidden.bs.tab事件不會被解雇。
事件類型 | 描述 |
|---|---|
show.bs.tab | 此事件在選項卡顯示中觸發(fā)，但在顯示新選項卡之前。使用 event.target和event.relatedTarget分別定位活動選項卡和上一個活動選項卡（如果可用）。 |
shown.bs.tab | 在顯示標(biāo)簽后，此事件會在標(biāo)簽上顯示。使用 event.target 和 event.relatedTarget 分別定位活動選項卡和上一個活動選項卡（如果可用）。 |
hide.bs.tab | 當(dāng)要顯示新選項卡時會觸發(fā)此事件（因此將隱藏上一個活動選項卡）。使用event.target和event.relatedTarget分別定位當(dāng)前活動選項卡和即將生效的新選項卡。 |
hidden.bs.tab | 此事件在顯示新選項卡后觸發(fā)（因此上一個活動選項卡被隱藏）。使用event.target和event.relatedTarget分別定位上一個活動選項卡和新活動選項卡。 |
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab})