B站教学视频中对Layui的颜色没有专门介绍，而Layui官方教程中虽然有颜色章节，但也只是简单介绍了基色调、辅色调、中性的颜色的概念及用途，最后说明layui 内置了七种背景色，以便用于各种元素中，如：徽章、分割线、导航等等。在GitHub的layui.css源文件中搜索了一下，与颜色有关的预设类主要包括以下几类：
背景色
| 序号 | 预设类 | 说明 |
|---|---|---|
| 1 | . layui-bg-red | 赤 |
| 2 | .layui-bg-orange | 橙 |
| 3 | .layui-bg-green | 绿 |
| 4 | .layui-bg-cyan | 青 |
| 5 | .layui-bg-blue | 蓝 |
| 6 | .layui-bg-black | 深 |
| 7 | .layui-bg-gray | 浅 |
边框色（1像素宽实线）
| 序号 | 预设类 | 说明 |
|---|---|---|
| 1 | .layui-border-red | 赤 |
| 2 | .layui-border-orangee | 橙 |
| 3 | .layui-border-green | 绿 |
| 4 | .layui-border-cyan | 青 |
| 5 | .layui-border-blue | 蓝 |
| 6 | .layui-border-black | 深 |
字体颜色
| 序号 | 预设类 | 说明 |
|---|---|---|
| 1 | . layui-font-red | 赤 |
| 2 | .layui-font-orange | 橙 |
| 3 | .layui-font-green | 绿 |
| 4 | .layui-font-cyan | 青 |
| 5 | .layui-font-blue | 蓝 |
| 6 | .layui-font-black | 深 |
| 7 | .layui-font-gray | 灰 |
按钮颜色
| 序号 | 预设类 | 说明 |
|---|---|---|
| 1 | .layui-btn-primary | 原始按钮 |
| 2 | .layui-btn-normal | 百搭按钮 |
| 3 | .layui-btn-warm | 暖色按钮 |
| 4 | .layui-btn-danger | 警告按钮 |
| 5 | …layui-btn-checked | 选中按钮 |
| 6 | .layui-btn-disabled | 禁用按钮 |
layui内置168类图标，其所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。每个图标都有唯一的预设类，也对应有唯一的 unicode 字符。要实现下面的图标按钮效果，可以采用两种方式，如下面代码所示：
<!-- 第一种 -->
<div class="layui-btn"><i class="layui-icon layui-icon-addition"></i>新 建</div>
<!-- 第二种 -->
<div class="layui-btn"><i class="layui-icon"></i>新 建</div>
Layui内置12种CSS3动画类，具体动画效果见参考文献2，本文仅介绍用法，主要是在class里面增加两个预设类，必须添加的是layui-anim，表明当前元素需要动画，然后在添加具体的动画效果预设类，也即上述12中CSS3动画类中的一种。另外如果循环动画，还需添加预设类layui-anim-loop。用法如下所示：
<div class="layui-btn layui-anim layui-anim-down layui-anim-loop"><i class="layui-icon"></i> 新 建</div>
参考文献：
[1]B站：layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/
