List group，列表群组 ..

一个列表群组可以用一个 ul ，无序列表元素，在列表群组的包装上添加一个 list-group ..

每个列表项目用一个 li 元素，上面加上 list-group-item .. HTML .. 复制一份 .. CSS ... 再复制一份 .. JavaScript ..

在当前列表项目上，可以添加一个 active 这个类 .. 它会在项目上应用不同的样式 .. 在禁用的项目上面可以添加一个 disabled ..

这样项目的文字会浅一点 ..

Action

列表群组里面也可以是一组链接或者按钮 .. 这里我们可以把 li 标签换成 a 标签 ..

再给它添加一个 href 属性 ..

项目里面还得再用一个额外的类 .. list-group-item-action ..

再把列表群组的包装元素换成一个普通的 div ..

现在，鼠标悬停在项目上面的时候，会有一个 hover 状态 ..

样式

列表项目也可以有不同的样式 .. 使用 Bootstrap 里面表示情景的名字 .. 比如把这个 CSS 项目上的 list-group-item-action 换成 list-group-item-warning ..

现在这个项目就是一个 warning 样式 ..

Badge

在项目里我们可以再添加一个小标签 ...

在项目文字这里，一个 span 加上 badge.badge-primary.badge-pill .. 里面添加一个数字 ..

然后我们再用 Bootstrap 提供的布局工具类，去修改一下这个小标签显示的位置 ..

在项目上面用一个 d-flex，把 display 设置成 flex，让它变成一个 flexbox 的容器 .. 然后用 justify-content-between .. 让元素的 justify-content 属性设置成 space between ..

再添加一个 align-items-center .. 让项目垂直居中 ...