列表: ul/ol/dl – bootStrap4常用CSS笔记-BP大马随笔

【列表: 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>

文章版权归作者所有，未经允许请勿转载。

THE END

Html Css 静态页面
# bootstrap