基础和链接列表组的介绍

列表组是Bootstrap框架新增的一个组件，可以用来制作列表清单、垂直导航等效果，也可以配合其他组件制作出更漂亮的组件，比如和徽章一起使用，这个效果在手机应用能经常看到。列表组的使用非常简单，最常用的就是使用

、
• 标签来实现。在
  上添加一个class='list-group'，在
  • 上使用class='list-group-item'即可，代码如下：

上述代码中定义了一个简单的列表组，基础列表组没有太多花哨的东西，页面效果如图所示。

带徽章的列表组在前面简单的使用过，这是一个将徽章和列表组组合使用的效果，在手机应用中特别常见，我们只需在列表组件class='list-group-item'中加入徽章组件即可。

上述代码中每个列表组项都定义了一个徽章，徽章默认是右对齐的。如果想在同一个列表组项中添加多个徽章，则Bootstrap会做相应的处理而不会重叠，代码运行效果如图所示。

上面的的列表组中都是文字类型的，如果我们需要在列表组项中添加链接，就需要使用到链接列表组。链接列表组非常简单，只需在class='list-group-item'中添加链接元素即可，代码如下：

上述代码中给每个item项内容都新增了一个链接，在页面上可以显示链接的效果。单击文字可以链接到其他页面，页面运行效果如图所示。