使用手册 - limi 开发使用文档

所有可用的图标

包括168多个来自阿里巴巴矢量图标库（iconfont）的字体图标。主要是参考 layui 内置图标形式。为了表示感谢，希望你在使用时尽量为 layui 添加一个友情链接。

实心



lm-icon-heart-fill
空心



lm-icon-heart
亮度/晴



lm-icon-light
时间/历史



lm-icon-time
蓝牙



lm-icon-bluetooth
@艾特



lm-icon-at
静音



lm-icon-mute
录音/麦克风



lm-icon-mike
密钥/钥匙



lm-icon-key
礼物/活动



lm-icon-gift
邮箱



lm-icon-email
RSS



lm-icon-rss
WiFi



lm-icon-wifi
退出/注销



lm-icon-logout
Android 安卓



lm-icon-android
Apple IOS 苹果



lm-icon-ios
Windows



lm-icon-windows
穿梭框



lm-icon-transfer
客服



lm-icon-service
减



lm-icon-subtraction
加



lm-icon-addition
滑块



lm-icon-slider
打印



lm-icon-print
导出



lm-icon-export
列



lm-icon-cols
退出全屏



lm-icon-screen-restore
全屏



lm-icon-screen-full
半星



lm-icon-rate-half
星星-空心



lm-icon-rate
星星-实心



lm-icon-rate-solid
手机



lm-icon-cellphone
验证码



lm-icon-vercode
微信



lm-icon-login-wechat
QQ



lm-icon-login-qq
微博



lm-icon-login-weibo
密码



lm-icon-password
用户名



lm-icon-username
刷新-粗



lm-icon-refresh-3
授权



lm-icon-auz
左向右伸缩菜单



lm-icon-spread-left
右向左伸缩菜单



lm-icon-shrink-right
雪花



lm-icon-snowflake
提示说明



lm-icon-tips
便签



lm-icon-note
主页



lm-icon-home
高级



lm-icon-senior
刷新



lm-icon-refresh
刷新



lm-icon-refresh-1
旗帜



lm-icon-flag
主题



lm-icon-theme
消息-通知



lm-icon-notice
网站



lm-icon-website
控制台



lm-icon-console
表情-惊讶



lm-icon-face-surprised
设置-空心



lm-icon-set
模板



lm-icon-template-1
应用



lm-icon-app
模板



lm-icon-template
赞



lm-icon-praise
踩



lm-icon-tread
男



lm-icon-male
女



lm-icon-female
相机-空心



lm-icon-camera
相机-实心



lm-icon-camera-fill
菜单-水平



lm-icon-more
菜单-垂直



lm-icon-more-vertical
金额-人民币



lm-icon-rmb
金额-美元



lm-icon-dollar
钻石-等级



lm-icon-diamond
火



lm-icon-fire
返回



lm-icon-return
位置-地图



lm-icon-location
办公-阅读



lm-icon-read
调查



lm-icon-survey
表情-微笑



lm-icon-face-smile
表情-哭泣



lm-icon-face-cry
购物车



lm-icon-cart-simple
购物车



lm-icon-cart
下一页



lm-icon-next
上一页



lm-icon-prev
上传-空心-拖拽



lm-icon-upload-drag
上传-实心



lm-icon-upload
下载-圆圈



lm-icon-download-circle
组件



lm-icon-component
文件-粗



lm-icon-file-b
用户



lm-icon-user
发现-实心



lm-icon-find-fill
loading



lm-icon-loading
loading



lm-icon-loading-1
添加



lm-icon-add-1
播放



lm-icon-play
暂停



lm-icon-pause
音频-耳机



lm-icon-headset
视频



lm-icon-video
语音-声音



lm-icon-voice
消息-通知-喇叭



lm-icon-speaker
删除线



lm-icon-fonts-del
代码



lm-icon-fonts-code
HTML



lm-icon-fonts-html
字体加粗



lm-icon-fonts-strong
删除链接



lm-icon-unlink
图片



lm-icon-picture
链接



lm-icon-link
表情-笑-粗



lm-icon-face-smile-b
左对齐



lm-icon-align-left
右对齐



lm-icon-align-right
居中对齐



lm-icon-align-center
字体-下划线



lm-icon-fonts-u
字体-斜体



lm-icon-fonts-i
Tabs 选项卡



lm-icon-tabs
单选框-选中



lm-icon-radio
单选框-候选



lm-icon-circle
编辑



lm-icon-edit
分享



lm-icon-share
删除



lm-icon-delete
表单



lm-icon-form
手机-细体



lm-icon-cellphone-fine
聊天对话沟通



lm-icon-dialogue
文字格式化



lm-icon-fonts-clear
窗口



lm-icon-layer
日期



lm-icon-date
水下雨



lm-icon-water
代码-圆圈



lm-icon-code-circle
轮播组图



lm-icon-carousel
翻页



lm-icon-prev-circle
布局



lm-icon-layouts
工具



lm-icon-util
选择模板



lm-icon-templeate-1
上传-圆圈



lm-icon-upload-circle
树



lm-icon-tree
表格



lm-icon-table
图表



lm-icon-chart
图标报表屏幕



lm-icon-chart-screen
引擎



lm-icon-engine
下三角



lm-icon-triangle-d
右三角



lm-icon-triangle-r
文件



lm-icon-file
设置-小型



lm-icon-set-sm
减少-圆圈

&#xe616

lm-icon-reduce-circle
添加-圆圈



lm-icon-add-circle
404



lm-icon-404
关于



lm-icon-about
箭头向上



lm-icon-up
箭头向下



lm-icon-down
箭头向左



lm-icon-left
箭头向右



lm-icon-right
圆点



lm-icon-circle-dot
搜索



lm-icon-search
设置-实心



lm-icon-set-fill
群组



lm-icon-group
好友



lm-icon-friends
回复评论实心



lm-icon-reply-fill
菜单隐身实心



lm-icon-menu-fill
记录



lm-icon-log
图片-细体



lm-icon-picture-fine
表情-笑-细体



lm-icon-face-smile-fine
列表



lm-icon-list
发布纸飞机



lm-icon-release
对 OK



lm-icon-ok
帮助



lm-icon-help
客服



lm-icon-chat
top 置顶



lm-icon-top
收藏-空心



lm-icon-star
收藏-实心



lm-icon-star-fill
关闭-实心

ဇ

lm-icon-close-fill
关闭-空心

ဆ

lm-icon-close
正确

စ

lm-icon-ok-circle
添加-圆圈-细体



lm-icon-add-circle-fine

按钮按钮组

向任意HTML元素设定 class="lm-btn" ，建立一个基础按钮。通过追加格式为 lm-btn-{type} 的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

单个按钮

实例代码

<button type="button" class="lm-btn lm-btn-default">默认按钮</button>
<button type="button" class="lm-btn lm-btn-default">默认按钮</button>
<button type="button" class="lm-btn lm-btn-primary">主键按钮</button>
<button type="button" class="lm-btn lm-btn-warning">警告按钮</button>
<button type="button" class="lm-btn lm-btn-success">成功按钮</button>
<button type="button" class="lm-btn lm-btn-danger">危险按钮</button>
<button type="button" class="lm-btn lm-btn-gray">灰色按钮</button>
<button type="button" class="lm-btn lm-btn-disabled" disabled>禁用按钮</button>
<button type="button" class="lm-btn lm-btn-link">链接按钮</button>

按钮组合

实例代码

<div class="lm-btn-group">
<button type="button" class="lm-btn lm-btn-success">增加</button>
<button type="button" class="lm-btn lm-btn-primary">编辑</button>
<button type="button" class="lm-btn lm-btn-danger">删除</button>
</div>

单个按钮的使用其实是很简单的，在多个按钮添加一个父级容器添加class="lm-btn-group"即可实现组合排列。

输入框

向input元素设定 class="lm-form-input" ，建立一个输入框，属性type可以是“text”，“search”。通过追加格式为lm-input-{mini}的class来定义它的长度。

默认输入框

实例代码

<input type="text" class="lm-form-input" placeholder="请输入姓名" maxlength="20"/>
<input type="text" class="lm-form-input lm-input-mini" placeholder=".lm-input-mini" maxlength="20"/>
<input type="text" class="lm-form-input lm-input-small" placeholder=".lm-input-small" maxlength="20"/>
<input type="text" class="lm-form-input lm-input-medium" placeholder=".lm-input-medium" maxlength="20"/>
<input type="text" class="lm-form-input lm-input-large" placeholder=".lm-input-large" maxlength="20"/>
<input type="text" class="lm-form-input lm-input-xlarge" placeholder=".lm-input-xlarge" maxlength="20"/>
<input type="text" class="lm-form-input lm-input-xxlarge" placeholder=".lm-input-xxlarge" maxlength="20"/>

同样的在input元素添加一个父级容器，加上class="lm-input-group"，实现输入框组的排列。

输入框组

实例代码

<div class="lm-input-group">
<span class="lm-input-group-addon lm-input-group-icon "><i class="lm-icon lm-icon-cellphone"></i></span>
<input type="tel" class="lm-form-input"/>
</div>
<div class="lm-input-group">
<span class="lm-input-group-addon lm-input-group-icon "><i class="lm-icon lm-icon-search"></i></span>
<input type="text" class="lm-form-input"/>
<span class="lm-input-btn"><button class="lm-btn lm-btn-primary"><i class="lm-icon lm-icon-search"></i> 搜索</button></span>
</div>

选择框

网站的选择框不外乎2种，单选radio，多选checkbox，所以这里需要定义一个选择框元素 input type="radio" ，或者 input type="checkbox" 。各浏览器默认的选择框样式都太过丑陋，而且操作也不方便，于是诞生了新的选择框样式。前提需要在input元素父级包含一个 label元素已实现选中改变对应的样式美化。

单项选择

默认

张三李四

实例代码

<label class="lm-form-radio"><input type="radio" name="radios" value="0" checked /><i class="lm-icon"></i>默认</label>
<label class="lm-radio1"><input type="radio" value="0" name="name" class="lm-radio-input" checked/><span></span> 张三</label>
<label class="lm-radio1"><input type="radio" value="1" name="name" class="lm-radio-input"/><span></span> 李四</label>

多项单选

张珊李斯王武赵柳

通过追加格式为 lm-radio-{type} 的class来定义其它选择框风格

实例代码

<div class="lm-radio-group lm-radio-success">
<label class="lm-radio-label"><input type="radio" value="0" name="suiji" class="lm-radio-input" checked/><span class="lm-radio-span">张珊</span></label>
<label class="lm-radio-label"><input type="radio" value="1" name="suiji" class="lm-radio-input"/><span class="lm-radio-span">李斯</span></label>
<label class="lm-radio-label"><input type="radio" value="2" name="suiji" class="lm-radio-input"/><span class="lm-radio-span">王武</span></label>
<label class="lm-radio-label"><input type="radio" value="3" name="suiji" class="lm-radio-input"/><span class="lm-radio-span">赵柳</span></label>
</div>

样式	组合
primary	lm-radio-group lm-radio-primary
success	lm-radio-group lm-radio-success

多项选择默认样式1 样式2 样式3

实例代码

<label class="lm-form-checkbox"><input type="checkbox" value="1" checked/><i class="lm-icon"></i>默认</label>
<label class="lm-form-checkbox lm-checkbox-primary"><input type="checkbox" value="1" checked/><i class="lm-icon"></i>样式1</label>
<label class="lm-form-checkbox lm-checkbox-warning"><input type="checkbox" value="2" checked/><i class="lm-icon"></i>样式2</label>
<label class="lm-form-checkbox lm-checkbox-success"><input type="checkbox" value="3" checked/><i class="lm-icon"></i>样式3</label>

创建一个容器，添加 lm-switch 加入选择框的元素实现开关的样式。

开关示例

实例代码

<div class="lm-switch lm-switch-primary">
<input type="checkbox" id="switch2" class="lm-switch_input" checked />
<label for="switch2" class="lm-check_label"><span class="lm-check_marker"></span></label>
</div>
<div class="lm-switch1 lm-switch-primary">
<input type="checkbox" id="switch11" class="lm-switch_input" checked />
<label for="switch11" class="lm-check_label"><span class="lm-check_marker"></span></label>
</div>
<div class="lm-switch2 lm-switch-primary">
<input type="checkbox" id="switch20" class="lm-switch_input" checked />
<label for="switch20" class="lm-check_label"><span class="lm-check_marker"></span></label>
</div>

通过追加格式为 lm-switch-{type} 的class来定义其它选择框风格

样式	组合
primary	lm-switch lm-switch-primary
success	lm-switch lm-switch-success
danger	lm-switch lm-switch-danger

导航条

一个完整的网站都必须包含着导航条，方便站点页面之间的切换跳转，可以想象导航的重要性。

横向导航

实例代码

<ul class="lm-clearfix lm-nav">
<li><a href="/doc/" title="使用手册">使用手册</a></li>
<li><a href="/demo/" title="组件示例" class="active">组件示例</a></li>
<li><a href="/effect/" title="网页特效">网页特效</a></li>
<li><a href="/sql/" title="数据库">数据库</a></li>
<li><a href="/toolbox/" title="工具箱">工具箱</a></li>
<li><a href="/admindemo/" title="后台模版">后台模版</a></li>
</ul>

只需要在横向导航的基础上在父级容器添加一个类.lm-nav-vertical即可立马变身竖向导航。484很简单呢？

竖向导航

实例代码

<ul class="lm-clearfix lm-nav lm-nav-vertical">
<li>使用手册 <span class="lm-icon lm-icon-triangle-r lm-right"></span>
<ul class="lm-nav2">
<li><a href="">选项1</a></li>
<li><a href="">选项2</a></li>
<li><a href="">选项3</a></li>
<li><a href="">选项4</a></li>
<li><a href="">选项5</a></li>
</ul>
</li>
<li>组件示例 <span class="lm-icon lm-icon-triangle-r lm-right"></span>
<ul class="lm-nav2">
<li><a href="">选项1</a></li>
<li><a href="">选项2</a></li>
<li><a href="">选项3</a></li>
<li><a href="">选项4</a></li>
<li><a href="">选项5</a></li>
</ul>
</li>
<li>网页特效 <span class="lm-icon lm-icon-triangle-r lm-right"></span>
<ul class="lm-nav2">
<li><a href="">选项1</a></li>
<li><a href="">选项2</a></li>
<li><a href="">选项3</a></li>
<li><a href="">选项4</a></li>
<li><a href="">选项5</a></li>
</ul>
</li>
<li>数据库 <span class="lm-icon lm-icon-triangle-r lm-right"></span>
<ul class="lm-nav2">
<li><a href="">选项1</a></li>
<li><a href="">选项2</a></li>
<li><a href="">选项3</a></li>
<li><a href="">选项4</a></li>
<li><a href="">选项5</a></li>
</ul>
</li>
<li>工具箱 <span class="lm-icon lm-icon-triangle-r lm-right"></span>
<ul class="lm-nav2">
<li><a href="">选项1</a></li>
<li><a href="">选项2</a></li>
<li><a href="">选项3</a></li>
<li><a href="">选项4</a></li>
<li><a href="">选项5</a></li>
</ul>
</li>
<li>后台模版 <span class="lm-icon lm-icon-triangle-r lm-right"></span>
<ul class="lm-nav2">
<li><a href="">选项1</a></li>
<li><a href="">选项2</a></li>
<li><a href="">选项3</a></li>
<li><a href="">选项4</a></li>
<li><a href="">选项5</a></li>
</ul>
</li>
</ul>

这个基本的导航条不能满足您的实际需求？没关系，请访问更多导航菜单

表格

表格的使用在网页中也是很频繁，显示数据整齐划一，只需要用到table元素，加上类 .lm-table 即可实现默认表格的使用。

默认表格

姓名	性别	民族	出生日期	说点神马
张三	男	汉族	1980-12-12	绳锯木断，水滴石穿。
李四	女	汉族	1989-10-14	古之立大事者，不惟有超世之才，亦必有坚韧不拔之志。——苏轼
王五	男	族	1980-12-12	付出，不一定会有收获；不付出，却一定不会有收获，不要奢望出现奇迹。
刘六	男	汉族	1980-12-12	拥有梦想只是一种智力，实现梦想才是一种能力。
赵琦	女	汉族	1980-12-12	就算全世界都否定我，还有我自己相信我。
李世山	男	汉族	1980-12-12	人生难得几回搏，此时不搏何时搏。

实例代码

<table class="lm-table lm-table-default">
<thead>
<tr><th><label class="lm-form-checkbox"><input type="checkbox" class="checkall"><i class="lm-icon"></i></label></th><th>姓名</th><th>性别</th><th>民族</th><th>出生日期</th><th>说点神马</th></tr>
</thead>
<tbody>
<tr><td><label class="lm-form-checkbox"><input type="checkbox" class="checkone"><i class="lm-icon"></i></label></td><td>张三</td><td>男</td><td>汉族</td><td>1980-12-12</td><td>绳锯木断，水滴石穿。</td></tr>
<tr><td><label class="lm-form-checkbox"><input type="checkbox" class="checkone"><i class="lm-icon"></i></label></td><td>李四</td><td>女</td><td>汉族</td><td>1989-10-14</td><td>古之立大事者，不惟有超世之才，亦必有坚韧不拔之志。——苏轼</td></tr>
<tr><td><label class="lm-form-checkbox"><input type="checkbox" class="checkone"><i class="lm-icon"></i></label></td><td>王五</td><td>男</td><td>族</td><td>1980-12-12</td><td>付出，不一定会有收获；不付出，却一定不会有收获，不要奢望出现奇迹。</td></tr>
<tr><td><label class="lm-form-checkbox"><input type="checkbox" class="checkone"><i class="lm-icon"></i></label></td><td>刘六</td><td>男</td><td>汉族</td><td>1980-12-12</td><td>拥有梦想只是一种智力，实现梦想才是一种能力。</td></tr>
<tr><td><label class="lm-form-checkbox"><input type="checkbox" class="checkone"><i class="lm-icon"></i></label></td><td>赵琦</td><td>女</td><td>汉族</td><td>1980-12-12</td><td>就算全世界都否定我，还有我自己相信我。</td></tr>
<tr><td><label class="lm-form-checkbox"><input type="checkbox" class="checkone"><i class="lm-icon"></i></label></td><td>李世山</td><td>男</td><td>汉族</td><td>1980-12-12</td><td>人生难得几回搏，此时不搏何时搏。</td></tr>
</tbody>
</table>

其他样式

类型	组合
默认	lm-table lm-table-default
无边框	lm-table lm-table-spier
行边框	lm-table lm-table-row
列边框	lm-table lm-table-col lm-table-spier

面板

面板的使用也非常简单，创建一个html容器，加上class lm-panel 。内部分为标题 lm-panel-head 和内容 lm-panel-body 。

默认面板

面板标题: 面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容

实例代码

<dl class="lm-panel">
<dt class="lm-panel-head">面板标题</dt>
<dd class="lm-panel-body">面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容面板内容</dd>
</dl>

其他风格

类型	组合
默认	lm-panel
卡片	lm-panel-card
primary	lm-panel lm-panel-primary
warning	lm-panel lm-panel-warning
success	lm-panel lm-panel-success
danger	lm-panel lm-panel-danger

选项卡

选项卡是一套集成在 limi1.0.js 中的组件，使用是必须与 limi1.0.js 一起使用才能实现切换的效果。

组件以 class="lm-tab"的父级容器包含的html元素组成。

默认选项卡

选项一
选项二
选项三

内容1

内容2

内容3

实例代码

<div class="lm-tab">
<div class="lm-tab-title">
<ul class="lm-tab-ul">
<li class="lm-tab-li lm-ative">选项一</li>
<li class="lm-tab-li">选项二</li>
<li class="lm-tab-li">选项三</li>
</ul>
</div>
<div class="lm-tab-conent">
<div class="lm-tab-item lm-ative">
内容1
</div>
<div class="lm-tab-item">
内容2
</div>
<div class="lm-tab-item">
内容3
</div>
</div>
</div>

其他风格

类型	组合
默认	lm-tab
无边框	lm-tab lm-tab-nobor
简洁tab	lm-tab lm-tab-concise
卡片式	lm-tab lm-tab-card

进度条

创建一个html元素容器，添加 class="lm-progress" ,内部包含2个span元素，组成一个进度条。

默认进度条

20%

40%

60%

80%

100%

实例代码

<div class="lm-progress">
<span style="width: 20%;" class="lm-progress-default"><span>20%</span></span>
</div>
<div class="lm-progress">
<span style="width: 40%;" class="lm-bg-primary"><span>40%</span></span>
</div>
<div class="lm-progress">
<span style="width: 60%;" class="lm-bg-warning"><span>60%</span></span>
</div>
<div class="lm-progress">
<span style="width: 80%;" class="lm-bg-success"><span>80%</span></span>
</div>
<div class="lm-progress">
<span style="width: 100%;" class="lm-bg-danger"><span>100%</span></span>
</div>

尺寸组合

尺寸	组合
默认	lm-progress
大号	lm-progress lm-progress-lg

小徽章

小徽章，大世界。使用 span 创建小徽章。

圆点

实例代码

<span class="lm-badge-dot lm-bg-primary"></span>
<span class="lm-badge-dot lm-bg-warning"></span>
<span class="lm-badge-dot lm-bg-success"></span>
<span class="lm-badge-dot lm-bg-danger"></span>
<span class="lm-badge-dot lm-bg-gray"></span>

弧形徽章 11 20 250 365 23 带边框

实例代码

<span class="lm-badge lm-bg-primary">11</span>
<span class="lm-badge lm-bg-warning">20</span>
<span class="lm-badge lm-bg-success">250</span>
<span class="lm-badge lm-bg-danger">365</span>
<span class="lm-badge lm-bg-gray">23</span>
<span class="lm-badge lm-badge-border">带边框</span>

另外还加入了几个标签，供需要的情况使用。

标签 defaule primary warning success danger

实例代码

<label class="lm-label lm-label-defaule">defaule</label>
<label class="lm-label lm-label-primary">primary</label>
<label class="lm-label lm-label-warning">warning</label>
<label class="lm-label lm-label-success">success</label>
<label class="lm-label lm-label-danger">danger</label>

辅助线

辅助线也没什么好介绍的，就是一些线。常用的几个列出来了。

带标题的横线

实例代码

<fieldset class="lm-upline">
<legend>带标题的横线</legend>
</fieldset>

这个在很多地方已经出现过的。其实很简单。

实线分割线蓝色

橙色

绿色

红色

灰色

实例代码

<hr class="lm-bg-primary"/>
<hr class="lm-bg-warning"/>
<hr class="lm-bg-success"/>
<hr class="lm-bg-danger"/>
<hr class="lm-bg-gray"/>

点线和虚线风格点线

虚线

实例代码

点线
<hr class="lm-hr lm-hr-dot lm-bor-primary"/>
虚线
<hr class="lm-hr lm-hr-dash lm-bor-primary"/>

类型	组合
点线primary	lm-hr lm-hr-dot lm-bor-primary
点线warning	lm-hr lm-hr-dot lm-bor-warning
点线success	lm-hr lm-hr-dot lm-bor-success
点线danger	lm-hr lm-hr-dot lm-bor-danger
点线gray	lm-hr lm-hr-dot lm-bor-gray
虚线primary	lm-hr lm-hr-dash lm-bor-primary
虚线warning	lm-hr lm-hr-dash lm-bor-warning
虚线success	lm-hr lm-hr-dash lm-bor-success
虚线danger	lm-hr lm-hr-dash lm-bor-danger
虚线gray	lm-hr lm-hr-dash lm-bor-gray

动画

动画是在css3中新引入的特效，有了动画的加持，网站的页面也相应的绚丽和许多，同时这需要浏览器的支持，所以我们不建议在IE浏览器中使用动画样式。在支持css3的浏览器中使用效果会更好。

动画也是应用在容器层，带动整个组件一起动起来。创建一个html容器元素，必须添加 class="lm-anim" ,（不添加则不会执行动画），再追加想要的执行的动画class即可。

动画调用示例

旋转

心动

弹跳

抖动

微抖

实例代码

<div class="lm-anim lm-anim-rotate lm-anim-loop"></div>
<div class="lm-anim lm-anim-pulse lm-anim-loop"></div>
<div class="lm-anim lm-anim-bounce lm-anim-loop"></div>
<div class="lm-anim lm-anim-shake lm-anim-loop"></div>
<div class="lm-anim lm-anim-headShake lm-anim-loop"></div>

类型	组合
左滚入	lm-anim lm-anim-rollIn
从上掉下	lm-anim lm-anim-bounceInDown
从下往上飞入	lm-anim lm-anim-bounceInUp
光速进入	lm-anim lm-anim-lightSpeedIn
光速退出	lm-anim lm-anim-lightSpeedOut
微微放大	lm-anim lm-anim-pulse
更多	请参考示例

在class后面追加 lm-anim-loop 可以实现动画循环执行，否则只会执行1次。

消息框

浏览器通常都会自带alert消息框，但是使用过的人都知道，那个样式真的是惨不忍睹。

于是好看的消息框因运而生，当然也不是一定要多好看，至少比原生的不那么不忍直视。

实例代码

<div class="lm-alert-tips lm-btn-default lm-clearfix"><button type="button"class="close lm-right"><i class="lm-icon lm-icon-close"></i></button><strong>字号粗体!</strong>这是一个默认的消息提示框样式!</div>
<div class="lm-alert-tips lm-btn-primary lm-clearfix"><button type="button"class="close lm-right"><i class="lm-icon lm-icon-close"></i></button><strong>字号粗体!</strong>这是一primary的消息提示框样式!</div>
<div class="lm-alert-tips lm-btn-warning lm-clearfix"><button type="button"class="close lm-right"><i class="lm-icon lm-icon-close"></i></button><strong>字号粗体!</strong>这是一个warning的消息提示框样式!</div>
<div class="lm-alert-tips lm-btn-success lm-clearfix"><button type="button"class="close lm-right"><i class="lm-icon lm-icon-close"></i></button><strong>字号粗体!</strong>这是一个success的消息提示框样式!</div>
<div class="lm-alert-tips lm-btn-danger lm-clearfix"><button type="button"class="close lm-right"><i class="lm-icon lm-icon-close"></i></button><strong>字号粗体!</strong>这是一个danger的消息提示框样式!</div>
<div class="lm-alert-tips lm-btn-gray lm-clearfix"><button type="button"class="close lm-right"><i class="lm-icon lm-icon-close"></i></button><strong>字号粗体!</strong>这是一个gray的消息提示框样式!</div>

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

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

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

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

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

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

页面元素

所有可用的图标

按钮 按钮组

实例代码

实例代码

输入框

实例代码

实例代码

选择框

实例代码

实例代码

实例代码

实例代码

导航条

实例代码

实例代码

表格

实例代码

表单

实例代码

面板

实例代码

选项卡

实例代码

进度条

实例代码

小徽章

实例代码

实例代码

实例代码

辅助线

实例代码

实例代码

实例代码

动画

实例代码

消息框

实例代码

按钮按钮组