基礎(chǔ)列表組，看上去就是去掉了列表符號(hào)的列表項(xiàng)，并且配上一些特定的樣式。在Bootstrap框架中的基礎(chǔ)列表組主要包括兩個(gè)部分：

  ?  list-group：列表組容器，常用的是ul元素，當(dāng)然也可以是ol或者div元素

  ?  list-group-item：列表項(xiàng)，常用的是li元素，當(dāng)然也可以是div元素

來(lái)看一個(gè)簡(jiǎn)單的示例：

<ul class="list-group">
    <li class="list-group-item">揭開(kāi)CSS3的面紗</li>
    <li class="list-group-item">CSS3選擇器</li>
    <li class="list-group-item">CSS3邊框</li>
    <li class="list-group-item">CSS3背景</li>
    <li class="list-group-item">CSS3文本</li>
</ul>

運(yùn)行效果如下：

原理分析：

對(duì)于基礎(chǔ)列表組并沒(méi)有做過(guò)多的樣式設(shè)置，主要設(shè)置了其間距，邊框和圓角等：

/*bootstrap.css文件第4820行～第4840行*/
.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}
.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd;
}
.list-group-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}