Bootstrap 5 列表組

Basic List Groups

The most basic list group is an unordered list with list items

• First item
• Second item
• Third item

To create a basic list group, use an <ul> element with class .list-group, and <li> elements with class .list-group-item

Active State

• 活動專案
• Second item
• Third item

Use the .active class to highlight the current item

List Group With Linked Items

要建立帶有連結項的列表組，請使用 <div> 而非 <ul>，並使用 <a> 代替 <li>。如果希望在懸停時顯示灰色背景，可以選擇新增 .list-group-item-action 類。

Disabled Item

`.disabled` 類為停用的專案添加了較淺的文字顏色。當用於連結時，它會移除懸停效果。

無邊框 / 移除邊框

使用 .list-group-flush 類可以移除部分邊框和圓角。

帶編號的列表組

使用 .list-group-numbered 類可以在列表項前面新增數字。

水平列表組

如果你希望列表項水平顯示而不是垂直顯示（並排而不是上下堆疊），請將 .list-group-horizontal 類新增到 .list-group。

Contextual Classes

可以使用上下文類來為列表項新增顏色。

• 成功項
• 次要項
• 資訊項
• 警告項
• 危險項
• 主要項
• 暗色項
• 淺色項

用於為列表項著色的類有： .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。

帶上下文類的連結項

帶有徽章的列表組

結合 .badge 類和輔助/助手類，在列表組中新增徽章。