一、背景色

<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、规则

<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、定义图标

• class="layui-icon"

<i class="layui-icon layui-icon-login-wechat"></i>
<i class="layui-icon">&#xe677;</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