本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: bootstrap教程(二) —— 列表组listgroup
列表组 列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单、垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件。由于其在Bootstrap是一个独立的组件,所以也对应有自己独立源码: LESS版本:对应的源码文件 list-group.less Sass版本:对应的源码文件是 _list-group.scss 编译出的Bootstrap版本:对应的源码bootstrap.css文件第4820行~第4994行 列表组--基础列表组 基础列表组,看上去就是去掉了列表符号的列表项,并且配上一些特定的样式。在Bootstrap框架中的基础列表组主要包括两个部分: list-group:列表组容器,常用的是ul元素,当然也可以是ol或者div元素 list-group-item:列表项,常用的是li元素,当然也可以是div元素 来看一个简单的示例: <ul class="list-group"> <li class="list-group-item">揭开CSS3的面纱</li> <li class="list-group-item">CSS3选择器</li> <li class="list-group-item">CSS3边框</li> <li class="list-group-item">CSS3背景</li> <li class="list-group-item">CSS3文本</li> </ul> 运行效果如下: list 原理分析: 对于基础列表组并没有做过多的样式设置,主要设置了其间距,边框和圆角等: /*bootstrap.css文件第4820行~第4840行*/ .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; } 列表组--带徽章的列表组 带徽章的列表组其实就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果。具体做法很简单,只需要在“list-group-item”中添加徽章组件“badge”: <ul class="list-group"> <li class="list-group-item"> <span class="badge">13</span>揭开CSS3的面 </li> <li class="list-group-item"> <span class="badge">456</span>CSS3选择器 </li> <li class="list-group-item"> <span class="badge">892</span>CSS3边框 </li> <li class="list-group-item"> <span class="badge">90</span>CSS3背景 </li> <li class="list-group-item"> <span class="badge">1290</span>CSS3文本 </li> </ul> 实现原理: 实现效果非常简单,就是给徽章设置了一个右浮动,当然如果有两个徽章同时在一个列表项中出现时,还设置了他们之间的距离: /*bootstrap.css文件第4841行~第4846行*/ .list-group-item > .badge { float: right; } .list-group-item > .badge + .badge { margin-right: 5px; } 列表组--带链接的列表组 带链接的列表组,其实就是每个列表项都具有链接效果。大家可能最初想到的就是在基础列表组的基础上,给列表项的文本添加链接: <ul class="list-group"> <li class="list-group-item"> <a href="##">揭开CSS3的面</a> </li> <li class="list-group-item"> <a href="##">CSS3选择器</a> </li> ... </ul> 这样做有一个不足之处,就是链接的点击区域只在文本上有效: 但很多时候,都希望在列表项的任何区域都具备可点击。这个时候就需要在链接标签上增加额外的样式:“display:block”; 虽然这样能解决问题,达到需求。但在Bootstrap框架中,还是采用了另一种实现方式。就是将ul.list-group使用div.list-group来替换,而li.list-group-item直接用a.list-group-item来替换。这样就可以达到需要的效果: <div class="list-group"> <a href="##" class="list-group-item">图解CSS3</a> <a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a> <a href="##" class="list-group-item">玩转Bootstrap</a> </div> 原理实现: 如果使用a.list-group-item时,在样式需要做一定的处理,比如说去文本下划线,增加悬浮效果等: /*bootstrap.css文件第4847行~第4858行*/ a.list-group-item { color: #555; } a.list-group-item .list-group-item-heading { color: #333; } a.list-group-item:hover, a.list-group-item:focus { color: #555; text-decoration: none; background-color: #f5f5f5; }