Bootstrap学习之列表组组件的用法

1. Bootstrap列表组件简介

Bootstrap是一个开源的前端框架，它提供一系列可重复使用的组件和工具，用于快速开发网站和Web应用程序。其中的列表组件，可以帮助我们轻松地创建各种列表，并对列表项进行定制化的样式设计。Bootstrap提供了多个列表组件，包括基本列表、嵌套列表、无序列表、有序列表以及列表组等等。

2. Bootstrap列表组件用法

2.1 基本列表

基本列表是最简单的列表，由一组链接或文本组成，无序排列。可以使用无序列表（ul）和有序列表（ol）来创建基本列表。以下是一个基本无序列表的例子：

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

以上代码中，<ul>标签用于创建无序列表，类名list-group和list-group-item用于继承Bootstrap中预设好的样式，从而让列表看起来更美观。以上代码会生成以下的样式效果：

• 列表项 1

• 列表项 2

• 列表项 3

2.2 列表组

列表组是基本列表的一个扩展，用于将多个基本列表项组合在一起。通常情况下，您可以将列表组用于将相关的信息进行分组并在“面板”和“面板组”组件中进行使用。以下是一个基本列表组的例子：

<div class="list-group">
  <a href="#" class="list-group-item active">
    列表项 1
  </a>
  <a href="#" class="list-group-item">列表项 2</a>
  <a href="#" class="list-group-item">列表项 3</a>
</div>

以上代码中，<div>标签用于创建列表组，类名list-group和list-group-item用于继承Bootstrap中预设好的样式。以下是以上代码的样式效果图：

2.3 带图表格的列表组

您可以使用列表组来创建带图标的列表，使用图片图标和矢量图标都可以。以下是一个带图片图标的列表组的例子：

<ul class="list-group">
  <li class="list-group-item">
    <img src="图标路径" alt="图标描述"> 列表项 1
  </li>
  <li class="list-group-item">
    <img src="图标路径" alt="图标描述"> 列表项 2
  </li>
  <li class="list-group-item">
    <img src="图标路径" alt="图标描述"> 列表项 3
  </li>
</ul>

以上代码中，<img>标签用于插入图标，<li>标签用于创建列表项。以下是以上代码的样式效果图：

2.4 激活/禁用状态的列表项

您可以使用active类来为当前选中项设置活动选中状态，使用disabled类来为禁用项设置禁用状态。以下是一个带有激活/禁用状态的列表项的例子：

<ul class="list-group">
  <li class="list-group-item active">活动选中项</li>
  <li class="list-group-item">普通列表项</li>
  <li class="list-group-item disabled">禁用项</li>
</ul>

以上代码中，使用了active类和disabled类来表示活动选中项和禁用项的状态。以下是以上代码的样式效果图：

• 活动选中项

• 普通列表项

• 禁用项

2.5 嵌套列表

Bootstrap还提供了嵌套的列表组件，可以使用无序列表来创建父列表，然后在父列表中插入一个或多个子列表，按照该方式，可以创建多层嵌套的列表。以下是一个嵌套列表的例子：

<ul class="list-group">
  <li class="list-group-item list-group-item-action">
    列表项 1
    <ul class="list-group">
      <li class="list-group-item list-group-item-action">子列表项 1</li>
      <li class="list-group-item list-group-item-action">子列表项 2</li>
      <li class="list-group-item list-group-item-action">子列表项 3</li>
    </ul>
  </li>
  <li class="list-group-item list-group-item-action">列表项 2</li>
  <li class="list-group-item list-group-item-action">列表项 3</li>
</ul>

在以上示例中，使用了list-group-item-action类来为列表项设置鼠标悬停、激活和选中状态的样式，同时嵌套插入了一个包含3个子列表项的子列表。以下是以上代码的样式效果图：

• 列表项 1

• 子列表项 1
• 子列表项 2
• 子列表项 3

• 列表项 2
• 列表项 3

2.6 自定义标签

Bootstrap还允许您自定义列表项的标签，这样可以在列表组件内部使用各种其他标签，例如输入框、按钮等。例如：

<ul class="list-group">
  <li class="list-group-item">
    <h5>自定义 <span class="badge badge-success">标签</span></h5>
    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="输入框">
      <div class="input-group-append">
        <button class="btn btn-primary" type="submit">提交</button>
      </div>
    </div>
  </li>
</ul>

在以上示例中，我们插入了一个自定义标签（<h5>）和一个表单组件（<div class="input-group mb-3">）。以下是以上代码的样式效果图：

• 自定义 标签

  提交

总结：

在本文中，我们介绍了Bootstrap列表组件的详细用法，包括基本列表、列表组、带图标的列表、激活/禁用状态的列表项、嵌套列表和自定义标签。通过学习本文，您已经掌握了如何使用Bootstrap创建各种列表，以及如何通过定制化样式来优化和美化列表组件。