Layui 样式

Data: 2015-07-06 17:32:35Form: JournalClick: 10

# `Layui` 样式

# 一、背景色

<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>

官网手册open in new window

# 二、栅格系统

# 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>

官网手册open in new window

# 三、图标

# 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>

官网手册open in new window

# 四、徽章

徽章具有三种不同的风格类型：小圆点、椭圆体、边框体

# 1、小圆点

<span class="layui-badge-dot"></span>
<span class="layui-badge-dot layui-bg-orange"></span>
<span class="layui-badge-dot layui-bg-green"></span>
<span class="layui-badge-dot layui-bg-cyan"></span>
<span class="layui-badge-dot layui-bg-blue"></span>
<span class="layui-badge-dot layui-bg-black"></span>
<span class="layui-badge-dot layui-bg-gray"></span>

# 2、椭圆体

<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>

官网手册open in new window

# 五、动画

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`	循环动画

官网示例open in new window

我是 PHP 程序员

Layui 样式

# Layui 样式

# 一、背景色

# 二、栅格系统

# 1、规则

# 2、布局容器

# 3、列偏移

# 4、嵌套

# 三、图标

# 1、定义图标

# 2、按钮组合

# 四、徽章

# 1、小圆点

# 2、椭圆体

# 3、边框体

# 4、按钮组合

# 五、动画

# `Layui` 样式