Bootstrap4 列表组
大部分基础列表组都是无序的。
要创建列表组，可以在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .list-group-item 类：
<
ul
class
="
list-group
">
<
li
class
="
list-group-item
">
First item
</
li
>
<
li
class
="
list-group-item
">
Second item
</
li
>
<
li
class
="
list-group-item
">
Third item
</
li
>
</
ul
>
效果：
激活状态的列表项
通过添加 .active 类来设置激活状态的列表项：
<
ul
class
="
list-group
">
<
li
class
="
list-group-item active
">
Active item
</
li
>
<
li
class
="
list-group-item
">
Second item
</
li
>
<
li
class
="
list-group-item
">
Third item
</
li
>
</
ul
>
效果：
禁用的列表项
.disabled 类用于设置禁用的列表项：
<
ul
class
="
list-group
">
<
li
class
="
list-group-item disabled
">
Disabled item
</
li
>
<
li
class
="
list-group-item
">
Second item
</
li
>
<
li
class
="
list-group-item
">
Third item
</
li
>
</
ul
>
效果：
链接列表项
要创建一个链接的列表项，可以将<ul> 替换 <div> ， <a> 替换 <li>。如果你想鼠标悬停显示灰色背景就添加.list-group-item-action 类：
<
div
class
="
list-group
">
<
a
href
="
#
"
class
="
list-group-item list-group-item-action
">
First item
</
a
>
<
a
href
="
#
"
class
="
list-group-item list-group-item-action
">
Second item
</
a
>
<
a
href
="
#
"
class
="
list-group-item list-group-item-action
">
Third item
</
a
>
</
div
>
效果：
多种颜色列表项
列表项目的颜色可以通过以下列来设置：.list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark 和 list-group-item-light：
<
ul
class
="
list-group
">
<
li
class
="
list-group-item list-group-item-success
">
成功列表项
</
li
>
<
li
class
="
list-group-item list-group-item-secondary
">
次要列表项
</
li
>
<
li
class
="
list-group-item list-group-item-info
">
信息列表项
</
li
>
<
li
class
="
list-group-item list-group-item-warning
">
警告列表项
</
li
>
<
li
class
="
list-group-item list-group-item-danger
">
危险列表项
</
li
>
<
li
class
="
list-group-item list-group-item-primary
">
主要列表项
</
li
>
<
li
class
="
list-group-item list-group-item-dark
">
深灰色列表项
</
li
>
<
li
class
="
list-group-item list-group-item-light
">
浅色列表项
</
li
>
</
ul
>
效果：
链接的多种颜色列表项
<
div
class
="
list-group
">
<
a
href
="
#
"
class
="
list-group-item list-group-item-action
">
激活列表项
</
a
>
<
a
href
="
#
"
class
="
list-group-item list-group-item-success
">
成功列表项
</
a
>
<
a
href
="
#
"
class
="
list-group-item list-group-item-secondary
">
次要列表项
</
a
>
<
a
href
="
#
"
class
="
list-group-item list-group-item-info
">
信息列表项
</
a
>
<
a
href
="
#
"
class
="
list-group-item list-group-item-warning
">
警告列表项
</
a
>
<
a
href
="
#
"
class
="
list-group-item list-group-item-danger
">
危险列表项
</
a
>
<
a
href
="
#
"
class
="
list-group-item list-group-item-primary
">
主要列表项
</
a
>
<
a
href
="
#
"
class
="
list-group-item list-group-item-dark
">
深灰色列表项
</
a
>
<
a
href
="
#
"
class
="
list-group-item list-group-item-light
">
浅色列表项
</
a
>
</
div
>