列表: ul/ol/dl - bootStrap4常用CSS笔记

【列表: ul/ol/dl】列表默认样式为垂直样式,一个项目占据一行。带灰色圆角边框。

.list-group 定义列表容器类
.list-group-item 定义列表项目类
.active [列表项目]激活状态下的列表项,蓝色背景,白色字
.disabled [列表项目]禁用状态下的列表项,白色背景,浅灰色字
.list-group-item-action [列表项目]鼠标移上去列表背景变成灰色
.list-group-item-{primary、secondary、success、danger、warning、info、dark、light} 定义列表项的背景色。注意使用bg-{...}不是理想的配色方案,不建议使用。

 

[ol/ul/dl列表示例]

1     <ul class="list-group">
2       <li class="list-group-item">默认选项样式</li>
3       <li class="list-group-item active">激活状态下样式</li>
4       <li class="list-group-item list-group-item-action">鼠标称外去显示灰色背景</li>
5       <li class="list-group-item disabled">禁用样式</li>
6     </ul>

 

也可以使用链接代替ul/ol/dl,示例:

1     <div class="list-group">
2       <a href="#" class="list-group-item">默认样式</a>
3       <a href="#" class="list-group-item active">激活状态下样式</a>
4       <a href="#" class="list-group-item list-group-item-action">鼠标称外去显示灰色背景</a>
5       <a href="#" class="list-group-item disabled">禁用样式</a>
6     </div>

 

posted @ 2019-05-13 15:40 网申 阅读(...) 评论(...) 编辑 收藏