Bootstrap 简明教程
Bootstrap - List groups demo
What is a list group?
列表组是一个通用的组件，允许您以有条理且视觉吸引力的方式展示项目列表。列表组常用于呈现相关内容的集合，例如文章、评论或用户简介的集合。
List group is a versatile component that allows you to display a list of items in a well-organized and visually appealing manner. List group is often used to present a collection of related content, such as a set of articles, comments, or user profiles.
Bootstrap 提供了一系列类，可用于添加和定制列表组：
The Bootstrap provides a set of classes that can be used to add and customize the list groups:
class |
description |
.list-group |
Applied to the <ul> element to create a list group container |
.list-group-item |
Applied to the <li> elements to style them as list group items |
.list-group-item-action |
This class makes list group items appear interactive and responsive to user interactions |
.active |
This class sets an item active in the list |
.disabled |
This class makes an item disabled in the list |
.list-group-item-{color} |
Customizes the background color of list group items |
.list-group-item-{color}-text |
Customizes the color of the text of list group items |
.list-group-item-{color}-active |
Highlights the selected item with the specified background color |
.list-group-flush |
Removes the border and border-radius of list group items |
以下是一些列表组示例：
Some of the examples of list groups is as follows:
Example |
Description |
Download link |
This example shows the structure of a basic list group. |
||
This example shows the structure of a list group showing the active and disabled item. |
||
This example shows the structure of a list group with links and buttons. |
||
This example shows the structure of a numbered list group. |
||
This example shows the structure of a list group with badges. |
||
This example shows the structure of a horizontal list group. |
||
This example shows the structure of a list group with radio buttons and checkboxes. |