纯css面板插件,自适应,多样式

最近在做公司的系统后台,用的bootstrap,在设计布局的时候不喜欢他的面板,所以自己写了这个面板插件,分享给大家

先上预览图:

默认样式:

QQ截图20180917105235.jpg

绿色:

绿.jpg

黄色:

黄 .jpg

蓝:

蓝.jpg

红:

红.jpg

使用方法:

引用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

 源码下载:点击

欢迎转载,请注明出处!http://blog.pishiduo.com/content/35

猜你喜欢

转载自www.cnblogs.com/sanjuantianshu/p/9661050.html