前面的話
列表組是Bootstrap框架新增的一個(gè)組件，可以用來(lái)制作列表清單、垂直導(dǎo)航等效果，也可以配合其他的組件制作出更漂亮的組件。本文將詳細(xì)介紹Bootstrap列表組
基礎(chǔ)列表組
基礎(chǔ)列表組，看上去就是去掉了列表符號(hào)的列表項(xiàng)，并且配上一些特定的樣式。在Bootstrap框架中的基礎(chǔ)列表組主要包括兩個(gè)部分：
? list-group：列表組容器，常用的是ul元素，當(dāng)然也可以是ol或者div元素
? list-group-item：列表項(xiàng)，常用的是li元素，當(dāng)然也可以是div元素
對(duì)于基礎(chǔ)列表組并沒(méi)有做過(guò)多的樣式設(shè)置，主要設(shè)置了其間距，邊框和圓角等
.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;
}
延伸閱讀
學(xué)習(xí)是年輕人改變自己的最好方式