Bootstrap列表组的示例分析-创新互联

这篇文章主要介绍Bootstrap列表组的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

基础列表组

基础列表组，看上去就是去掉了列表符号的列表项，并且配上一些特定的样式。在Bootstrap框架中的基础列表组主要包括两个部分：
* list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素
* list-group-item：列表项，常用的是li元素，当然也可以是div元素
来看一个简单的示例：

 揭开CSS3的面纱
 CSS3选择器
 CSS3边框
 CSS3背景
 CSS3文本

带徽章的列表组

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

 
 13揭开CSS3的面
 
 
 456CSS3选择器
 
 
 892CSS3边框
 
 
 90CSS3背景
 
 
 1290CSS3文本
 

带链接的列表组

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

  
    揭开CSS3的面
  
  
    CSS3选择器
  
  ...

这样做有一个不足之处，就是链接的点击区域只在文本上有效, 但很多时候，都希望在列表项的任何区域都具备可点击。这个时候就需要在链接标签上增加额外的样式：“display:block”；虽然这样能解决问题，达到需求。但在Bootstrap框架中，还是采用了另一种实现方式。就是将ul.list-group使用div.list-group来替换，而li.list-group-item直接用a.list-group-item来替换。这样就可以达到需要的效果：

  图解CSS3
  220Sass教程
  玩转Bootstrap