添加 .active 到 .list-group-item 下的其中一行或多行，以指示当前有效的选择状态。
添加 .disabled 到 .list-group-item 下的其中一行或多行，以显示出 禁用 状态。注意：一些带有 .disabled的元素还需要自定义JavaScript脚本才能完全禁用其点击事件（如链接）。
使用 <a>或 <button>来创建具有 hover、禁用、悬停和活动状态的列表组.list-group-item-action，我们分离这些Class样式，以确保由非交互元素组成的列表群组(如 <li>或 <div>)不提供可点击或触击（即可以用一个父<div>代替<ul>-译者注）。
请务必 不要在这里使用 .btn 标准样式。
使用<button>元素，你还可以使用disabled 属性来达到禁用状态指示（或引用 .disabled 样式），不过这一属性不支持HTML5中的 <a>标签。
加入.list-group-flush选择器，可以实现移除部分边框以及圆角，从而产生边缘贴齐的列表组，这在诸如Card卡片等容器中很实用（达成更好的呈现效果）。
添加.list-group-horizontal以在所有断点上将列表组项的布局从垂直更改为水平. 或者，选择一个响应变量.list-group-horizontal-{sm|md|lg|xl}使列表组从该断点的min-width开始水平. 当前水平列表组不能与刷新列表组组合.
提示:水平时想要等宽列表组项吗？ 将.flex-fill 添加到每个列表组项目.
.flex-fill
.list-group-horizontal-xl
使用情景式class样式来设计具有状态背景和颜色的列表组，呈现默认或链接状态。
情景式class也可以使用 .list-group-item-action样式
在通用样式定义的帮助下，可向任何列表项目添加.badge标签以显示未读计数、活动状态等。
用到了d-flex justify-content-between
在flexbox 通用样式定义的支持下，列表组中几乎可以添加任意的HTML内容，包括标签、内容、链接。
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.使用列表组的JavaScript 插件,单独或编译bootstrap.js文件来扩展我们的列表组，以提供可选择的内容列表，如下例：
其他的JavaScript介绍https://code.z01.com/v4/components/list-group.html#javascript-behavior