Bootstrap 5 列表組
基礎的列表組
最基本的列表組是包含列表項的無序列表：
如需創建基礎列表組，請使用類為 .list-group 的 <ul> 元素和類為 .list-group-item 的 <li> 元素：
實例
<ul class="list-group"> <li class="list-group-item">第一項</li> <li class="list-group-item">第二項</li> <li class="list-group-item">第三項</li> </ul>
活動狀態
請使用 .active 類突出顯示當前項目：
實例
<ul class="list-group"> <li class="list-group-item active">活動項目</li> <li class="list-group-item">第二項</li> <li class="list-group-item">第三項</li> </ul>
包含鏈接項的列表組
如需創建帶有鏈接項目的列表組，請使用 <div> 代替 <ul>，用 <a> 代替 <li>。可選地，如果您想要懸停時的灰色背景色，請添加 .list-group-item-action 類：
實例
<div class="list-group"> <a href="#" class="list-group-item list-group-item-action">第一項</a> <a href="#" class="list-group-item list-group-item-action">第二項</a> <a href="#" class="list-group-item list-group-item-action">第三項</a> </div>
禁用項目
.disabled 類為禁用的項目添加了較淺的文本顏色。當在鏈接上使用時，將去除懸停效果：
實例
<div class="list-group"> <a href="#" class="list-group-item disabled">被禁用的項目</a> <a href="#" class="list-group-item disabled">被禁用的項目</a> <a href="#" class="list-group-item">第三項</a> </div>
刪除邊框
使用 .list-group-flush 類刪除邊框和圓角：
實例
<ul class="list-group list-group-flush"> <li class="list-group-item">第一項</li> <li class="list-group-item">第二項</li> <li class="list-group-item">第三項</li> <li class="list-group-item">第四項</li> </ul>
帶編號的列表組
使用 .list-group-numbered 類創建前面帶有數字的列表項：
實例
<ol class="list-group list-group-numbered"> <li class="list-group-item">第一項</li> <li class="list-group-item">第二項</li> <li class="list-group-item">第三項</li> </ol>
水平列表組
如果您希望列表項水平顯示而不是垂直顯示（并排而不是堆疊），請將 .list-group-horizontal 類添加到 .list-group：
實例
<ul class="list-group list-group-horizontal"> <li class="list-group-item">第一項</li> <li class="list-group-item">第二項</li> <li class="list-group-item">第三項</li> <li class="list-group-item">第四項</li> </ul>
上下文類
上下文類可用于為列表項添加顏色：
為列表項著色的類是：
.list-group-item-success.list-group-item-secondary.list-group-item-info.list-group-item-warning.list-group-item-danger.list-group-item-primary.list-group-item-dark.list-group-item-light
實例
<ul class="list-group"> <li class="list-group-item list-group-item-success">Success item</li> <li class="list-group-item list-group-item-secondary">Secondary item</li> <li class="list-group-item list-group-item-info">Info item</li> <li class="list-group-item list-group-item-warning">Warning item</li> <li class="list-group-item list-group-item-danger">Danger item</li> <li class="list-group-item list-group-item-primary">Primary item</li> <li class="list-group-item list-group-item-dark">Dark item</li> <li class="list-group-item list-group-item-light">Light item</li> </ul>
帶有上下文類的鏈接項目
實例
<div class="list-group"> <a href="#" class="list-group-item list-group-item-action">Action item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a> </div>
帶徽章的列表組
將 .badge 類與 utility/helper 類結合起來，可在列表組中添加徽章：
實例
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
收件箱
<span class="badge bg-primary rounded-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
廣告郵件
<span class="badge bg-primary rounded-pill">50</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
垃圾箱
<span class="badge bg-primary rounded-pill">99</span>
</li>
</ul>
