纯css面板插件,自适应,多样式
程序员文章站
2022-05-16 14:24:14
最近在做公司的系统后台,用的bootstrap,在设计布局的时候不喜欢他的面板,所以自己写了这个面板插件,分享给大家 先上预览图: 默认样式: 绿色: 黄色: 蓝: 红: 使用方法: 引用MoUi.css HTML中使用为: 圆角样式 mo-group-radius 面板颜色样式为: 默认:mo-g ......
最近在做公司的系统后台,用的bootstrap,在设计布局的时候不喜欢他的面板,所以自己写了这个面板插件,分享给大家
先上预览图:
默认样式:
绿色:
黄色:
蓝:
红:
使用方法:
引用moui.css
html中使用为:
<div class="mo-group mo-group-default mo-group-radius"> <div class="mo-group-title mo-group-title-left mo-group-title-sm"> <span class="fa fa-map-marker"></span> 标题 </div> <div class="mo-group-body"> ... </div> </div>
圆角样式
mo-group-radius
面板颜色样式为:
默认:mo-group-default
绿色:mo-group-success
蓝色:mo-group-primary
黄色:mo-group-warning
红色:mo-group-danger
标题浮动:
左浮动:mo-group-title-left
其他后续补充。。。
标题宽度:
考虑到标题的实际长度问题,设置百分比宽度在不同的分辨率中会导致太宽或者太窄的问题,很不好看,所以我给标题设定了几个固定宽度,基本能适用于所有场景了。
mo-group-title-xs 宽度100px
mo-group-title-sm 宽度200px
mo-group-title-md 宽度300px
mo-group-title-lg 宽度500px
源码下载:
欢迎转载,请注明出处!
上一篇: 神阙-胸部穴位
下一篇: 7道题看出身体可用期多久
推荐阅读