作者:
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