layui常用颜色及图标汇总

最新推荐文章于 2025-03-26 23:48:34 发布

@Malachi

最新推荐文章于 2025-03-26 23:48:34 发布

阅读量1.1w

点赞数 4

分类专栏： layui使用入门

本文链接：https://blog.csdn.net/taiyangwojiu/article/details/103518155

版权

layui使用入门专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍layui UI框架的颜色配置、图标使用、动画效果及按钮样式。涵盖7种内置颜色、图标定义方法、CSS3动画类应用及按钮的多样化风格展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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" style="font-size: 30px; color: #1E9FFF;"></i>

图标网址：layui图标

三、动画类

使用方式：
直接对元素赋值动画特定的 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="http://www.layui.com" 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>
按钮组
		<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>