Bootstrap 列表组

最后更新于：2022-03-27 00:17:05

Bootstrap 列表组

本章我们将讲解列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下：

• 向元素 <ul> 添加 class .list-group。
• 向 <li> 添加 class .list-group-item。

下面的实例演示了这点：

结果如下所示：

向列表组添加徽章

我们可以向任意的列表项添加徽章组件，它会自动定位到右边。只需要在 <li> 元素中添加 <span class=”badge”> 即可。下面的实例演示了这点：

结果如下所示：

向列表组添加链接

通过使用锚标签代替列表项，我们可以向列表组添加链接。我们需要使用 <a> 代替 <li> 元素。下面的实例演示了这点：

结果如下所示：

向列表组添加自定义内容

我们可以向上面已添加链接的列表组添加任意的 HTML 内容。下面的实例演示了这点：

结果如下所示：

水平列表

上面实例中列表都是按垂直显示的，如果我们需要一个水平列表，可以通过以下代码实现：

结果如下所示：