在 Bootstrap 中,列表组(List Group)是一种用于显示列表的组件,它可以包含文本、链接、按钮等元素。以下是一个简单的列表组示例:
<ul class="list-group">
  <li class="list-group-item">列表项 1</li>
  <li class="list-group-item">列表项 2</li>
  <li class="list-group-item">列表项 3</li>
</ul>

在这个例子中,list-group 类用于创建列表组,而 list-group-item 类用于每个列表项。

如果你想要添加更多的内容,可以在列表项中包含其他元素,如链接、按钮等:
<ul class="list-group">
  <li class="list-group-item">列表项 1</li>
  <li class="list-group-item">列表项 2</li>
  <li class="list-group-item">
    列表项 3
    <span class="badge badge-primary badge-pill">5</span>
  </li>
  <a href="#" class="list-group-item list-group-item-action">链接项</a>
  <button type="button" class="list-group-item list-group-item-action">按钮项</button>
</ul>

在这个例子中,我们添加了一个带有徽章(badge)的列表项,一个链接项和一个按钮项。list-group-item-action 类用于使链接和按钮看起来更像是可点击的元素。

你还可以创建水平排列的列表组,通过在 list-group 上添加 list-group-horizontal 类:
<div class="list-group list-group-horizontal">
  <a href="#" class="list-group-item list-group-item-action">链接项 1</a>
  <a href="#" class="list-group-item list-group-item-action">链接项 2</a>
  <a href="#" class="list-group-item list-group-item-action">链接项 3</a>
</div>

这将使列表项水平排列而不是垂直排列。

通过使用这些辅助类,你可以轻松创建符合你设计需求的列表组。根据具体的项目需求,你可能需要进一步自定义样式和结构。


转载请注明出处:http://www.zyzy.cn/article/detail/12626/Bootstrap