4.18.4　多彩列表项

自V3.1.0开始，列表组中的每项也可以自定义背景颜色了。该组件提供了类似list-group-item-succes的样式用于指定背景颜色，同时也支持高亮样式active。示例用法如下：

  1. <ul class="list-group">
  2.     <li class="list-group-item list-group-item-success active">JavaScript编程精解</li>
  3.    …
  4. </ul>
  5. <div class="list-group">
  6.     <a href="#" class="list-group-item list-group-item-success active">JavaScript
  7.        编程精解</a>
  8.     …
  9. </div>

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

4.18.4　多彩列表项 - 图1 图4-85　列表项的彩色效果

列表项彩色效果的实现原理相对比较简单，分为两种情况：一种是使用ul和li元素的列表组，只需要设置文字颜色和背景色即可；另外一种是a链接作为列表项时的设置，这种设置有点特殊，就是需要处理链接在hover和focus焦点时的样式。详细源码如下：

  1. // 源码 4667 行
  2. .list-group-item-success {
  3.   color: #3c763d;                       /* 文字颜色 */
  4.   background-color: #dff0d8;    /* 背景颜色 */
  5. }
  6. a.list-group-item-success {
  7.   color: #3c763d;                       /* a元素作为列表项时的文字颜色 */
  8. }
  9. a.list-group-item-success .list-group-item-heading {
  10.   color: inherit;                       /* a元素作为列表项时，heading的文字颜色集成上述颜色 */
  11. }
  12. a.list-group-item-success:hover,
  13. a.list-group-item-success:focus {       /* a元素作为列表项时，鼠标移动和焦点时的文字和背景色设置 */
  14.   color: #3c763d;
  15.   background-color: #d0e9c6;
  16. }
  17. a.list-group-item-success.active,
  18. a.list-group-item-success.active:hover,
  19. a.list-group-item-success.active:focus {
  20.                                         /* a元素作为列表项，同时又是高亮元素时的相关颜色设置 */
  21.   color: #fff;
  22.   background-color: #3c763d;
  23.   border-color: #3c763d;
  24. }

从最后一段源码可以看出，a元素作为列表项时，如果是高亮状态（应用了active样式），则会重新再设置一种比较深的同色系颜色，其运行效果如图4-86所示。

4.18.4　多彩列表项 - 图2 图4-86　列表项为a元素时的效果（第一项是高亮状态）