Bootstrap - 清單組：初學者的全面指南
你好，有志於網頁開發的各位！我很高興能成為你們在Bootstrap清單組這段精彩旅程中的導師。作為一個教了超過十年計算機科學的人，我可以向你們保證，掌握這個組件將會在你的網頁設計工具包中帶來遊戲規則的改變。那麼，我們來一起深入探究吧！
清單組是什麼？
在我們開始之前，讓我們先了解清楚單組是什麼。想像你正在製作一個待辦事項應用程序。你會希望你的任務被整齊地組織起來，對吧？這正是清單組在網頁設計中要做的事情。它們是一種靈活且強大的方式來顯示一系列內容。無論是一個簡單的購物清單還是複雜的導航菜單，清單組都能應對！
基本項目
讓我們從基礎開始。創建一個簡單的清單組就像派對一樣容易。這樣做：
<ul class="list-group">
<li class="list-group-item">一個項目</li>
<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>在這個例子中，我們使用了一個無序列表 (<ul>) 並加上類 list-group。每一個列表項 (<li>) 都有類 list-group-item。這讓我們得到了一個乾淨、有樣式的清單，而且不需要花費太多力氣！
活動項目
有時候，你可能想要在清單中突出顯示一個項目。也許它是一個導航菜單中的當前頁面。這時，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>active 類會讓項目以不同的背景顏色突出顯示。就像在特定項目上放置了一個聚光燈！
禁用項目
如果你想要顯示一個項目但不希望用戶與它交互，那麼 disabled 類就派上用場了：
<ul class="list-group">
<li class="list-group-item disabled" aria-disabled="true">一個禁用的項目</li>
<li class="list-group-item">第二個項目</li>
<li class="list-group-item">第三個項目</li>
</ul>disabled 類會將項目染成灰色，表示它不可點擊。就像在項目上放置了一個 "請勿觸碰" 的標誌！
链接和按钮
清單組不僅僅用於靜態清單。你可以將列表項轉換為可點擊的链接或按钮：
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
當前链接項目
</a>
<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>
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">一個禁用的链接項目</a>
</div>在這裡，我們使用 <a> 標籤而不是 <li>。list-group-item-action 類讓這些链接看起來和行為上都像按钮。這就像把你的購物清單變成了一個選項菜單！
刷洗
想要刪除外側邊框和圓角？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>
<li class="list-group-item">以及第五個</li>
</ul>這會讓你的清單組看起來更乾淨、更簡潔。當你希望清單與其周圍內容無縫融合時，這非常適合！
數字化
還記得上學時候製作的那些編號清單嗎？你也可以在Bootstrap中創建它們：
<ol class="list-group list-group-numbered">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
</ol>list-group-numbered 類會自動為你的列表項目編號。就像有一個個人事助理為你的待辦事項清單編號！
水平
誰說列表總是垂直的？使用Bootstrap，你也可以讓它們水平排列：
<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>
</ul>這會創造一個並排的列表，非常適合導航菜單或顯示分類。
變體
Bootstrap提供了不同的顏色變體，以通過顏色傳達含義：
<ul class="list-group">
<li class="list-group-item">一個簡單的默認清單組項目</li>
<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>這些顏色變體可以用來表示不同的狀態或優先級。就像根據任務的重要性對它們進行顏色編碼！
带徽章
想要為你的列表項目添加一些額外信息？徽章是一個很好的方法：
<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-primary rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
第三個列表項目
<span class="badge bg-primary rounded-pill">1</span>
</li>
</ul>這會在你的列表項目中添加小的徽章元素，非常適合用於顯示計數或狀態指示器。
自定义内容
清單組可以包含的不僅僅是文本。你可以添加自定义內容來創建豐富、信息的列表項目：
<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>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">3天前</small>
</div>
<p class="mb-1">一些占位符內容在一段文字中。</p>
<small class="text-muted">以及一些灰色的小字體印跡。</small>
</a>
</div>這讓你可以創建帶有標題、段落和其他元素的複雜列表項目。就像把你的簡單購物清單變成了詳細的產品目錄！
勾選框和單選框
最後但並不是最不重要的，你甚至可以在清單組中添加勾選框或單選框：
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
第一個勾選框
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
第二個勾選框
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
第三個勾選框
</li>
</ul>這對於創建交互式列表非常適合，例如一個用戶可以勾選完成的待辦事項清單。
結論
那就是它，各位！我們一起穿越了Bootstrap清單組的奇妙世界。從基本列表到複雜的交互組件，清單組為你提供了一種多功能的解決方案，用於以結構化和吸引人的方式顯示內容。
記住，掌握這些概念的關鍵是練習。所以，去吧，嘗試這些例子，混合和匹配不同的功能，看看你能創造出什麼。祝編碼愉快！
| 方法 | 描述 |
|---|---|
| 基本項目 | 使用 list-group 和 list-group-item 類創建一個簡單的清單組 |
| 活動項目 | 使用 active 類突出顯示一個項目 |
| 禁用項目 | 使用 disabled 類將項目置於灰色 |
| 链接和按钮 | 使用 list-group-item-action 類創建可點擊的列表項 |
| 刷洗 | 使用 list-group-flush 類刪除外側邊框和圓角 |
| 數字化 | 使用 list-group-numbered 類創建編號列表 |
| 水平 | 使用 list-group-horizontal 類創建水平列表 |
| 變體 | 使用 list-group-item-primary、list-group-item-success 等類使用顏色變體 |
| 带徽章 | 為列表項目添加徽章以顯示額外信息 |
| 自定义内容 | 使用自定义內容創建豐富的列表項目 |
| 勾選框和單選框 | 在列表項中添加交互式的勾選框或單選框 |
Credits: Image by storyset