layui常⽤颜⾊及图标汇总
layui常⽤颜⾊及图标汇总
常⽤颜⾊
图标
CSS3动画类
按钮
⼀、颜⾊
layui提供了7中内置颜⾊
如下：
⾚⾊：class="layui-bg-red"
橙⾊：class="layui-bg-orange"
墨绿：class="layui-bg-green"
藏青：class="layui-bg-cyan"
蓝⾊：class="layui-bg-blue"
雅⿊：class="layui-bg-black"
银灰：class="layui-bg-gray"
⼆、图标
使⽤注意事项：
通过对⼀个内联元素（⼀般推荐⽤ i 标签）设定 class=“layui-icon”，来定义⼀个图标，然后对元素加上图标对应的 font-class（注意：layui 2.3.0 之前只⽀持采⽤ unicode 字符)，即可显⽰出你想要的图标（图标可以定义颜⾊和⼤⼩）。譬如：
<i class="layui-icon layui-icon-face-smile" ></i>
图标⽹址：
三、动画类
使⽤⽅式：
直接对元素赋值动画特定的 class 类名即可
其中 layui-anim 是必须的，后⾯跟着不同的动画类
<div class="layui-anim layui-anim-up"></div>
循环动画，追加：layui-anim-loop
<div class="layui-anim layui-anim-up layui-anim-loop"></div>
四、按钮
使⽤⽅式：
向任意HTML元素设定class=“layui-btn”，建⽴⼀个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进⾏任意组合，从⽽形成更多种按钮风格。
<button type="button"class="layui-btn">标准的按钮</button>
<a href="www.layui"class="layui-btn">可跳转按钮</a>
风格分为：
风格效果图
主题
尺⼨
风格效果图
圆⾓
图标
按钮组
主题<button type="button"class="layui-btn layui-btn-normal">百搭蓝⾊按钮</button>
尺⼨<button type="button"class="layui-btn layui-btn-sm">⼩型按钮</button>
圆⾓<button type="button"class="layui-btn layui-btn-radius layui-btn-disabled">⿏标悬浮禁⽌操作按钮</button>图标<button type="button"class="layui-btn layui-icon-delete">删除样式按钮</button>
icon图标库按钮组
<div class="layui-btn-group">
<button type="button"class="layui-btn">增加</button>
<button type="button"class="layui-btn">编辑</button>
<button type="button"class="layui-btn">删除</button>
</div>
按钮容器
<div class="layui-btn-container">
<button type="button"class="layui-btn">按钮⼀</button>
<button type="button"class="layui-btn">按钮⼆</button>
<button type="button"class="layui-btn">按钮三</button>
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。