列表: 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>
© 版权声明
THE END
喜欢就支持一下吧
点赞11 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容