一、背景色
<div class="layui-bg-red">赤色</div>
<div class="layui-bg-orange">橙色</div>
<div class="layui-bg-green">墨绿</div>
<div class="layui-bg-cyan">藏青</div>
<div class="layui-bg-blue">蓝色</div>
<div class="layui-bg-black">雅黑</div>
<div class="layui-bg-gray">银灰</div>
二、栅格系统
1、规则
|
超小屏幕(手机<768px) |
小屏幕(平板 ≥768px) |
中等屏幕(桌面 ≥992px) |
大型屏幕(桌面 ≥1200px) |
.layui-container 的值 |
auto |
750px |
970px |
1170px |
| 标记 |
xs |
sm |
md |
lg |
列对应类 * 为 1-12 的等分数值 |
layui-col-xs*
|
layui-col-sm*
|
layui-col-md*
|
layui-col-lg*
|
<div class="layui-row">
<div class="layui-bg-red layui-col-lg3 layui-col-sm4">赤色</div>
<div class="layui-bg-orange layui-col-lg3 layui-col-sm4">橙色</div>
<div class="layui-bg-green layui-col-lg3 layui-col-sm4">墨绿</div>
<div class="layui-bg-cyan layui-col-lg3 layui-col-sm4">藏青</div>
<div class="layui-bg-blue layui-col-lg3 layui-col-sm4">蓝色</div>
<div class="layui-bg-black layui-col-lg3 layui-col-sm4">雅黑</div>
<div class="layui-bg-gray layui-col-lg3 layui-col-sm4">银灰</div>
</div>
2、布局容器
- class="layui-container" 以便在小屏幕以上的设备中固定宽度，让列可控
<div class="layui-container">
<div class="layui-row"></div>
</div>
- class="layui-fluid" 宽度将不会固定，100% 适应
<div class="layui-fluid">
<div class="layui-row"></div>
</div>
3、列偏移
<div class="layui-fluid">
<div class="layui-row">
<div class="layui-bg-red layui-col-lg3">赤色</div>
<div class="layui-bg-orange layui-col-lg3 layui-col-lg-offset3">橙色</div>
<div class="layui-bg-green layui-col-lg3 layui-col-lg-offset3">墨绿</div>
<div class="layui-bg-cyan layui-col-lg3">藏青</div>
<div class="layui-bg-blue layui-col-lg3">蓝色</div>
<div class="layui-bg-black layui-col-lg3">雅黑</div>
<div class="layui-bg-gray layui-col-lg3">银灰</div>
</div>
</div>
4、嵌套
<div class="layui-fluid">
<div class="layui-row">
<div class="layui-bg-red layui-col-lg9">
<div class="layui-bg-orange layui-col-lg3">橙色</div>
<div class="layui-bg-green layui-col-lg3">墨绿</div>
<div class="layui-bg-cyan layui-col-lg3">藏青</div>
</div>
<div class="layui-bg-blue layui-col-lg3">蓝色</div>
</div>
</div>
三、图标
1、定义图标
<i class="layui-icon layui-icon-login-wechat"></i>
<i class="layui-icon"></i>
<i
class="layui-icon layui-icon-login-qq"
style="font-size: 30px; color: #1E9FFF;"
></i>
2、按钮组合
<button type="button" class="layui-btn">
<i class="layui-icon layui-icon-add-1"></i>添加
</button>
<button type="button" class="layui-btn layui-btn-normal">
<i class="layui-icon layui-icon-edit"></i>修改
</button>
<button type="button" class="layui-btn layui-btn-danger">
<i class="layui-icon layui-icon-delete"></i>删除
</button>
四、徽章
- 徽章具有三种不同的风格类型：小圆点、椭圆体、边框体
1、小圆点
<span class="layui-badge">666</span>
<span class="layui-badge">赤</span>
<span class="layui-badge layui-bg-orange">橙</span>
<span class="layui-badge layui-bg-green">绿</span>
<span class="layui-badge layui-bg-cyan">青</span>
<span class="layui-badge layui-bg-blue">蓝</span>
<span class="layui-badge layui-bg-black">黑</span>
<span class="layui-badge layui-bg-gray">灰</span>
3、边框体
<span class="layui-badge-rim">666</span>
<span class="layui-badge-rim layui-bg-orange">橙</span>
<span class="layui-badge-rim layui-bg-green">绿</span>
<span class="layui-badge-rim layui-bg-cyan">青</span>
<span class="layui-badge-rim layui-bg-blue">蓝</span>
<span class="layui-badge-rim layui-bg-black">黑</span>
<span class="layui-badge-rim layui-bg-gray">灰</span>
4、按钮组合
<button type="button" class="layui-btn">
最新消息 <span class="layui-badge">6</span>
</button>
<button type="button" class="layui-btn">
最新消息 <span class="layui-badge-rim">6</span>
</button>
五、动画
- layui 的动画全部采用 CSS3，因此不支持 ie8 和部分不支持 ie9
| 样式属性 |
说明 |
layui-anim-down |
顶部往下滑入 |
layui-anim-downbit |
微微往下滑入 |
layui-anim-up |
底部往上滑入 |
layui-anim-upbit |
微微往上滑入 |
layui-anim-scale |
平滑放大 |
layui-anim-scaleSpring |
弹簧式放大 |
layui-anim-scalesmall |
平滑放小 |
layui-anim-scalesmall-spring |
弹簧式放小 |
layui-anim-fadein |
渐现 |
layui-anim-fadeout |
渐隐 |
layui-anim-rotate |
360 度旋转 |
layui-anim-loop |
循环动画 |
