引导列表组listgroup

　　

列表组

列表组是引导框架新增的一个组件,可以用来制作列表清单,垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件。由于其在引导是一个独立的组件,所以也对应有自己独立源码:

<强>,少版本:对应的源码文件清单组。更少的

,,, <强> Sass版本:对应的源码文件是_list-group。scss

,,, <强>编译出的引导版本:对应的源码引导。css文件第4994行4820行~第

列表组——基础列表组

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

,, <强>清单组:列表组容器,常用的是ul元素,当然也可以是ol或者div元素

,, <强> list-group-item :列表项,常用的是李元素,当然也可以是div元素

来看一个简单的示例:

　　,,,& lt; li 类=發ist-group-item祝辞CSS3选择器& lt;/li> 　　,,,& lt; li 类=發ist-group-item祝辞CSS3边框& lt;/li> 　　,,,& lt; li 类=發ist-group-item祝辞CSS3背景& lt;/li> 　　,,,& lt; li 类=發ist-group-item祝辞CSS3文本& lt;/li> 　　& lt;/ul>

运行效果如下:

引导列表组listgroup

<强>原理分析:

对于基础列表组并没有做过多的样式设置,主要设置了其间距,边框和圆角等:

列表组——带徽章的列表组

带徽章的列表组其实就是将引导框架中的徽章组件和基础列表组结合在一起的一个效果,具体做法很简单,只需要在“list-group-item”中添加徽章组件“徽章”:

揭开CSS3的面 　　,,,& lt;/li> 　　,,,& lt; li 类=發ist-group-item”比,,,,,,,,,& lt; span 类=盎照隆痹?56 & lt;/span> CSS3选择器 　　,,,& lt;/li> 　　,,,& lt; li 类=發ist-group-item”比,,,,,,,,,& lt; span 类=盎照隆痹?92 & lt;/span> CSS3边框 　　,,,& lt;/li> 　　,,,& lt; li 类=發ist-group-item”比,,,,,,,,,& lt; span 类=盎照隆痹?0 & lt;/span> CSS3背景 　　,,,& lt;/li> 　　,,,& lt; li 类=發ist-group-item”比,,,,,,,,,& lt; span 类=盎照隆痹?290 & lt;/span> CSS3文本 　　,,,& lt;/li> 　　& lt;/ul>

<强>实现原理:

实现效果非常简单,就是给徽章设置了一个右浮动,当然如果有两个徽章同时在一个列表项中出现时,还设置了他们之间的距离:

列表组——带链接的列表组

带链接的列表组,其实就是每个列表项都具有链接效果。大家可能最初想到的就是在基础列表组的基础上,给列表项的文本添加链接:

　　,,,& lt;/li> 　　,,,… 　　& lt;/ul>

这样做有一个不足之处,就是链接的点击区域只在文本上有效:

但很多时候,都希望在列表项的任何区域都具备可点击。这个时候就需要在链接标签上增加额外的样式:“显示:块”;

虽然这样能解决问题,达到需求。但在引导框架中,还是采用了另一种实现方式。就是将ul.list-group使用div.list-group来替换,而li.list-group-item直接用。list-group-item来替换。这样就可以达到需要的效果:

引导列表组listgroup