Bootstrap5 列表组
Bootstrap5 列表组(List group)
概述
Bootstrap5 列表组是一个用于在页面上呈现带标题和文本的列表的 UI 组件。您可以将其用于显示任务列表、导航菜单、联系人列表等。
用法
<ul class="list-group">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>
Bootstrap5 列表组默认有一个没有边框和内边距的列表。您可以通过应用以下类来自定义其外观:
list-group
:将元素应用于列表组。list-group-item
:将元素应用于列表组中的每个项目。list-group-item-action
:自动为列表组项添加样式以使其看起来像可点击按钮。
文本和链接
您可以在 Bootstrap5 列表组的每个项目中添加文本和链接。
<ul class="list-group">
<li class="list-group-item">Item 1</li>
<li class="list-group-item"><a href="#">Item 2 link</a></li>
<li class="list-group-item">Item 3</li>
</ul>
活动状态
您可以通过 .active
类将项设置为活动状态,来强调当前所处页面或操作的选项。
<ul class="list-group">
<li class="list-group-item active">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>
禁用状态
您可以通过 .disabled
类将项设置为禁用状态,在这种情况下,将不允许交互。
<ul class="list-group">
<li class="list-group-item disabled">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>
带副标题的列表组
您可以在项目中使用 .list-group-item
类的 <h5>
元素来设置副标题,并使用 .list-group-item-text
类的 <p>
元素来设置更多补充说明。
<ul class="list-group">
<li class="list-group-item">
<h5>Item 1 title</h5>
<p class="list-group-item-text">Item 1 body text</p>
</li>
<li class="list-group-item">
<h5>Item 2 title</h5>
<p class="list-group-item-text">Item 2 body text</p>
</li>
<li class="list-group-item">
<h5>Item 3 title</h5>
<p class="list-group-item-text">Item 3 body text</p>
</li>
</ul>
自定义颜色
您可以使用以下类来自定义列表组和列表项的颜色:
.list-group-item-primary
.list-group-item-secondary
.list-group-item-success
.list-group-item-danger
.list-group-item-warning
.list-group-item-info
.list-group-item-light
.list-group-item-dark
<ul class="list-group">
<li class="list-group-item list-group-item-primary">Item 1</li>
<li class="list-group-item list-group-item-secondary">Item 2</li>
<li class="list-group-item list-group-item-success">Item 3</li>
<li class="list-group-item list-group-item-danger">Item 4</li>
<li class="list-group-item list-group-item-warning">Item 5</li>
<li class="list-group-item list-group-item-info">Item 6</li>
<li class="list-group-item list-group-item-light">Item 7</li>
<li class="list-group-item list-group-item-dark">Item 8</li>
</ul>
结论
Bootstrap5 列表组是一个非常有用的 UI 组件,它可以为您的 Web 应用程序快速构建列表界面,并根据需要进行灵活的自定义。通过简单的 HTML 代码,您可以轻松地创建列表项,添加文本和链接,并定制颜色和状态。