第25節 Bootstrap5列表群組List group組件用法
On this page
25.1 無序列表
列表組是顯示一系列內容的靈活而強大的組件。Bootstrap修改和擴展它們以支持其中的任何內容。 最基本的列表組是一個無序的列表，其中包含列表項和適當的類。在它的基礎上使用下面的選項，或者根據需要使用您自己的CSS。
25.1.1 簡單無序列表例子
看下面列表是不很簡單，就是在html列表元素的基礎上加了兩個類list-group和ist-group-item
<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>
復制代碼25.1.2 活動項目和禁用項目
將active加到list-group-item指示當前的活動狀態。 將disabled加到list-group-item使其呈現禁用。
<ul class="list-group">
<li class="list-group-item">第一行</li>
<li class="list-group-item active">第二行</li>
<li class="list-group-item">第三行</li>
<li class="list-group-item disabled">第四行</li>
<li class="list-group-item">第五行</li>
</ul>
復制代碼25.1.3 鏈接和按鈕
使用a或button，并加入list-group-item-action來創建具有hover、禁用和啟用狀態的動態列表群組。我們分離這些偽類別，以確保由非交互元素組成的列表群組（如li或div）不提供點擊或觸擊。
確保不要在這里使用標準的btn。
<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>
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
第一行 button
</button>
<button type="button" class="list-group-item list-group-item-action">第二行</button>
<button type="button" class="list-group-item list-group-item-action">第三行</button>
<button type="button" class="list-group-item list-group-item-action">第四行</button>
<button type="button" class="list-group-item list-group-item-action" disabled>第五行</button>
</div>
復制代碼25.1.4 移除邊框及圓角
在list-group中加入list-group-flush來移除部分邊框及圓角，以在父容器中（如：卡片）產生邊緣貼齊的列表群組。
<ul class="list-group list-group-flush">
<li class="list-group-item">第一行</li>
<li class="list-group-item active">第二行</li>
<li class="list-group-item">第三行</li>
<li class="list-group-item disabled">第四行</li>
<li class="list-group-item">第五行</li>
</ul>
復制代碼25.2 帶編號的有序列表
25.2.1 簡單內容
在list-group中添加list-group-numbered修飾符類（并可選地使用ol元素）以選擇編號的列表組項。數字是通過CSS生成的（與ol的默認瀏覽器樣式相反），以便更好地放置在列表組項目中，并允許更好的自定義。
數字由ol上的counter reset生成，然后在li上用 ::before 元素設置樣式并放置在counter increment和content中。
<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>
復制代碼25.2.1 自定義內容
li中還可以使用其他元素。
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">第一項標題</div>
第一項內容
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">第二項標題</div>
第二項內容
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">第三項標題</div>
第三項內容
</div>
</li>
</ol>
復制代碼25.3 水平排列
列表并不是總是豎向排列的，在list-group中加入list-group-horizontal將列表顯示改為水平。
你也選擇加入響應式變化.list-group-horizontal-{sm|md|lg|xl|xxl}，使列表群組從該斷點的最小min-width開始水平放置。
目前水平列表群組不能與Flush列表群組合并使用。
<ol class="list-group list-group-horizontal">
<li class="list-group-item">第一項內容</li>
<li class="list-group-item">第二項內容</li>
<li class="list-group-item">第三項內容</li>
</ol>
復制代碼25.4 顏色和效果
25.4.1 背景和顏色
在list-group-item中加入list-group-item-顏色可以改變列表背景顏色。
<ul class="list-group">
<li class="list-group-item">默認</li>
<li class="list-group-item list-group-item-primary">list-group-item-primary</li>
<li class="list-group-item list-group-item-secondary">list-group-item-secondary</li>
<li class="list-group-item list-group-item-success">list-group-item-success</li>
<li class="list-group-item list-group-item-danger">list-group-item-danger</li>
<li class="list-group-item list-group-item-warning">list-group-item-warning</li>
<li class="list-group-item list-group-item-info">list-group-item-info</li>
<li class="list-group-item list-group-item-light">list-group-item-light</li>
<li class="list-group-item list-group-item-dark">list-group-item-dark</li>
</ul>
復制代碼25.4.1 背景和顏色
這里添加了上一個示例中沒有的懸停樣式。還支持active狀態；應用它以指示情境式列表組項上的活動選擇。
<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 list-group-item-primary">list-group-item-primary</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">list-group-item-secondary</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">list-group-item-success</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">list-group-item-danger</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">list-group-item-warning</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">list-group-item-info</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">list-group-item-light</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">list-group-item-dark</a>
</div>
復制代碼25.5復雜列表群組
25.5.1 帶徽章
同過通用類，向任何列表項目添加標簽以顯示未讀計數、活動等。
<ol 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">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
第三項內容
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ol>
復制代碼25.5.2 自定義內容
通過彈性盒子通用類，幾乎任何的HTML都能加入到項目內，如以下的列表群組連接。
<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">文章內容摘要</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 days ago</small>
</div>
<p class="mb-1">在蘇寧對網絡傳聞辟謠之后，海豚社獨家得到消息，阿里方面已經派人入駐蘇寧在某些省份的分公司。</p>
<small class="text-muted">來源：搜狐科技</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 days ago</small>
</div>
<p class="mb-1">和造車一樣，蘋果正在研發的VR眼鏡早就變成了公開的秘密。雖然一直活在傳言中，每年都沒看見成品出現，不過好歹進展一直都在緩慢曝光中。</p>
<small class="text-muted">來源：搜狐科技</small>
</a>
</div>
復制代碼25.5.3 復選框和單項按鈕
25.5.3.1 簡單例子
將Bootstrap的復選框與單選框放在列表群組中，并依據需要進行自定義。您可以在不使用label的情況下使用它們，但請記住要包含aria-label以及必要的內容。
下面兩個例子radio和checkbox用法都是一樣的，所以每樣演示了一個。
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="radio" value="" aria-label="...">
選項一
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="radio" value="" aria-label="...">
選項二
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="radio" value="" aria-label="...">
選項三
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="radio" value="" aria-label="...">
選項四
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="radio" value="" aria-label="...">
選項五
</li>
</ul>
復制代碼25.5.3.2 將label作為點擊區域
如果您希望將label作為list-group-item使用以創造較大的點擊區域，這么做是可以的。用<label class="list-group-item">...</label>將表單和文字包裹在一起即可。
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
選項一
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
選項二
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
選項三
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
選項四
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
選項五
</label>
</div>
復制代碼今天的課程就到這里，請關注我，及時學習 俺老劉原創的《Bootstrap5零基礎到精通》第26節 Bootstrap5 模態彈框Modal組件用法。
如果這篇文章對你有幫助，記得隨手點贊哦！