Bootstrap - 列表组演示


什么是列表组?

列表组是一个多功能组件,允许您以组织良好且具有视觉吸引力的方式显示项目列表。列表组通常用于呈现相关内容的集合,例如一组文章、评论或用户个人资料。

Bootstrap 提供了一组可用于添加和自定义列表组的类:

班级 描述
.列表组 应用于 <ul> 元素以创建列表组容器
.列表组项目 应用于 <li> 元素以将其样式设置为列表组项
.list-组-项目-操作 此类使列表组项目看起来具有交互性并响应用户交互
。积极的 此类将列表中的项目设置为活动状态
.disabled 此类使列表中的项目禁用
.list-group-item-{颜色} 自定义列表组项目的背景颜色
.list-group-item-{颜色}-文本 自定义列表组项目的文本颜色
.list-group-item-{颜色}-活动 使用指定的背景颜色突出显示所选项目
.list-group-flush 删除列表组项的边框和边框半径

列表组的一些示例如下:


例子 描述 下载链接
列表组基本 此示例显示基本列表组的结构。 下载
列出组活动/禁用项目 此示例显示了列表组的结构,其中显示了活动和禁用的项目。 下载
将组列为链接和按钮 此示例显示了包含链接和按钮的列表组的结构。 下载
编号列表组 此示例显示编号列表组的结构。 下载
列出带有徽章的组 此示例显示带有徽章的列表组的结构。 下载
水平列表组 此示例显示水平列表组的结构。 下载
带有单选按钮和复选框的列表组 此示例显示了带有单选按钮和复选框的列表组的结构。 下载