Bootstrap 5 列表组

Bootstrap 5 列表组是一种多功能且有效的显示一系列内容项的方法。修改并扩展它们以适应几乎任何内容。列表组在一个标签页中显示多个项目或内容。

基本列表组

基本列表组在一个组标签页中显示多个项目。列表需要基本的 <ul> 和 <li> html 标签。需要使用 "list-group" 类来创建列表组。"list-group-item" 类包含 "list-group" 类中的多个值。

语法

以下语法展示了如何使用 bootstrap 5 类创建组列表。

示例

以下示例展示了如何使用 bootstrap 5 类创建基本列表组。在这里，我们可以在组列表中包含四个值。

输出

下图显示了网页的基本组列表输出。

活动列表组

需要使用 "list-group" 类在应用程序中创建列表组。列表组在一个组标签页中显示多个项目，其中包含活动项目。"list-group-item" 类在 "list-group" 类中带有 "active" 关键字。"active" 关键字显示列表中的活动或点击项目。

语法

以下语法展示了如何使用 bootstrap 5 类创建带活动项目的组列表。

示例

以下示例展示了如何使用 bootstrap 5 类创建基本列表组。

输出

下图显示了网页上带活动项目的组列表输出。

禁用列表组

列表组在一个组标签页中显示多个项目，其中包含已禁用的项目。"list-group" 类用于在网页上创建列表组。"list-group-item" 类在 "list-group" 类中带有 "disabled" 关键字。"disabled" 关键字显示列表中不可用或未使用的项目。

语法

以下语法展示了如何使用 bootstrap 5 类创建带禁用项目的组列表。

示例

以下示例展示了如何使用 bootstrap 5 类创建基本列表组。我们使用 disabled 关键字来表示列表组的第三个和第四个值。

输出

下图显示了网页上带禁用项目的组列表输出。

带有链接的列表组

列表组使用具有不同功能的项目，例如链接、文本和按钮。列表组包含链接格式的列表项。在 "list-group" 类中使用带有 "href" 函数的 <a> 标签来创建链接。"list-group-item" 和 "list-group-item-action" 类在 <a> 标签中使用。

我们可以根据应用程序的要求使用 active 和 disabled 关键字。

语法

以下语法展示了如何使用 bootstrap 5 类创建带有链接的组列表。

示例

以下示例展示了如何使用 bootstrap 5 类创建基本列表组。我们可以看到带有链接的列表项。每个项目在其 <a> 标签中都包含其链接。

输出

下图显示了网页上带有链接的组列表输出。

按钮列表组

列表组使用具有不同功能的项目，例如链接、文本和按钮。列表组包含链接格式的列表项。在 "list-group" 类中使用带按钮类型的 <button> 标签来创建链接。"list-group-item" 和 "list-group-item-action" 类在 <button> 标签中使用。我们可以根据应用程序的要求在按钮中使用 active 和 disabled 关键字。

语法

以下语法展示了如何使用 bootstrap 5 类创建带有链接的组列表。

示例

以下示例展示了如何使用 bootstrap 5 类创建基本列表组。我们可以看到带有按钮功能的列表项。每个项目在其 <button> 标签中都包含其按钮操作。

输出

下图显示了网页上带有按钮项目的组列表输出。

上下文列表组

基本列表组使用 <ul> 和 <li> html 标签在一个组标签页中显示多个项目。"list-group-item" 类在 "list-group" 类中包含多个值，带有 html 列表标签。上下文列表组显示列表项的不同或相似的背景颜色。"list-group-item" 与 "list-group-item-primary" 类在标签中使用所需的背景颜色。

语法

以下语法展示了如何使用 bootstrap 5 类创建上下文组列表。

示例

以下示例展示了如何使用 bootstrap 5 类创建上下文列表组。我们可以在网页中包含不同背景颜色的列表项。

输出

下图显示了网页的上下文组列表输出。

带有链接的上下文列表组

基本列表组在一个组标签页中显示具有不同背景颜色的多个项目。上下文列表组需要 <ul> 和 <li> html 标签以及 <a> 标签来创建带有内容的链接。"list-group-item" 类在 "list-group" 类中包含多个值，带有 html 列表标签。上下文列表组显示列表项的不同或相似的背景颜色。"list-group-item" 与 "list-group-item-info" 类在标签中使用所需的背景颜色并显示信息内容。

语法

以下语法展示了如何使用 bootstrap 5 类创建带有链接的上下文组列表。

示例

以下示例展示了如何使用 bootstrap 5 类创建上下文列表组。我们可以包含带有链接的不同背景颜色的列表项。

输出

下图显示了网页的上下文组列表输出。

无边框列表组

Bootstrap 5 列表组在一个标签页中显示多个项目，有边框或无边框。列表需要基本的 <ul> 和 <li> html 标签。"list-group" 与 "list-group-flush" 类用于删除列表组功能的边框。flush 类显示组列表，在两个项目之间只有一条水平线。

语法

以下语法展示了如何使用 bootstrap 5 类删除边框组列表。

示例

以下示例展示了如何使用 bootstrap 5 类创建基本列表组。在这里，我们可以在组列表中包含四个值。

输出

下图显示了网页上无边框的组列表输出。

编号列表组

Bootstrap 5 列表组在值之前显示编号的多个项目。编号列表组需要基本的 <ul> 和 <li> html 标签。"list-group" 与 "list-group-numbered" 类在列表组功能中在列出内容或项目之前显示数字。

语法

以下语法展示了如何使用 bootstrap 5 类创建编号组列表。

示例

以下示例展示了如何使用 bootstrap 5 类创建基本列表组。在这里，我们可以在组列表中包含四个值。

输出

下图显示了网页的编号组列表输出。

水平列表组

Bootstrap 5 列表组水平地在一个标签页中显示多个项目。<ul> html 标签包含 "list-group" 和 "list-group-horizontal" 类，以在单行中显示列表项。我们可以在 "ul" 标签中使用 "link"、"button" 或 "li" 标签，使用 bootstrap 5 类。

语法

以下语法展示了如何使用 bootstrap 5 类创建水平列表组。

示例

以下示例展示了如何使用 bootstrap 5 类创建水平或单行列表组。在这里，我们可以在单行组列表中包含四个值。

输出

下图显示了网页的编号组列表输出。

带有徽章的列表组

Bootstrap 5 列表组在一个标签页中显示带有徽章的多个项目。<ul> html 标签包含 "list-group" 类以垂直格式显示列表项。我们可以在 "ul" 标签中使用 "link"、"button" 或 "li" 标签，使用所需的徽章功能。徽章类在 <span> 标签内使用，以显示有关上下文的额外信息。<span> 标签在 <li> 标签中使用所需值。

示例

以下示例展示了如何使用 bootstrap 5 类创建带有不同背景颜色徽章的列表组。在这里，我们可以在单行组列表中包含五个值，带有上下文徽章。

输出

下图显示了带有徽章的 bootstrap 5 列表组的网页输出。

结论

列表组在一个标签页中显示具有不同样式和功能的多个数据。bootstrap 5 列表组功能包含在小空间或存储功能中使用大尺寸和类似类型的数据。