欢迎访问LiMi前端UI框架！
网站首页 加入收藏夹 [ 登录 ]
当前位置：
按钮主题
default primary warning success danger gray disabled
按钮尺寸


带图标的按钮

更多图标请参考图标文档

带图标的圆角按钮
表单(默认)
单行输入框
下拉选择框
*此处可以填输入提示之类
*输入邮箱格式
文本输入框
表单(进阶)
用户名
手机号
密　码
确认密码
性别
开启对话
文本描述
按钮组
按钮容器
默认样式
单按钮下拉菜单
分裂式按钮下拉菜单
单行输入框


mini

small

medium

large

xlarge

xxlarge
多行输入框


mini

small

medium

large

xlarge

xxlarge
输入框组合
手机号码
多个输入框一起
选择框示例

























单选框进阶
  •   


开关示例
复选框进阶




默认表格
姓名性别民族出生日期说点神马
张三男汉族1980-12-12绳锯木断，水滴石穿。
李四女汉族1989-10-14古之立大事者，不惟有超世之才，亦必有坚韧不拔之志。——苏轼
王五男族1980-12-12付出，不一定会有收获；不付出，却一定不会有收获，不要奢望出现奇迹。
刘六男汉族1980-12-12拥有梦想只是一种智力，实现梦想才是一种能力。
赵琦女汉族1980-12-12就算全世界都否定我，还有我自己相信我。
李世山男汉族1980-12-12人生难得几回搏，此时不搏何时搏。
无边框表格
姓名性别民族出生日期说点神马
张三男汉族1980-12-12绳锯木断，水滴石穿。
李四女汉族1989-10-14古之立大事者，不惟有超世之才，亦必有坚韧不拔之志。——苏轼
王五男族1980-12-12付出，不一定会有收获；不付出，却一定不会有收获，不要奢望出现奇迹。
刘六男汉族1980-12-12拥有梦想只是一种智力，实现梦想才是一种能力。
赵琦女汉族1980-12-12就算全世界都否定我，还有我自己相信我。
李世山男汉族1980-12-12人生难得几回搏，此时不搏何时搏。
行边框表格
姓名性别民族出生日期说点神马
张三男汉族1980-12-12绳锯木断，水滴石穿。
李四女汉族1989-10-14古之立大事者，不惟有超世之才，亦必有坚韧不拔之志。——苏轼
王五男族1980-12-12付出，不一定会有收获；不付出，却一定不会有收获，不要奢望出现奇迹。
刘六男汉族1980-12-12拥有梦想只是一种智力，实现梦想才是一种能力。
赵琦女汉族1980-12-12就算全世界都否定我，还有我自己相信我。
李世山男汉族1980-12-12人生难得几回搏，此时不搏何时搏。
列边框表格
姓名性别民族出生日期说点神马
张三男汉族1980-12-12绳锯木断，水滴石穿。
李四女汉族1989-10-14古之立大事者，不惟有超世之才，亦必有坚韧不拔之志。——苏轼
王五男族1980-12-12付出，不一定会有收获；不付出，却一定不会有收获，不要奢望出现奇迹。
刘六男汉族1980-12-12拥有梦想只是一种智力，实现梦想才是一种能力。
赵琦女汉族1980-12-12就算全世界都否定我，还有我自己相信我。
李世山男汉族1980-12-12人生难得几回搏，此时不搏何时搏。
常规面板
  • 面板标题
    面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容
  • 面板标题
    面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容
  • 面板标题
    面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容
  • 面板标题
    面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容
  • 面板标题
    面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容
  • 面板标题
    面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容
折叠面板
李兰娟首次披露武汉封城细节
李兰娟：1月18日出发去武汉时，我曾跟浙江省卫生健康委张平主任通过电话，请他“守牢”浙江，防止出现第二代病人。
1月22日晚上深夜，张平主任给我打电话说，近期有大量的人从武汉返回浙江，不仅引起了第二代感染，还引发了聚集性疫情，接下来可能会有更多的人回来，会造成更大的疫情扩散。
我感到疫情形势非常严峻，如果连浙江都守不住的话，那么全国其他城市的防控工作将更加艰难。结束电话后，我立即向上汇报：基于疫情状况，武汉必须马上封城，否则后果不堪设想。而且，封城的时间绝不要拖到1月24日大年三十，否则疫情会更大规模向全国播散。
呼吸机不够谁生、谁死？纽约指导意见：抽签
尽管特朗普夸口说“会生产很多呼吸机，照顾自己，帮助他人”，但事实上，国内确诊病例急速增长的美国，呼吸机也已告急。
特朗普这些天被各州追着要呼吸机，但在他或是甩锅，或是回避，或是夸夸其谈的回应外，美国媒体已经发出灵魂拷问：如果呼吸机供不应求，谁生？谁死？
2020香格里拉对话会取消
香格里拉对话会正式名称为亚洲安全峰会，是由IISS发起、在新加坡政府支持下于2002年开始举办的以区域安全为主题的多边论坛，因其每年在新加坡的香格里拉酒店举行而得名。
每年的香会一般在5月底、6月初举行，云集美国、中国、澳大利亚等亚太国家的防务官员和高级军事将领。
意大利议员汇报疫情时哭了：虽不知该把死者送去哪，但我们永不放弃
他在议会上发言谈及此次新冠疫情，声音全程哽咽颤抖：我们已经不知道要把去世的人送到哪里去，也不知道把生病的人收治到哪里去。
然而这名议员并没有就此绝望，之后他真诚地感谢了每一位为疫情付出的人。
手风琴折叠面板
李兰娟首次披露武汉封城细节
李兰娟：1月18日出发去武汉时，我曾跟浙江省卫生健康委张平主任通过电话，请他“守牢”浙江，防止出现第二代病人。
1月22日晚上深夜，张平主任给我打电话说，近期有大量的人从武汉返回浙江，不仅引起了第二代感染，还引发了聚集性疫情，接下来可能会有更多的人回来，会造成更大的疫情扩散。
我感到疫情形势非常严峻，如果连浙江都守不住的话，那么全国其他城市的防控工作将更加艰难。结束电话后，我立即向上汇报：基于疫情状况，武汉必须马上封城，否则后果不堪设想。而且，封城的时间绝不要拖到1月24日大年三十，否则疫情会更大规模向全国播散。
呼吸机不够谁生、谁死？纽约指导意见：抽签
尽管特朗普夸口说“会生产很多呼吸机，照顾自己，帮助他人”，但事实上，国内确诊病例急速增长的美国，呼吸机也已告急。
特朗普这些天被各州追着要呼吸机，但在他或是甩锅，或是回避，或是夸夸其谈的回应外，美国媒体已经发出灵魂拷问：如果呼吸机供不应求，谁生？谁死？
2020香格里拉对话会取消
香格里拉对话会正式名称为亚洲安全峰会，是由IISS发起、在新加坡政府支持下于2002年开始举办的以区域安全为主题的多边论坛，因其每年在新加坡的香格里拉酒店举行而得名。
每年的香会一般在5月底、6月初举行，云集美国、中国、澳大利亚等亚太国家的防务官员和高级军事将领。
意大利议员汇报疫情时哭了：虽不知该把死者送去哪，但我们永不放弃
他在议会上发言谈及此次新冠疫情，声音全程哽咽颤抖：我们已经不知道要把去世的人送到哪里去，也不知道把生病的人收治到哪里去。
然而这名议员并没有就此绝望，之后他真诚地感谢了每一位为疫情付出的人。

李兰娟首次披露武汉封城细节
李兰娟：1月18日出发去武汉时，我曾跟浙江省卫生健康委张平主任通过电话，请他“守牢”浙江，防止出现第二代病人。
1月22日晚上深夜，张平主任给我打电话说，近期有大量的人从武汉返回浙江，不仅引起了第二代感染，还引发了聚集性疫情，接下来可能会有更多的人回来，会造成更大的疫情扩散。
我感到疫情形势非常严峻，如果连浙江都守不住的话，那么全国其他城市的防控工作将更加艰难。结束电话后，我立即向上汇报：基于疫情状况，武汉必须马上封城，否则后果不堪设想。而且，封城的时间绝不要拖到1月24日大年三十，否则疫情会更大规模向全国播散。
呼吸机不够谁生、谁死？纽约指导意见：抽签
尽管特朗普夸口说“会生产很多呼吸机，照顾自己，帮助他人”，但事实上，国内确诊病例急速增长的美国，呼吸机也已告急。
特朗普这些天被各州追着要呼吸机，但在他或是甩锅，或是回避，或是夸夸其谈的回应外，美国媒体已经发出灵魂拷问：如果呼吸机供不应求，谁生？谁死？
2020香格里拉对话会取消
香格里拉对话会正式名称为亚洲安全峰会，是由IISS发起、在新加坡政府支持下于2002年开始举办的以区域安全为主题的多边论坛，因其每年在新加坡的香格里拉酒店举行而得名。
每年的香会一般在5月底、6月初举行，云集美国、中国、澳大利亚等亚太国家的防务官员和高级军事将领。
意大利议员汇报疫情时哭了：虽不知该把死者送去哪，但我们永不放弃
他在议会上发言谈及此次新冠疫情，声音全程哽咽颤抖：我们已经不知道要把去世的人送到哪里去，也不知道把生病的人收治到哪里去。
然而这名议员并没有就此绝望，之后他真诚地感谢了每一位为疫情付出的人。
默认选项卡
  • 选项一
  • 选项二
  • 选项三
内容1
内容2
内容3
无边框选项卡
  • 基本信息
  • 扩展信息
  • SEO选项
内容1
内容2
内容3
简洁选项卡tab
  • 选项一
  • 选项二
  • 选项三
内容1
内容2
内容3
卡片式选项卡
  • 选项一
  • 选项二
  • 选项三
内容1
内容2
内容3
徽章小图标
小圆点：
弧形徽章：
11 20 250 365 23
带边框徽章：
3 6 9 12 15
标签示例
与按钮的搭配
消息 23 通知 通知 99
常规分页
《上一页 1 2 3 4 5 6 7 8 9 10 下一页》
扩展分页
小号分页
带标题的集合框
这是一个标题 这里可以填写任意的内容,支持html
带标题的横线
提示分割线
温馨提示
实线分割线
蓝色
橙色
绿色
红色
灰色
点线分割线
蓝色
橙色
绿色
红色
灰色
虚线分割线
蓝色
橙色
绿色
红色
灰色
动画演示(点击)
  • 左滚入

    lm-anim-rollIn

  • 从上掉下

    lm-anim-bounceInDown

  • 从下往上飞入

    lm-anim-bounceInUp

  • 光速进入

    lm-anim-lightSpeedIn

  • 光速退出

    lm-anim-lightSpeedOut

  • 微微放大

    lm-anim-pulse

  • 从右弹入

    lm-anim-bounceInRight

  • 从左弹入

    lm-anim-bounceInLeft

  • X轴翻转

    lm-anim-flipInX

  • X轴翻转消失

    lm-anim-flipOutX

  • Y轴翻转

    lm-anim-flipInY

  • Y轴翻转消失

    lm-anim-flipOutY

  • 弹跳

    lm-anim-bounce

  • 强烈抖动

    lm-anim-shake

  • 微微抖动

    lm-anim-headShake

  • 往下渐现

    lm-anim-fadeInDown

  • 往上渐现

    lm-anim-fadeInUp

  • 从左滑入

    lm-anim-slideInLeft

  • 从右滑入

    lm-anim-slideInRight

  • 旋转动画

    lm-anim-rotate

默认样式进度条
20%
40%
60%
80%
100%

正常时候这几个样式就是足够的!

大尺寸样式进度条
20%
40%
60%
80%
100%

大部分时候我们可能只需要使用到百分比就可以了!

模拟动态进度
0
树形菜单
  • 一级菜单
    • 二级菜单
      • 三级菜单
        • 四级菜单
        • 四级菜单
        • 四级菜单
      • 三级菜单
        • 四级菜单
        • 四级菜单
        • 四级菜单
      • 三级菜单
        • 四级菜单
        • 四级菜单
        • 四级菜单
    • 二级菜单
      • 三级菜单
        • 四级菜单
        • 四级菜单
        • 四级菜单
      • 三级菜单
        • 四级菜单
        • 四级菜单
        • 四级菜单
      • 三级菜单
        • 四级菜单
        • 四级菜单
        • 四级菜单
    • 二级菜单
      • 三级菜单
        • 四级菜单
        • 四级菜单
        • 四级菜单
      • 三级菜单
        • 四级菜单
        • 四级菜单
        • 四级菜单
      • 三级菜单
        • 四级菜单
        • 四级菜单
        • 四级菜单
单列栅格布局
lm-col-1
lm-col-1
lm-col-1
lm-col-1
lm-col-1
lm-col-1
lm-col-1
lm-col-1
lm-col-1
lm-col-1
lm-col-1
lm-col-1
lm-col-6
lm-col-6
lm-col-3
lm-col-9
lm-col-12
混合自适应布局
lm-col-2
lm-col-md-4
lm-col-sm-6
lm-col-xs-12
lm-col-2
lm-col-md-4
lm-col-sm-6
lm-col-xs-12
lm-col-2
lm-col-md-4
lm-col-sm-6
lm-col-xs-12
lm-col-2
lm-col-md-4
lm-col-sm-6
lm-col-xs-12
lm-col-2
lm-col-md-4
lm-col-sm-6
lm-col-xs-12
lm-col-2
lm-col-md-4
lm-col-sm-6
lm-col-xs-12
col-6
col-sm-12
col-6
col-sm-12
当然也是支持互相嵌套的
这里就不再过多介绍，具体请参考文档！
静态代码美化

代码code

  1. /* 这里可以填写任意代码 */
  2. /* 例如格式化以下这段代码 */
  3. if('this_is'==/an_example/){do_something();}else{var a=b?(c%d):e[f];}
  4. var that = this, result = null, filter = events.match(/\(.*\)$/)||[];
  5. var set = (events = modName + '.'+ events).replace(filter, '');
  6. };
动态代码美化

默认滑动条
滑动条进阶

进阶滑块调用代码

  1. // 滑块默认
  2. $('.slider1').slider();
  4. // 最大最小值改变
  5. $('.slider2').slider({
  6. minValue: 0,
  7. maxValue: 180
  8. });
  10. // 设置初始值
  11. $('.slider3').slider({
  12. minValue: 0,
  13. maxValue: 100,
  14. initValue: 60
  15. });

说明：本身这个滑块移动端使用比较拉风，桌面端鼠标拖动确实反人类，故只兼容移动端！

消息框弹出
字号粗体!这是一个默认的消息提示框样式!

字号粗体!这是一primary的消息提示框样式!

字号粗体!这是一个warning的消息提示框样式!

字号粗体!这是一个success的消息提示框样式!

字号粗体!这是一个danger的消息提示框样式!

字号粗体!这是一个gray的消息提示框样式!
消息框扩展
字号粗体!这是一个success的消息提示框样式!

字号粗体!这是一primary的消息提示框样式!

字号粗体!这是一个warning的消息提示框样式!

字号粗体!这是一个danger的消息提示框样式!
使用手册 组件示例 网页特效 数据库 工具箱 后台模版 我要留言

版权所有：CopyRight © limi.lfszk.com 2020 - 2024 备案号：粤ICP备16008952号-5