Bootstrap 5 列表組(List Group)語法知識點及案例
一、列表組基礎語法
列表組是Bootstrap中用于顯示一系列內容的靈活組件，常用于顯示菜單、導航或任何項目列表。
基本列表組結構
<ul class="list-group"><li class="list-group-item">第一項</li><li class="list-group-item">第二項</li><li class="list-group-item">第三項</li>
</ul>
二、列表組樣式選項
1. 激活和禁用狀態
<ul class="list-group"><li class="list-group-item active" aria-current="true">激活項</li><li class="list-group-item disabled" aria-disabled="true">禁用項</li><li class="list-group-item">普通項</li>
</ul>
2. 顏色變體
Bootstrap 5提供了多種上下文顏色：
<ul class="list-group"><li class="list-group-item list-group-item-primary">主要項</li><li class="list-group-item list-group-item-secondary">次要項</li><li class="list-group-item list-group-item-success">成功項</li><li class="list-group-item list-group-item-danger">危險項</li><li class="list-group-item list-group-item-warning">警告項</li><li class="list-group-item list-group-item-info">信息項</li><li class="list-group-item list-group-item-light">淺色項</li><li class="list-group-item list-group-item-dark">深色項</li>
</ul>
3. 無邊框列表組
<ul class="list-group list-group-flush"><li class="list-group-item">無邊框項1</li><li class="list-group-item">無邊框項2</li>
</ul>
三、列表組內容類型
1. 帶徽章的列表組
<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-danger rounded-pill">99+</span></li>
</ul>
2. 自定義內容
<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">列表組標題</h5><small>3天前</small></div><p class="mb-1">這里是列表項的主要內容描述。</p><small>附加小文字說明</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">另一個標題</h5><small class="text-muted">昨天</small></div><p class="mb-1">另一個列表項的內容描述。</p><small class="text-muted">更多小文字</small></a>
</div>
3. 復選框和單選按鈕列表組
<ul class="list-group"><li class="list-group-item"><input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox"><label class="form-check-label" for="firstCheckbox">第一選項</label></li><li class="list-group-item"><input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox"><label class="form-check-label" for="secondCheckbox">第二選項</label></li>
</ul>
四、列表組交互行為
1. 可點擊的列表組
<div class="list-group"><a href="#" class="list-group-item list-group-item-action">可點擊項1</a><a href="#" class="list-group-item list-group-item-action">可點擊項2</a><a href="#" class="list-group-item list-group-item-action">可點擊項3</a>
</div>
2. 水平列表組
<ul class="list-group list-group-horizontal"><li class="list-group-item">水平項1</li><li class="list-group-item">水平項2</li><li class="list-group-item">水平項3</li>
</ul>
五、綜合案例代碼
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Bootstrap 5 列表組示例</title><!-- Bootstrap 5 CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><div class="container py-5"><h1 class="mb-4">Bootstrap 5 列表組示例</h1><!-- 示例1：基本列表組 --><div class="row mb-5"><div class="col-md-6"><h3>1. 基本列表組</h3><ul class="list-group"><li class="list-group-item">默認列表項</li><li class="list-group-item active">激活狀態項</li><li class="list-group-item disabled">禁用狀態項</li></ul></div><div class="col-md-6"><h3>2. 帶徽章的列表組</h3><ul class="list-group"><li class="list-group-item d-flex justify-content-between align-items-center">未讀消息<span class="badge bg-primary rounded-pill">14</span></li><li class="list-group-item d-flex justify-content-between align-items-center">待辦事項<span class="badge bg-warning text-dark rounded-pill">5</span></li></ul></div></div><!-- 示例2：顏色變體和自定義內容 --><div class="row mb-5"><div class="col-md-6"><h3>3. 顏色變體列表組</h3><div class="list-group"><a href="#" class="list-group-item list-group-item-action list-group-item-primary">主要操作項</a><a href="#" class="list-group-item list-group-item-action list-group-item-success">成功操作項</a><a href="#" class="list-group-item list-group-item-action list-group-item-danger">危險操作項</a></div></div><div class="col-md-6"><h3>4. 自定義內容列表組</h3><div class="list-group"><a href="#" class="list-group-item list-group-item-action active" aria-current="true"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1">最新公告</h5><small>今天</small></div><p class="mb-1">系統將于今晚12點進行維護升級，預計耗時2小時。</p><small>點擊查看詳情</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">產品更新</h5><small class="text-muted">3天前</small></div><p class="mb-1">我們發布了新版本v2.0，包含多項功能改進。</p><small class="text-muted">點擊查看更新日志</small></a></div></div></div><!-- 示例3：交互式列表組 --><div class="row mb-5"><div class="col-md-6"><h3>5. 復選框列表組</h3><ul class="list-group"><li class="list-group-item"><input class="form-check-input me-1" type="checkbox" value="" id="option1" checked><label class="form-check-label" for="option1">電子郵件通知</label></li><li class="list-group-item"><input class="form-check-input me-1" type="checkbox" value="" id="option2"><label class="form-check-label" for="option2">短信通知</label></li><li class="list-group-item"><input class="form-check-input me-1" type="checkbox" value="" id="option3"><label class="form-check-label" for="option3">推送通知</label></li></ul></div><div class="col-md-6"><h3>6. 水平列表組</h3><ul class="list-group list-group-horizontal-md mb-3"><li class="list-group-item">首頁</li><li class="list-group-item active">產品</li><li class="list-group-item">服務</li><li class="list-group-item">關于我們</li></ul><h3 class="mt-4">7. 無邊框列表組</h3><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></ul></div></div></div><!-- Bootstrap 5 JS Bundle with Popper --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
六、關鍵點總結
- 基礎結構：使用
list-group作為容器，list-group-item作為列表項 - 狀態控制：
active和disabled類控制項狀態 - 顏色變體：通過
list-group-item-*類設置不同顏色 - 交互增強：添加
list-group-item-action使列表項可點擊 - 內容擴展：可以在列表項中放置任意HTML內容
- 布局選項：
list-group-horizontal實現水平布局，list-group-flush移除邊框
列表組是Bootstrap中非常靈活的組件，可以用于構建導航菜單、通知列表、設置面板等各種界面元素。通過組合不同的類和結構，可以實現豐富的視覺效果和交互體驗。
