Bootstrap 3 之 Bootstrap 列表组

Bootstrap 列表组是一种用于展示列表内容的组件，可以帮助我们更好地组织和展示信息。在 Bootstrap 3 中，列表组可以用来显示文本、链接、按钮等内容。

基本列表组

要创建一个基本的列表组，我们可以使用 <ul> 和 <li> 标签来定义列表项。通过添加 .list-group 类可以将其转换为 Bootstrap 列表组。

<ul class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

在上面的示例中，我们创建了一个简单的列表组，其中包含三个列表项。

激活状态

Bootstrap 列表组还支持激活状态，通过添加 .active 类可以高亮显示当前选中的列表项。

<ul class="list-group">
  <li class="list-group-item active">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

在上面的示例中，我们将第一个列表项设置为激活状态，以突出显示当前选中的内容。

链接列表组

除了基本的文本列表，Bootstrap 列表组还可以包含链接。我们可以在 <li> 标签内部添加 <a> 标签来创建链接列表组。

<ul class="list-group">
  <li class="list-group-item"><a href="#">Link 1</a></li>
  <li class="list-group-item"><a href="#">Link 2</a></li>
  <li class="list-group-item"><a href="#">Link 3</a></li>
</ul>

在上面的示例中，我们创建了一个包含链接的列表组，用户可以点击链接跳转到对应的页面。

按钮列表组

除了链接，Bootstrap 列表组还可以包含按钮。我们可以在 <li> 标签内部添加 <button> 标签来创建按钮列表组。

<ul class="list-group">
  <li class="list-group-item"><button class="btn btn-primary">Button 1</button></li>
  <li class="list-group-item"><button class="btn btn-success">Button 2</button></li>
  <li class="list-group-item"><button class="btn btn-info">Button 3</button></li>
</ul>

在上面的示例中，我们创建了一个包含按钮的列表组，用户可以点击按钮执行相应的操作。

这就是关于 Bootstrap 列表组的介绍，希望能帮助你更好地使用 Bootstrap 3 来展示列表内容。