欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-16 14:24:14
最近在做公司的系统后台,用的bootstrap,在设计布局的时候不喜欢他的面板,所以自己写了这个面板插件,分享给大家 先上预览图: 默认样式: 绿色: 黄色: 蓝: 红: 使用方法: 引用MoUi.css HTML中使用为: 圆角样式 mo-group-radius 面板颜色样式为: 默认:mo-g ......

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

先上预览图:

默认样式:

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

绿色:

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

黄色:

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

蓝:

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

红:

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

使用方法:

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

 源码下载:

欢迎转载,请注明出处!