4.18.1　基础列表组

大部分的列表组都是由无标记的列表（ul/li）来实现，然后通过应用特定的样式实现效果。先看以下示例代码：

  1. <ul class="list-group">
  2.   <li class="list-group-item">JavaScript编程精解</li>
  3.   <li class="list-group-item">JavaScript设计模式</li>
  4.   <li class="list-group-item">JavaScript启示录</li>
  5.   <li class="list-group-item">当前你正在读的书</li>
  6.   <li class="list-group-item">正在构想的书</li>
  7. </ul>

上述示例代码的运行效果如图4-81所示。

4.18.1　基础列表组 - 图1 图4-81　列表组运行效果

根据上述的示例可以看出，列表组有2个基本的样式：list-group和list-group-item。这两个样式主要是设置了基本的显示和布局内容，比如间距、上下的圆角等。源码如下：

  1. // 源码4611行
  2. .list-group {
  3.   padding-left: 0;              /* 消除左边距*/
  4.   margin-bottom: 20px;          /* 底部间距保留20像素 */
  5. }
  6. .list-group-item {
  7.   position: relative;           /* 相对布局 */
  8.   display: block;                       /* 块状显示 */
  9.   padding: 10px 15px;
  10.   margin-bottom: -1px;
  11.   background-color: #fff;               /* 默认全部列表的背景颜色为白色 */
  12.   border: 1px solid #ddd;               /* 1像素边框 */
  13. }
  14. .list-group-item:first-child {  /* 设置最上边的一个li元素的左上角和右上角为圆角 */
  15.   border-top-left-radius: 4px;
  16.   border-top-right-radius: 4px; 
  17. }
  18. .list-group-item:last-child {
  19.   margin-bottom: 0;             /* 取消最下边的一个li元素底部外边距 */
  20.   border-bottom-right-radius: 4px;      /* 设置最下边的一个li元素左下角和右下角为圆角 */
  21.   border-bottom-left-radius: 4px;
  22. }