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> 标签而不是 <li> 来将它们变成可点击的导航菜单：

<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