Bootstrap 组件：列表组组件（list-group）

作者:WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 👉 WangMin

列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容。列表组可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件。

列表组看上去就是去掉了列表符号的列表项，并且配上一些特定的样式，在bootstrap框架中的基础列表组主要包括两个部分：

类	状态
list-group	列表组容器，常用的是ul元素，也可以是ol或div元素
list-group-item	列表项，常用的是li元素，也可以是div元素

默认样式

对于基础列表组并没有做过多的样式设置，主要设置了其间距、边框和圆角。用法如下：

<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>
	<li class="list-group-item">item 4</li>
	<li class="list-group-item">item 5</li>
</ul>

---

带徽章的列表组

带徽章的列表组其实就是将bootstrap框架中的徽章组件和基础列表组件结合在一起的一个效果，只需在.list-group-item的基础上追加徽章组件“badge”，它会自动被放在右边。用法如下：

<ul class="list-group">
	<li class="list-group-item">item 1<span class="badge">2</span></li>
	<li class="list-group-item">item 2<span class="badge">4</span></li>
	<li class="list-group-item">item 3<span class="badge">6</span></li>
	<li class=