layui色彩系列--主题色/背景色以及layui默认按钮基础文档

阅读须知:当前文档仅针对layui系列更新:2019-01-19 18:59:41 阅读量:6771 评论跟帖:0 文档整理编辑:Larry

文档导读:layui 提供的颜色,清新而不乏深沉,互相柔和,不过分刺激大脑皮层的神经反应,形成越久越耐看的微妙影像。合理搭配,可与各式各样的网站避免违和,从而使你的 Web 平台看上去更为融洽。视觉疲劳的形成往往是由于颜色过于丰富或过于单一形成的麻木感;可以说layui的色彩设计是业界非常清新出色的经典之作,对于缺少专业美工前端的猿们来说是一大福音。本篇我们将layui的色彩系列与最常用的按钮做一下详细的介绍:

温馨提示: 关于Layui的使用问题可直接在 larryms社区layui专区交流,本文档系列在后续会开启用户评论交流

layui 主要是以象征包容的墨绿作为主色调,由于它给人以深沉感,所以通常会以浅黑色的作为其陪衬,又会以蓝色这种比较鲜艳的色调来弥补它的色觉疲劳,整体让人清新自然,愈发耐看。  【取色意义】:执着于务实,不盲目攀比,又始终不忘绽放活力,这正是 layui 所追求的价值。 “不热衷于视觉设计的程序猿不是一个好作家!” ——贤心

常用主色
  • #009688

    通常用于按钮、及任何修饰元素

  • #5FB878

    一般用于选中状态

  • #393D49

    通常用于导航

  • #1E9FFF

    比较适合一些鲜艳色系的页面

事实上,layui 并非不敢去尝试一些亮丽的颜色,但许多情况下一个它可能并不是那么合适,所以我们把这些颜色归为“场景色”,即按照实际场景来呈现对应的颜色,比如你想给人以警觉感,可以尝试用上面的红色。他们一般会出现在 layui 的按钮、提示和修饰性元素,以及一些侧边元素上

  • #FFB800

    暖色系,一般用于提示性元素

  • #FF5722

    比较引人注意的颜色

  • #01AAED

    用于文字着色,如链接文本

  • #2F4056

    侧边或底部普遍采用的颜色

layui 认为灰色系代表极简,因为这是一种神奇的颜色,几乎可以与任何元素搭配,不易形成视觉疲劳,且永远不会过时。低调而优雅! 他们一般用于背景、边框等,如下所示极简中性色:

  • #F0F0F0

  • #f2f2f2

  • #eeeeee

  • #e2e2e2

  • #dddddd

  • #d2d2d2

  • #c2c2c2

layui内置的背景色CSS类

layui 内置了七种背景色,以便你用于各种元素中,如:徽章、分割线、导航等等

  • 赤色: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"

在看完layui颜色色彩设计后,接着我们看下layui默认提供的按钮及按钮组合,【文档将颜色与按钮在一起介绍就是为了让大家更快速的了解layui的使用便捷性】layui的按钮在日常开发中使用起来非常顺手,也非常漂亮, 观察可以发现Layui内置的六种主题的按钮颜色都是业界常用的标准配色,同时可以根据 主题、尺寸、图标、圆角的交叉组合,可以形成难以计算的按钮种类。

向任意HTML元素设定class="layui-btn",建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合,从而形成更多种按钮风格。

<button class="layui-btn">一个标准的按钮</button>
<a href="https://www.larryms.com" class="layui-btn">一个可跳转的按钮</a>

Layui按钮介绍:下面将分类罗列展示layui内置提供的多种风格的按钮,使用时可直接复制对应class即可得到对应的按钮

名称 组合
原始 class="layui-btn layui-btn-primary"
默认 class="layui-btn"
百搭 class="layui-btn layui-btn-normal"
暖色 class="layui-btn layui-btn-warm"
警告 class="layui-btn layui-btn-danger"
禁用 class="layui-btn layui-btn-disabled"

尺寸 组合
大型 class="layui-btn layui-btn-lg"
默认 class="layui-btn"
小型 class="layui-btn layui-btn-sm"
迷你 class="layui-btn layui-btn-xs"

尺寸 组合
大型百搭 class="layui-btn layui-btn-lg layui-btn-normal"
正常暖色 class="layui-btn layui-btn-warm"
小型警告 class="layui-btn layui-btn-sm layui-btn-danger"
迷你禁用 class="layui-btn layui-btn-xs layui-btn-disabled"
     
<button class="layui-btn layui-btn-fluid">流体按钮(最大化适应)</button>

主题 组合
原始 class="layui-btn layui-btn-radius layui-btn-primary"
默认 class="layui-btn layui-btn-radius"
百搭 class="layui-btn layui-btn-radius layui-btn-normal"
暖色 class="layui-btn layui-btn-radius layui-btn-warm"
警告 class="layui-btn layui-btn-radius layui-btn-danger"
禁用 class="layui-btn layui-btn-radius layui-btn-disabled"

尺寸 组合
大型百搭 class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal"
小型警告 class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger"
迷你禁用 class="layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled"

图标内容可以自定义,从上一章节的图标库中选择,或者使用larryms中的字体库对应复制粘贴进去即可

<button class="layui-btn">
<i class="layui-icon">&#xe608;</i> 添加
</button>
<button class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon">&#x1002;</i>
</button>

将按钮放入一个class="layui-btn-group"元素中,即可形成按钮组,按钮本身仍然可以随意搭配

<div class="layui-btn-group">
<button class="layui-btn">增加</button>
<button class="layui-btn">编辑</button>
<button class="layui-btn">删除</button>
</div>
<div class="layui-btn-group">
<button class="layui-btn layui-btn-sm">
<i class="layui-icon">&#xe654;</i>
</button>
<button class="layui-btn layui-btn-sm">
<i class="layui-icon">&#xe642;</i>
</button>
<button class="layui-btn layui-btn-sm">
<i class="layui-icon">&#xe640;</i>
</button>
<button class="layui-btn layui-btn-sm">
<i class="layui-icon">&#xe602;</i>
</button>
</div>
<div class="layui-btn-group">
<button class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon">&#654;</i>
</button>
<button class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon">&#xe642;</i>
</button>
<button class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon">&#xe640;</i>
</button>
</div>
按钮容器

尽管按钮在同节点并排时会自动拉开间距,但在按钮太多的情况,效果并不是很美好。因为你需要用到按钮容器

<div class="layui-btn-container">
<button class="layui-btn">按钮一</button>
<button class="layui-btn">按钮二</button>
<button class="layui-btn">按钮三</button>
</div>

若从最开头章节按顺序全部阅读完至此,layui的ui页面元素层已了解了将近一半,对于颜色和按钮的扩充可以关注larryms的对应内容,再阅读完layui其他页面内容和常用模块,基本上就可以完全上手在项目中使用layui了