又一个CSS框架

  • 简洁迷你,大小仅27KB;
  • 语义化,使用HTML5及CSS3技术,符合Web标准;
  • 完全基于HTML+CSS,无任何JavaScript代码
  • 使用Less预处理器,可定义主题颜色;
  • 内置丰富组件,可满足大部分开发需求;
  • 使用Iconfont,符合兼容性及减少http请求;

第一步:下载mui.css文件

第二步:将mui.css文件复制到你的文件夹,然后在页面中head标签内添加。

下载并修改源码

下载mui.less.zip

文件结构:

                ├─styles.less       总入口
│
├─minireset.less    重置类
├─normalized.less   初始化默认值
├─color.less        颜色
├─dimension.less    尺寸
├─typography.less   排版
├─form.less         表单(含单选框、复选框、下拉框)
├─switcher.less     iOS风格开关
├─counter.less      计数器
├─alert.less        弹出框
├─arrow.less        箭头
├─button.less       按钮
├─dialog.less       弹出窗口
├─dropdown.less     下拉菜单
├─helper.less       公共类
├─iconfont.less     图标
├─layout.less       栅格式布局
├─progressbar.less  进度条
├─searchbox.less    搜索框
├─sidetab.less      竖直选项卡
├─spinner.less      加载器
├─tab.less          选项卡
├─table.less        表格类
├─toast.less        Toast消息
├─tooltip.less      鼠标悬停 
├─filter.less       过滤器    
                
            

使用less自定义变量,将所有变量更改为自定义值。下载源码所有.less文件

颜色 变量 默认值

使用方式

变量形式请使用less方式引用

                
#id{color: $gray20;}
                
            
常用颜色

信息类

警告类

错误内容

                

信息类

警告类

错误内容

                
hr {
    border: none;
    border-bottom: 1px solid @gray20;
}
.clear{
    clear: both;
}
.text-center{
    text-align: center;
}
.float-left{
    float: left;
}
.float-right{
    float: right;
}
.relative{
    position: relative;
}
.absolute{
    position: absolute;
}
.fixed{
    position: fixed;
}
.flex{
    display: flex;
}
.block{
    display: block;
}
.inline{
    display: inline;
}
.inline-block{
    display: inline-block;
}
.none{
    display: none;
}
.hidden{
    visibility: hidden;
}
.visible{
    visibility: visible;
}                    
                
            
小图标

                



                
            
中图标

                



                
            
大图标

                



                
            
带颜色图标

                



                
            
带动画图标

                



                
            

完整版图标请点击查看

添加布局方式

  • 添加.columns选择器
  • 添加多个.column子选择器
column 1
column 2
column 3
column 4
                
column 1
column 2
column 3
column 4

当前宽度等分为12份,分别使用.is-1,.is-2,.is-3,...,.is-12来代表

is-6
is-6
                
is-6
is-6
is-2
is-10
                
is-2
is-10
is-11
is-1
                
is-11
is-1
is-6
is-3
is-3
                
is-6
is-6

使用input标签或者.input选择符

                
                                      
                
            
                

                
            
使用select标签

                

                
            
使用<div class="select">

                





                
            

                








                
            

                



                
            

                




                
            

Counter

Counter

                

Counter

Counter
                
            

普通tooltip
普通信息类:
详细内容
警告信息类:
详细内容
错误信息类:
详细内容

                
普通tooltip
普通信息类:
详细内容
警告信息类:
详细内容
错误信息类:
详细内容
不带图标菜单
                

                
            
带图标菜单
                

                
            
普通对话框
dialog title
content
                
dialog title
content
dialog title
*
                
dialog title
*
信息提示框
info alert title
Short message in here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum assumenda debitis doloremque animi perferendis iure, quis reiciendis maiores vero fuga dolor ipsam

                
info alert title
Short message in here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum assumenda debitis doloremque animi perferendis iure, quis reiciendis maiores vero fuga dolor ipsam

警告提示框
warning alert title
Short message in here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum assumenda debitis doloremque animi perferendis iure, quis reiciendis maiores vero fuga dolor ipsam

                
warning alert title
Short message in here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum assumenda debitis doloremque animi perferendis iure, quis reiciendis maiores vero fuga dolor ipsam

错误提示框
Error alert title
Short message in here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum assumenda debitis doloremque animi perferendis iure, quis reiciendis maiores vero fuga dolor ipsam

                
Error alert title
Short message in here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum assumenda debitis doloremque animi perferendis iure, quis reiciendis maiores vero fuga dolor ipsam

成功提示
Successful Action Completed Alert
                
Successful Action Completed Alert
错误提示
Failure or Warning Alert
                
Failure or Warning Alert
警告提示
Attention Alert
                
Attention Alert
信息提示
General Infomation Alert
                
General Infomation Alert
简单tab(仅tab选项卡)
                
含联动container
Content 1
Content 2
Content 3
                
Content 1
Content 2
Content 3
Dialog title
  • General
  • User Info
  • Settings
content
                
Dialog title
  • General
  • User Info
  • Settings
content
姓名 年龄 性别 资料
Michael 22 软件工程师
Michael 22 软件工程师
Michael 22 软件工程师
Michael 22 软件工程师
Michael 22 软件工程师
Michael 22 软件工程师
                
姓名 年龄 性别 资料
Michael 22 软件工程师
                
creating job
                
creating job
// 此处为animate为演示动画效果
                

                
            
普通箭头
                




                
            
空心箭头
                




                
            

过滤器filter

Filter 1:
Filter 2:
Filter 3:
                
Filter 1:
Filter 2:
Filter 3:

关于

  • V1.0.0发布

作者

作者:米高