前面的话
列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单、垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件。本文将详细介绍Bootstrap列表组
基础列表组
基础列表组,看上去就是去掉了列表符号的列表项,并且配上一些特定的样式。在Bootstrap框架中的基础列表组主要包括两个部分:
? list-group:列表组容器,常用的是ul元素,当然也可以是ol或者div元素
? list-group-item:列表项,常用的是li元素,当然也可以是div元素
对于基础列表组并没有做过多的样式设置,主要设置了其间距,边框和圆角等
.list-group {
padding-left: 0;
margin-bottom: 20px;
}.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
}.list-group-item:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
延伸阅读
学习是年轻人改变自己的最好方式
