Bootstrap 简明教程

Bootstrap - List groups demo

列表组是一个通用的组件，允许您以有条理且视觉吸引力的方式展示项目列表。列表组常用于呈现相关内容的集合，例如文章、评论或用户简介的集合。

Bootstrap 提供了一系列类，可用于添加和定制列表组：

class

description

.list-group

应用于 <ul> 元素以创建列表组容器

.list-group-item

应用于 <li> 元素以将它们设定为样式为列表组项目

.list-group-item-action

此类使列表组项目显示为交互式且对用户交互具有响应力

.active

此类在列表中设置一项处于活动状态

.disabled

此类在列表中禁用一项

.list-group-item-{color}

自定义列表组项目的背景颜色

.list-group-item-{color}-text

定制列表组项目的文字颜色

.list-group-item-{color}-active

使用指定背景色高亮显示选定项目

.list-group-flush

消除列表组项目的边框和边框半径

以下是一些列表组示例：

Example

Description

Download link

此示例显示了基本列表组的结构。

此示例显示了显示活动和停用项目的列表组的结构。

此示例显示了具有链接和按钮的列表组的结构。

此示例显示了编号列表组的结构。

此示例显示了带有徽章的列表组的结构。

此示例显示了水平列表组的结构。

此示例显示了带有单选按钮和复选框的列表组的结构。