4.18.2　应用徽章标记或导航箭头

在列表组的li元素上，我们也可以应用一些徽章图标。具体的做法是在li元素内部放置标记小图标的span元素（或其他内敛元素label、i）即可。示例代码如下：

  1. <!-- 徽章标记 -->
  2. <ul class="list-group">
  3.   <li class="list-group-item">
  4.     <span class="badge">14</span>
  5.     Cras justo odio
  6.   </li>
  7. </ul>

上述示例的运行效果如图4-82所示。

4.18.2　应用徽章标记或导航箭头 - 图1 图4-82　列表组上应用徽章

图4-82所示是列表组上应用徽章的运行效果，主要是要对小图标设置浮动方向及右间距。源码如下：

  1. // 源码4632行
  2. .list-group-item > .badge {
  3.   float: right;         /* 设置小图标 右浮动 */
  4. }
  5. .list-group-item > .badge + .badge {
  6.   margin-right: 5px;    /* 如果两个图标放在一起显示，则保留5像素的右间距 */
  7. }

在2.x版本里还提供了导航箭头图标，效果如图4-83所示。但这个图标在新版里被去除了，如果还想保留这个功能，可以将旧版的代码移植过来，再做少许修改即可。

4.18.2　应用徽章标记或导航箭头 - 图2 图4-83　列表组上应用导航箭头

示例代码如下：

  1. <!-- 徽章标记 -->
  2. <!-- 导航标记 -->
  3. <ul class="list-group">
  4.     <li class="list-group-item">
  5.         <span class="glyphicon glyphicon-chevron-right"></span>
  6.         Cras justo odio
  7.     </li>
  8. </ul>

相应的导航箭头图标实现源码如下：

  1. .list-group-item > .glyphicon-chevron-right {
  2.     float: right;               /* 设置小图标 右浮动 */
  3.     margin-right: 5px;  /* 小图标在span、label、i元素上设置-15像素的右间距 */
  4. }
  5. .list-group-item > .glyphicon + .badge {
  6.     margin-right: 5px;  /* 如果两个图标放在一起显示，则保留5像素的右间距 */
  7. }

根据上述源码，可以看出，一个列表项里，两个或者多个图片是可以放在一起的，但是要注意两者之间的间距。读者可以自行运行查看相应的效果。