在本教程中，我们将了解Bootstrap中的列表组。

列表组是功能强大且灵活的组件，可用于显示简单和复杂的元素自定义列表。

简单列表组

为了创建一个列表组，我们使用.list-group类，列表的项被赋予.list-group-item类。

<ul class="list-group">
  <li class="list-group-item">Apple</li>
  <li class="list-group-item">Mango</li>
  <li class="list-group-item">Orange</li>
  <li class="list-group-item">Banana</li>
  <li class="list-group-item">Watermelon</li>
</ul>

徽章列表

我们可以在列表项中使用.badge类将徽章添加到列表项。

<ul class="list-group">
  <li class="list-group-item">Apple <span class="badge">10</span></li>
  <li class="list-group-item">Mango <span class="badge">4</span></li>
  <li class="list-group-item">Orange <span class="badge">5</span></li>
  <li class="list-group-item">Banana <span class="badge">12</span></li>
  <li class="list-group-item">Watermelon <span class="badge">1</span></li>
</ul>

链接列表项

我们可以使用锚标记将列表项作为链接。

<div class="list-group">
  <a href="#" class="list-group-item">Apple</a>
  <a href="#" class="list-group-item">Mango</a>
  <a href="#" class="list-group-item">Orange</a>
</div>

活动列表项目

我们可以通过添加.active类来突出显示列表中的项目。

<div class="list-group">
  <a href="#" class="list-group-item active">Apple</a>
  <a href="#" class="list-group-item">Mango</a>
  <a href="#" class="list-group-item">Orange</a>
</div>

禁用列表项目

要禁用列表项，我们添加.disabled类。

<div class="list-group">
  <a href="#" class="list-group-item disabled">Apple</a>
  <a href="#" class="list-group-item">Mango</a>
  <a href="#" class="list-group-item">Orange</a>
</div>

上下文类

我们可以使用上下文类来设置列表项的样式。

<div class="list-group">
  <a href="#" class="list-group-item">Apple</a>
  <a href="#" class="list-group-item list-group-item-success">Mango</a>
  <a href="#" class="list-group-item list-group-item-info">Orange</a>
  <a href="#" class="list-group-item list-group-item-warning">Banana</a>
  <a href="#" class="list-group-item list-group-item-danger">Watermelon</a>
</div>

自定义列表

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">Some text goes here...</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">Some text goes here...</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">Some text goes here...</p>
  </a>
</div>