Bootstrap - 清單群組示範

你好，有抱負的網頁開發者們！今天，我們將要進入Bootstrap清單群組的奇妙世界。作為你們親切的鄰居電腦老師，我非常高興能夠帶領你們踏上這次旅程。所以，拿起你們最喜歡的飲料，放鬆身心，讓我們一起開始這場編程冒險吧！

清單群組是什麼？

在我們深入細節之前，讓我們從基礎開始。清單群組是Bootstrap中用於顯示一系列內容的靈活且強大的組件。把它當作是一種時尚的方式來展示清單項目，無論它們是簡單的文本、鏈接還是自定義內容。它就像給你那無聊的舊清單來了一次時尚的改造！

为什么要使用清單群組？

清單群組非常萬用。它們可以用於：

• 顯示簡單的清單
• 創建導航菜單
• 顯示用戶通知
• 以結構化的方式呈現內容

現在我們知道了清單群組是什麼以及它們有多棒，讓我們挽起袖子開始編程吧！

基本清單群組

讓我們從一個簡單的清單群組例子開始：

<ul class="list-group">
<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 類別。這會創造出一個乾淨、帶邊框且項目間距均勻的列表。

活動項目

有時候，你可能想要在清單中突出顯示一個特定項目。Bootstrap讓這件事變得非常簡單，只需要使用 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">第一個項目</li>
<li class="list-group-item disabled">禁用項目</li>
<li class="list-group-item">第三個項目</li>
</ul>

禁用的項目會顯示為灰色，表示它不是交互式的。就像在那個特定項目上貼了一個“請勿觸碰”的標誌。

带鏈接的清單群組

清單群組不僅僅用於靜態列表。你可以通過使用 <a> 標籤來將它們轉換為可點擊的導航菜單：

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">首頁</a>
<a href="#" class="list-group-item list-group-item-action">個人資料</a>
<a href="#" class="list-group-item list-group-item-action">消息</a>
</div>

在這裡，我們使用 <a> 標籤並加上 list-group-item 和 list-group-item-action 類別。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>
</ul>

這會創造出一個乾淨、无边框且可以與頁面上其他元素无缝融合的列表。

水平清單群組

清單群組也可以水平顯示。這對於創建標籤式的界面非常棒：

<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>

list-group-horizontal 類別將垂直列表轉換為水平列表。就像教導你的列表做搖曳舞——你能夠做到多低？

上下文類別

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>

這些上下文類別為你的列表項目添加了一抹顏色，使它們在視覺上更吸引人且信息更豐富。

自定義內容

清單群組可以包含的不僅僅是文本。你可以添加自定義內容來創建更复杂的列表項：

<div class="list-group">
<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>3天前</small>
</div>
<p class="mb-1">一些占位符內容在段落中。</p>
<small>還有一些小字印刷。</small>
</a>
</div>

這個例子展示了如何創建一個帶有標題、段落和小字的列表項。就像把你的列表項變成了迷你的文章！

在清單群組中添加徽章

你還可以在列表項中添加徽章以顯示附加信息：

<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 rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
已發送
<span class="badge bg-secondary rounded-pill">99+</span>
</li>
</ul>

這會創造一個帶有徽章在右側的列表，非常適合用於顯示計數或狀態指示器。

結論

這就是了，各位！我們一起穿越了Bootstrap清單群組的領地，從簡單列表到复杂的自定義內容。記住，熟練來自練習，所以不要害怕嘗試這些例子並創造你自己的獨特清單群組。

清單群組就像網頁設計中的瑞士軍刀——多用途、實用且總是在你的工具包中隨時可用。所以，勇往直前，開始列舉吧！誰知道呢？你可能會成為清單群組的米開朗基羅！

快樂編程，願你的列表總是完美地分組！

方法	描述
基本清單群組	創建一個簡單、帶邊框的列表
活動項目	在列表中突出顯示特定項目
禁用項目	使項目看起來不可點擊
带鏈接的清單群組	將列表項轉換為可點擊的鏈接
刷洗式清單群組	移除外側邊框和圓角
水平清單群組	水平顯示列表項
上下文類別	為列表項添加顏色以傳達含義
自定義內容	在列表項中允許复杂数据
在清單群組中添加徽章	在列表項中添加徽章以显示附加信息

Credits: Image by storyset