前面的話
列表組是Bootstrap框架新增的一個組件,可以用來制作列表清單、垂直導航等效果,也可以配合其他的組件制作出更漂亮的組件。本文將詳細介紹Bootstrap列表組
基礎列表組
基礎列表組,看上去就是去掉了列表符號的列表項,并且配上一些特定的樣式。在Bootstrap框架中的基礎列表組主要包括兩個部分:
? list-group:列表組容器,常用的是ul元素,當然也可以是ol或者div元素
? list-group-item:列表項,常用的是li元素,當然也可以是div元素
對于基礎列表組并沒有做過多的樣式設置,主要設置了其間距,邊框和圓角等
.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; }
網友評論