LayUI_02 前端框架 页面元素

目录

一、栅格系统与后台布局

示例code

HTML

二、layui 颜色设计感

三、字体图标

四、CSS3动画类

按钮 - 页面元素

五、表单 - 页面元素

HTMLcode

行区块结构code

六、导航相关 - 页面元素

七、基础菜单 - 页面元素

HTML

code

JS

八、Tab选项卡 - 页面元素

九、进度条 - 页面元素

HTML结构code

十、面板 - 页面元素

十一、表格 - 页面元素

十二、徽章

十三、时间线

十四、简单辅助元素 - 页面元素

HTML结构code

---

一、栅格系统与后台布局

如你所愿，在 layui 2.0 的版本中，我们加入了强劲的栅格系统和常见的管理系统布局方案，这意味着你可以采用 layui 排版你的响应式网站和后台管理系统的界面了。layui 的栅格采用业界比较常见的 12 等分规则，内置手机、平板、PC 桌面中大型屏幕的多终端适配处理，最低能支持到 ie8。而你应当更欣喜的是，layui 终于开放了它经典的管理系统布局方案，快速搭建一个属于你的管理系统将变得十分轻松自如。

栅格系统

为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能力，layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统。我们将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

一、栅格布局规则：

---

1.	采用 layui-row 来定义行，如：
2.	采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中： 变量md 代表的是不同屏幕下的标记（可选值见下文） 变量* 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12 如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。
3.	列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。
4.	可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
5.	最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！

示例（这里只是大致列举两个，更多实例请前往 示例-栅格 查看）

你的内容 9/12

你的内容 3/12

50% | 33.33% | 33.33%

50% | 66.67% | 33.33%

33.33% | 100% | 33.33%

33.33% | 50% | 66.67%

33.33% | 50% | 33.33%

示例code

常规布局（以中型屏幕桌面为例）：


你的内容 9/12


你的内容 3/12



移动设备、平板、桌面端的不同表现：


移动：6/12 | 平板：6/12 | 桌面：4/12


移动：6/12 | 平板：6/12 | 桌面：4/12


移动：4/12 | 平板：12/12 | 桌面：4/12


移动：4/12 | 平板：7/12 | 桌面：8/12


移动：4/12 | 平板：5/12 | 桌面：4/12

二、响应式规则：

---

栅格的响应式能力，得益于CSS3媒体查询（Media Queries）的强力支持，从而针对四类不同尺寸的屏幕，进行相应的适配处理

	超小屏幕 (手机<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*
总列数	12
响应行为	始终按设定的比例水平排列	在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列

三、响应式公共类：

---

类名（class）	说明
layui-show-*-block	定义不同设备下的 display: block; * 可选值有：xs、sm、md、lg
layui-show-*-inline	定义不同设备下的 display: inline; * 可选值同上
layui-show-*-inline-block	定义不同设备下的 display: inline-block; * 可选值同上
layui-hide-*	定义不同设备下的隐藏类，即： display: none; * 可选值同上

四、布局容器：

---

将栅格放入一个带有 class="layui-container" 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。

code

……

当然，你还可以不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中，那么宽度将不会固定，而是 100% 适应

code

……

五、列间距：

---

通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距，预设了 12 种不同尺寸的边距，分别是：
layui-col-space1 layui-col-space2 layui-col-space4 layui-col-space5 layui-col-space6 layui-col-space8 layui-col-space10 layui-col-space12 layui-col-space14 layui-col-space15 layui-col-space16 layui-col-space18 layui-col-space20 layui-col-space22 layui-col-space24 layui-col-space25 layui-col-space26 layui-col-space28 layui-col-space30	支持列之间为 1px-30px 区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔

下面是一个简单的例子，列间距为10px：

1/3

1/3

1/3

code

1/3


1/3


1/3

如果需要的间距高于30px（一般不常见），请采用偏移，下文继续讲解

六、列偏移：

---

对列追加 类似 layui-col-md-offset* 的预设类，从而让列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 - 12。
如：layui-col-md-offset3，即代表在“中型桌面屏幕”下，让该列向右偏移 3 个列宽度

下面是一个采用「列偏移」机制让两个列左右对齐的实例

4/12

偏移4列，从而在最右

code

4/12


偏移4列，从而在最右

请注意，列偏移可针对不同屏幕的标准进行设定，比如上述的例子，只会在桌面屏幕下有效，当低于桌面屏幕的规定的临界值，就会堆叠排列。

七、栅格嵌套：

---

理论上，你可以对栅格进行无穷层次的嵌套，这更加增强了栅格的表现能力。而嵌套的使用非常简单。在列元素（layui-col-md*）中插入一个行元素（layui-row），即可完成嵌套。下面是一个简单的例子：

内部列

内部列

内部列

内部列

内部列

内部列

code

内部列


内部列


内部列






内部列


内部列


内部列

八、让IE8/9兼容栅格：

---

事实上IE8和IE9并不支持媒体查询（Media Queries），但你可以使用下面的补丁完美兼容！该补丁来自于开源社区：

code

将上述代码放入你页面  标签内的任意位置

管理系统界面布局

layui 之所以赢得如此多人的青睐，更多是在于它「前后界面兼备」的能力。既可编织出绚丽的前台页面，又可满足繁杂的管理系统界面需求。layui 致力于让每一位开发者都能轻松搭建自己的管理界面。下面是演示代码，你可以前往示例页面：预览布局效果

HTML

layout demo







nav 1
nav 2
nav 3

nav groups

menu 11
menu 22
menu 33







tester


Your Profile
Settings
Sign out















menu group 1

menu 1
menu 2
menu 3
the links



menu group 2

list 1
list 2
超链接


click menu item
the links






内容主体区域。记得修改 layui.css 和 js 的路径




底部固定区域

二、layui 颜色设计感

视觉疲劳的形成往往是由于颜色过于丰富或过于单一形成的麻木感，而 layui 提供的颜色，清新而不乏深沉，互相柔和，不过分刺激大脑皮层的神经反应，形成越久越耐看的微妙影像。合理搭配，可与各式各样的网站避免违和，从而使你的 Web 平台看上去更为融洽。

主色调

• #009688

  主色调之一

• #5FB878

  一般用于选中状态

• #393D49

  通常用于导航

• #1E9FFF

  经典蓝

layui 主要是以象征包容的墨绿作为主色调，由于它给人以深沉感，所以通常会以浅黑色的作为其陪衬，又会以蓝色这种比较鲜艳的色调来弥补它的色觉疲劳，整体让人清新自然，愈发耐看。【取色意义】：我们执着于务实，不盲目攀比，又始终不忘绽放活力。这正是 layui 所追求的价值。

次色调

• #FFB800

  暖色系

• #FF5722

  比较引人注意的颜色

• #01AAED

  文本链接着色

• #2F4056

  侧边色

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

中性色

他们一般用于背景、边框等

• #FAFAFA

• #F6F6F6

• #eeeeee

• #e2e2e2

• #dddddd

• #d2d2d2

• #cccccc

• #c2c2c2

layui 认为灰色系代表极简，因为这是一种神奇的颜色，几乎可以与任何元素搭配，不易形成视觉疲劳，且永远不会过时。低调而优雅！

七种色

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 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以把一个 icon 看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。你可以通过 font-class 或 unicode 来定义不同的图标。

使用方式

通过对一个内联元素（一般推荐用 i标签）设定 class="layui-icon"，来定义一个图标，然后对元素加上图标对应的 font-class（注意：layui 2.3.0 之前只支持采用 unicode 字符)，即可显示出你想要的图标，譬如：

code

从 layui 2.3.0 开始，支持 font-class 的形式定义图标：

code

注意：在 layui 2.3.0 之前的版本，只能设置 unicode 来定义图标



其中的  即是图标对应的 unicode 字符

你可以去定义它的颜色或者大小，如：

内置图标一览表（168个）

• 实心

  

  layui-icon-heart-fill

• 空心

  

  layui-icon-heart

• 亮度/晴

  

  layui-icon-light

• 时间/历史

  

  layui-icon-time

• 蓝牙

  

  layui-icon-bluetooth

• @艾特

  

  layui-icon-at

• 静音

  

  layui-icon-mute

• 录音/麦克风

  

  layui-icon-mike

• 密钥/钥匙

  

  layui-icon-key

• 礼物/活动

  

  layui-icon-gift

• 邮箱

  

  layui-icon-email

• RSS

  

  layui-icon-rss

• WiFi

  

  layui-icon-wifi

• 退出/注销

  

  layui-icon-logout

• Android 安卓

  

  layui-icon-android

• Apple IOS 苹果

  

  layui-icon-ios

• Windows

  

  layui-icon-windows

• 穿梭框

  

  layui-icon-transfer

• 客服

  

  layui-icon-service

• 减

  

  layui-icon-subtraction

• 加

  

  layui-icon-addition

• 滑块

  

  layui-icon-slider

• 打印

  

  layui-icon-print

• 导出

  

  layui-icon-export

• 列

  

  layui-icon-cols

• 退出全屏

  

  layui-icon-screen-restore

• 全屏

  

  layui-icon-screen-full

• 半星

  

  layui-icon-rate-half

• 星星-空心

  

  layui-icon-rate

• 星星-实心

  

  layui-icon-rate-solid

• 手机

  

  layui-icon-cellphone

• 验证码

  

  layui-icon-vercode

• 微信

  

  layui-icon-login-wechat

• QQ

  

  layui-icon-login-qq

• 微博

  

  layui-icon-login-weibo

• 密码

  

  layui-icon-password

• 用户名

  

  layui-icon-username

• 刷新-粗

  

  layui-icon-refresh-3

• 授权

  

  layui-icon-auz

• 左向右伸缩菜单

  

  layui-icon-spread-left

• 右向左伸缩菜单

  

  layui-icon-shrink-right

• 雪花

  

  layui-icon-snowflake

• 提示说明

  

  layui-icon-tips

• 便签

  

  layui-icon-note

• 主页

  

  layui-icon-home

• 高级

  

  layui-icon-senior

• 刷新

  

  layui-icon-refresh

• 刷新

  

  layui-icon-refresh-1

• 旗帜

  

  layui-icon-flag

• 主题

  

  layui-icon-theme

• 消息-通知

  

  layui-icon-notice

• 网站

  

  layui-icon-website

• 控制台

  

  layui-icon-console

• 表情-惊讶

  

  layui-icon-face-surprised

• 设置-空心

  

  layui-icon-set

• 模板

  

  layui-icon-template-1

• 应用

  

  layui-icon-app

• 模板

  

  layui-icon-template

• 赞

  

  layui-icon-praise

• 踩

  

  layui-icon-tread

• 男

  

  layui-icon-male

• 女

  

  layui-icon-female

• 相机-空心

  

  layui-icon-camera

• 相机-实心

  

  layui-icon-camera-fill

• 菜单-水平

  

  layui-icon-more

• 菜单-垂直

  

  layui-icon-more-vertical

• 金额-人民币

  

  layui-icon-rmb

• 金额-美元

  

  layui-icon-dollar

• 钻石-等级

  

  layui-icon-diamond

• 火

  

  layui-icon-fire

• 返回

  

  layui-icon-return

• 位置-地图

  

  layui-icon-location

• 办公-阅读

  

  layui-icon-read

• 调查

  

  layui-icon-survey

• 表情-微笑

  

  layui-icon-face-smile

• 表情-哭泣

  

  layui-icon-face-cry

• 购物车

  

  layui-icon-cart-simple

• 购物车

  

  layui-icon-cart

• 下一页

  

  layui-icon-next

• 上一页

  

  layui-icon-prev

• 上传-空心-拖拽

  

  layui-icon-upload-drag

• 上传-实心

  

  layui-icon-upload

• 下载-圆圈

  

  layui-icon-download-circle

• 组件

  

  layui-icon-component

• 文件-粗

  

  layui-icon-file-b

• 用户

  

  layui-icon-user

• 发现-实心

  

  layui-icon-find-fill

• loading

  

  layui-icon-loading

• loading

  

  layui-icon-loading-1

• 添加

  

  layui-icon-add-1

• 播放

  

  layui-icon-play

• 暂停

  

  layui-icon-pause

• 音频-耳机

  

  layui-icon-headset

• 视频

  

  layui-icon-video

• 语音-声音

  

  layui-icon-voice

• 消息-通知-喇叭

  

  layui-icon-speaker

• 删除线

  

  layui-icon-fonts-del

• 代码

  

  layui-icon-fonts-code

• HTML

  

  layui-icon-fonts-html

• 字体加粗

  

  layui-icon-fonts-strong

• 删除链接

  

  layui-icon-unlink

• 图片

  

  layui-icon-picture

• 链接

  

  layui-icon-link

• 表情-笑-粗

  

  layui-icon-face-smile-b

• 左对齐

  

  layui-icon-align-left

• 右对齐

  

  layui-icon-align-right

• 居中对齐

  

  layui-icon-align-center

• 字体-下划线

  

  layui-icon-fonts-u

• 字体-斜体

  

  layui-icon-fonts-i

• Tabs 选项卡

  

  layui-icon-tabs

• 单选框-选中

  

  layui-icon-radio

• 单选框-候选

  

  layui-icon-circle

• 编辑

  

  layui-icon-edit

• 分享

  

  layui-icon-share

• 删除

  

  layui-icon-delete

• 表单

  

  layui-icon-form

• 手机-细体

  

  layui-icon-cellphone-fine

• 聊天 对话 沟通

  

  layui-icon-dialogue

• 文字格式化

  

  layui-icon-fonts-clear

• 窗口

  

  layui-icon-layer

• 日期

  

  layui-icon-date

• 水 下雨

  

  layui-icon-water

• 代码-圆圈

  

  layui-icon-code-circle

• 轮播组图

  

  layui-icon-carousel

• 翻页

  

  layui-icon-prev-circle

• 布局

  

  layui-icon-layouts

• 工具

  

  layui-icon-util

• 选择模板

  

  layui-icon-templeate-1

• 上传-圆圈

  

  layui-icon-upload-circle

• 树

  

  layui-icon-tree

• 表格

  

  layui-icon-table

• 图表

  

  layui-icon-chart

• 图标 报表 屏幕

  

  layui-icon-chart-screen

• 引擎

  

  layui-icon-engine

• 下三角

  

  layui-icon-triangle-d

• 右三角

  

  layui-icon-triangle-r

• 文件

  

  layui-icon-file

• 设置-小型

  

  layui-icon-set-sm

• 减少-圆圈

  

  layui-icon-reduce-circle

• 添加-圆圈

  

  layui-icon-add-circle

• 404

  

  layui-icon-404

• 关于

  

  layui-icon-about

• 箭头 向上

  

  layui-icon-up

• 箭头 向下

  

  layui-icon-down

• 箭头 向左

  

  layui-icon-left

• 箭头 向右

  

  layui-icon-right

• 圆点

  

  layui-icon-circle-dot

• 搜索

  

  layui-icon-search

• 设置-实心

  

  layui-icon-set-fill

• 群组

  

  layui-icon-group

• 好友

  

  layui-icon-friends

• 回复 评论 实心

  

  layui-icon-reply-fill

• 菜单 隐身 实心

  

  layui-icon-menu-fill

• 记录

  

  layui-icon-log

• 图片-细体

  

  layui-icon-picture-fine

• 表情-笑-细体

  

  layui-icon-face-smile-fine

• 列表

  

  layui-icon-list

• 发布 纸飞机

  

  layui-icon-release

• 对 OK

  

  layui-icon-ok

• 帮助

  

  layui-icon-help

• 客服

  

  layui-icon-chat

• top 置顶

  

  layui-icon-top

• 收藏-空心

  

  layui-icon-star

• 收藏-实心

  

  layui-icon-star-fill

• 关闭-实心

  ဇ

  layui-icon-close-fill

• 关闭-空心

  ဆ

  layui-icon-close

• 正确

  စ

  layui-icon-ok-circle

• 添加-圆圈-细体

  

  layui-icon-add-circle-fine

跨域问题的解决

由于浏览器存在同源策略，所以如果 layui（里面含图标字体文件）所在的地址与你当前的页面地址不在同一个域下，即会出现图标跨域问题。所以要么你就把 layui 与网站放在同一服务器，要么就对 layui 所在的资源服务器的 Response Headers 加上属性：Access-Control-Allow-Origin: *

四、CSS3动画类

在实用价值的前提之下，我们并没有内置过多花俏的动画。而他们同样在 layui 的许多交互元素中，发挥着重要的作用。layui 的动画全部采用 CSS3，因此不支持 ie8 和部分不支持 ie9。

使用方式

动画的使用非常简单，直接对元素赋值动画特定的 class 类名即可。如：

code

其中 layui-anim 是必须的，后面跟着的即是不同的动画类

循环动画，追加：layui-anim-loop

内置CSS3动画一览表

下面是不同的动画类名，点击下述绿色块，可直接预览动画

• 顶部往下滑入

  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

• 360度旋转

  layui-anim-rotate

• 循环动画

  追加：layui-anim-loop

 

按钮 - 页面元素

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

用法

code

1. 一个标准的按钮
2. 一个可跳转的按钮

主题

原始按钮 默认按钮 百搭按钮 暖色按钮 警告按钮 禁用按钮

名称	组合
原始	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-primary layui-border-green"
百搭	class="layui-btn layui-btn-primary layui-border-blue"
暖色	class="layui-btn layui-btn-primary layui-border-orange"
警告	class="layui-btn layui-btn-primary layui-border-red"
深色	class="layui-btn layui-btn-primary layui-border-black"

尺寸

大型按钮 默认按钮 小型按钮 迷你按钮

尺寸	组合
大型	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"

流体按钮（最大化适应）

流体按钮（最大化适应）

code

2. 流体按钮（最大化适应）

圆角

原始按钮 默认按钮 百搭按钮 暖色按钮 警告按钮 禁用按钮

主题	组合
原始	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"

图标

按钮     

        

结构code

 按钮

温馨提示：各种图标字体请移步文档左侧【页面元素 - 图标】阅览

按钮组

增加 编辑 删除

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

结构code

增加
编辑
删除



























按钮容器

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

按钮一 按钮二 按钮三 按钮四 按钮五 按钮六 按钮一 按钮二 按钮三 按钮四 按钮五 按钮六 按钮一 按钮二 按钮三 按钮四 按钮五 按钮六 按钮一 按钮二

code

按钮一
按钮二
按钮三

结语

你是否发现，主题、尺寸、图标、圆角的交叉组合，可以形成难以计算的按钮种类。另外，你可能最关注的是配色，Layui内置的六种主题的按钮颜色都是业界常用的标准配色，如果他们仍然无法与你的网站契合，那么请先允许我“噗”一声。。。然后你就大胆地自加一个颜色吧！比如：粉红色或者菊花色（一个有味道的颜色）

五、表单 - 页面元素

在一个容器中设定  class="layui-form" 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的  form模块 来完成各种交互。

依赖加载模块： form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）

小睹为快

通过上述的小小演示，你已经大致了解了一波 layui 的表单模块，你可能会觉得她还算不错，但并不太过瘾？譬如你希望看到日期选择、图片上传等等。然而你必须认识到，本篇文档核心介绍的是表单元素，对于日期、上传等更多丰富的元素，其实也是可以很方便地穿插在内的。

下述是【小睹为快】的HTML结构：

HTMLcode

输入框





密码框



辅助文字


选择框



北京
上海
广州
深圳
杭州




复选框







开关





单选框






文本域






立即提交
重置

UI的最终呈现得益于 Form模块 的全自动渲染，她将原本普通的诸如select、checkbox、radio等元素重置为你所看到的模样。或许你可以移步左侧导航的 内置模块 中的 表单 对其进行详细的了解。

而本篇介绍的是表单元素本身，譬如规定的区块、CSS类、原始控件等。他们共同组成了一个表单体系。

下述是基本的行区块结构，它提供了响应式的支持。但如果你不大喜欢，你可以换成你的结构，但必须要在外层容器中定义class="layui-form"，form模块才能正常工作。

行区块结构code

标签区域

原始表单元素区域

输入框

结构code

required：注册浏览器所规定的必填字段
lay-verify：注册form模块需要验证的类型
class="layui-input"：layui.css提供的通用CSS类

这些在下文都不再做重复介绍

下拉选择框

结构code

请选择一个城市
北京
上海
杭州

上述option的第一项主要是占个坑，让form模块预留“请选择”的提示空间，否则将会把第一项（存在value值）作为默认选中项。你可以在option的空值项中自定义文本，如：请选择分类。

你可以通过设定 selected 来设定默认选中项：

结构code

北京
上海（禁用效果）
杭州

你还可以通过 optgroup 标签给select分组：

结构code

请选择

你工作的第一个城市？


你的工号？
你最喜欢的老师？

以及通过设定属性 lay-search 来开启搜索匹配功能

结构code

layer
form
layim
……

属性 selected可设定默认项
属性 disabled开启禁用，select和option标签都支持

复选框

结构code

默认风格：




原始风格：

属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
属性checked可设定默认选中
属性lay-skin可设置复选框的风格
设置value="1"可自定义值，否则选中时返回的就是默认的on

开关

其实就是checkbox复选框的“变种”，通过设定 lay-skin="switch" 形成了开关风格

结构code

属性checked可设定默认开
属性disabled开启禁用
属性lay-text可自定义开关两种状态的文本
设置value="1"可自定义值，否则选中时返回的就是默认的on

单选框

结构code

属性title可自定义文本
属性disabled开启禁用
设置value="xxx"可自定义值，否则选中时返回的就是默认的on

文本域

结构code

class="layui-textarea"：layui.css提供的通用CSS类

组装行内表单

结构code

范围



-






密码

class="layui-inline"：定义外层行内
class="layui-input-inline"：定义内层行内

忽略美化渲染

你可以对表单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格

code

…

一般不推荐这样做。事实上form组件所提供的接口，对其渲染过的元素，足以应付几乎所有的业务需求。如果忽略渲染，可能会让UI风格不和谐

表单方框风格

通过追加 layui-form-pane 的class，来设定表单的方框风格。内部结构不变。我们的Fly社区用的就是这个风格。

结构code

内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则会看起来比较别扭），如：

单选框

六、导航相关 - 页面元素

导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。千万不要忘了加载  element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如呼出二级菜单等，需借助element模块才能使用。你可以移步文档左侧【内置模块 - 常用元素操作 element】了解详情

依赖加载模块： element

水平导航

HTML结构code

最新活动
产品
大数据

解决方案
 
移动模块
后台模版
电商平台


社区

设定layui-this来指向当前页面分类。

导航中的其它元素

---

除了一般的文字导航，我们还内置了图片和徽章的支持

HTML结构code

控制台9


个人中心


我

修改信息
安全管理
退了

是否瞬间上了个档次呢？

导航主题

通过对导航追加CSS背景类，让导航呈现不同的主题色

code

//如定义一个墨绿背景色的导航

…

水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）
垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）

垂直/侧边导航

显示侧边导航示例

  

    默认展开
    

      
选项1
      
选项2
      
跳转
    
  
  

    解决方案
    

      
移动模块
      
后台模版
      
电商平台
    
  
  
产品
  
大数据

      

垂直导航HTML结构code

水平、垂直、侧边三个导航的HTML结构是完全一样的，不同的是：

垂直导航需要追加class：layui-nav-tree
侧边导航需要追加class：layui-nav-tree layui-nav-side

导航可选属性/类

对导航元素结构设定可选属性和 CSS 类名，可让导航菜单项达到不同效果。目前支持的属性如下：

属性名	可选值	说明
lay-shrink	空值（默认） 不收缩兄弟菜单子菜单 all 收缩全部兄弟菜单子菜单	展开子菜单时，是否收缩兄弟节点已展开的子菜单 （注：layui 2.2.6 开始新增） 如： …
lay-unselect	无需填值	点击指定导航菜单时，不会出现选中效果（注：layui 2.2.0 开始新增） 如： 刷新
lay-bar	disabled 禁用滑块跟随功能	在导航菜单主容器中配置，如：
CSS 类	layui-nav-child-c 子菜单居中对齐 layui-nav-child-r 子菜单向右对齐	直接在子菜单标签配置即可，如： code …
上述两项为 layui 2.6.6 开始新增

面包屑

首页/ 国际新闻/ 亚太地区/ 正文

HTML结构code

首页
国际新闻
亚太地区
正文

你还可以通过设置属性 lay-separator="-" 来自定义分隔符。如： 首页- 国际新闻- 亚太地区- 正文

HTML结构code

首页
国际新闻
亚太地区
正文

当然，你还可以作为小导航来用，如：

娱乐| 八卦| 体育| 搞笑| 视频| 游戏| 综艺

HTML结构code

娱乐
八卦
体育
搞笑
视频
游戏
综艺

七、基础菜单 - 页面元素

菜单是页面必不可少的元素，我们希望它是通用的，所以在结构上，它的组成极其灵活。而事实上，在基础菜单还没有正式推出之前，垂直导航（layui-nav-tree）曾顶替了它的角色，尤其是在管理系统中发挥了举足轻重的作用。尽管它们本质上都属于「菜单」的范畴，但我们姑且约定将水平的称之为「导航」，垂直的称之为正统的「基础菜单」。它将十分有用，许多业务场景都能看到它的存在。

可依赖的模块： dropdown

菜单结构

通常基础菜单是搭配面板（layui-panel）使用的，但这并不是必须的。基础菜单有它独有的样式结构，以下是一个基本的示例：

• 代码
• 预览

HTML

menu item 1



menu item 2 





menu item 3 group 


menu item 3-1

menu item 3-2





menu item 4



menu item 5





menu item 5-1


menu item 5-2





menu item 6

可以看到，它实则是一个 ul li 的层级嵌套，当需要出现「菜单组」和「子级菜单」时，只需要添加相对应的 class 类名即可。

菜单项类型

菜单项是由 li 元素组成的，以下将列举几种被支持的菜单项类型

类型	html	说明
常规菜单项		无需添加特定 class
可收缩菜单组		其中layui-menu-item-down为初始展开；layui-menu-item-up为初始收缩。
横向父子菜单		其子级菜单的结构参照上文的「菜单结构」，主要是需包含一层面板元素。
分割线		一条横线，用于更好地划分菜单区域

其子级菜单遵循的列表类型也是一样的。需要注意的是，「可收缩菜单组」的子菜单仅需要再嵌套一层 ul 即可；而「横向父子菜单」还需要套一层 div class="layui-panel layui-menu-body-panel"，以便让子菜单层次更加分明。

菜单项参数

在上文中，您可能已经多次注意到 lay-options="{}" 这个属性了，它正是我们所说的菜单项参数。当点击菜单列表时，回调中将会返回该属性所配置的全部参数，其中type参数是组件内部约定的，其它参数可以随意命名。如

code

内容

事件触发

我们的dropdown组件不仅菜单的基本交互（如点击选中、菜单组展开收缩等）进行了支持，还提供了菜单的事件机制：

• JS
• HTML

JS

layui.use('dropdown', function(){
var dropdown = layui.dropdown;

//菜单点击事件，其中 docDemoMenu1 对应的是菜单结构上的 id 指
dropdown.on('click(docDemoMenu1)', function(options){
var othis = $(this); //当前菜单列表的 DOM 对象
console.log(options); //菜单列表的 lay-options 中的参数
});
});

八、Tab选项卡 - 页面元素

导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符。

依赖加载组件： element （请注意：必须加载element模块，相关功能才能正常使用，详见：内置组件 - 常用元素操作）

默认Tab选项卡

Tab广泛应用于Web页面，因此我们也对其进行了良好的支持。Layui内置多种Tab风格，支持删除选项卡、并提供响应式支持。
这是一个最基本的例子：

• 网站设置
• 用户管理
• 权限分配
• 商品管理
• 订单管理

如果需要对Tab进行外部新增、删除、切换等操作，请移步到“内置组件-常用元素操作”页面中查阅：基础方法

对应的HTML结构code

网站设置
用户管理
权限分配
商品管理
订单管理


内容1
内容2
内容3
内容4
内容5

Tab简洁风格

• 网站设置
• 用户管理
• 权限分配
• 商品管理
• 订单管理

对应的HTML结构code

网站设置
用户管理
权限分配
商品管理
订单管理

通过追加class：layui-tab-brief 来设定简洁风格。
值得注意的是，如果存在 layui-tab-item 的内容区域，在切换时自动定位到对应内容。如果不存在内容区域，则不会定位到对应内容。你通常需要设置过滤器，通过 element模块的监听tab事件来进行切换操作。详见文档左侧【内置组件 - 基本元素操作 element】

Tab卡片风格

• 网站设置
• 用户管理
• 权限分配
• 商品管理
• 订单管理

对应的HTML结构code

网站设置
用户管理
权限分配
商品管理
订单管理


1
2
3
4
5
6

通过追加class：layui-tab-card来设定卡片风格

Tab响应式

当容器的宽度不足以显示全部的选项时，即会自动出现展开图标，如下以卡片风格为例（注意：所有Tab风格都支持响应式）：

• 网站设置
• 用户管理
• 权限分配
• 商品管理
• 订单管理
• 

额，感觉像是打了个小酱油。而事实上在自适应的页面中（不固宽），它的意义才会呈现。

带删除的Tab

你可以对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除

• 网站设置
• 用户基本管理
• 权限分配
• 全部历史商品管理文字长一点试试
• 订单管理

对应的HTML结构code

网站设置
用户基本管理
权限分配
全部历史商品管理文字长一点试试
订单管理


1
2
3
4
5
6

与默认相比没有什么特别的结构，就是多了个属性 lay-allowClose="true"

ID焦点定位

你可以通过对选项卡设置属性 lay-id="xxx" 来作为唯一的匹配索引，以用于外部的定位切换，如后台的左侧导航、以及页面地址 hash的匹配。

对应的HTML结构code

文章列表
发送信息
权限分配
审核
订单管理


1
2
3
4
5

属性 lay-id 是扮演这项功能的主要角色，它是动态操作的重要凭据，如：

code

同样的还有增加选项卡和删除选项卡，都需要用到 lay-id，更多动态操作请阅读：element模块

九、进度条 - 页面元素

进度条可应用于许多业务场景，如任务完成进度、loading等等，是一种较为直观的表达元素。

依赖加载组件： element

常规用法

 

80%

30%

我们进度条提供了两种尺寸及多种颜色的显示风格，其中颜色的选值可参考：背景色公共类。基本元素结构如下

HTML结构code

属性 lay-percent ：代表进度条的初始百分比，你也可以动态改变进度，详见：进度条的动态操作

正如上述你见到的，当对元素设置了class为 layui-progress-big 时，即为大尺寸的进度条风格。默认风格的进度条的百分比如果开启，会在右上角显示，而大号进度条则会在内部显示。

显示进度比文本

1/3

 

80%

50%

通过对父级元素设置属性 lay-showPercent="yes" 来开启进度比的文本显示，支持：普通数字、百分数、分数（layui 2.1.7 新增）

HTML结构code

注意：默认情况下不会显示百分比文本，如果你想开启，对属性lay-showPercent设置任意值即可，如：yes。但如果不想显示，千万别设置no或者false，直接剔除该属性即可。

大号进度条

 

80%

和世界上许多客观存在的事物一样，进度条也不仅是只有短小细长的尺寸，当然也有大而粗，这是我们认为相对合适的大尺寸。

HTML结构code

正如上述你见到的，当对元素设置了class为 layui-progress-big 时，即为大尺寸的进度条风格。默认风格的进度条的百分比如果开启，会在右上角显示，而大号进度条则会在内部显示。

如果你需要对进度条进行动态操作，如动态改变进度，那么你需要阅读：element模块

 

十、面板 - 页面元素

一般的面板通常是指一个独立的容器，而折叠面板则能有效地节省页面的可视面积，非常适合应用于：QA说明、帮助文档等

依赖加载组件： element

常规面板

• 效果
• 代码

一个面板

一个面板

提示：该功能为 layui 2.6.0 新增

卡片面板

卡片面板

卡片式面板面板通常用于非白色背景色的主体内
从而映衬出边框投影

卡片面板

结合 layui 的栅格系统
轻松实现响应式布局

对应的HTML结构code

卡片面板

卡片式面板面板通常用于非白色背景色的主体内

从而映衬出边框投影

如果你的网页采用的是默认的白色背景，不建议使用卡片面板。

折叠面板

杜甫

杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名远播，对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来，大多集于《杜工部集》。

李清照

鲁迅

通过对内容元素设置class为 layui-show 来选择性初始展开某一个面板，element 模块会自动呈现状态图标。

对应的HTML结构code

杜甫
内容区域


李清照
内容区域


鲁迅
内容区域

开启手风琴

杜甫

杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名远播，对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来，大多集于《杜工部集》。

李清照

鲁迅

在折叠面板的父容器设置属性 lay-accordion 来开启手风琴，那么在进行折叠操作时，始终只会展现当前的面板。

对应的HTML结构code

杜甫
内容区域


李清照
内容区域


鲁迅
内容区域

十一、表格 - 页面元素

本篇为你介绍表格的HTML使用，你将通过内置的自定义属性对其进行风格的多样化设定。 请注意：这仅仅局限于呈现基础表格，如果你急切需要的是数据表格（ datatable），那么你应该详细阅读： table模块

常规用法

昵称	加入时间	签名
贤心	2016-11-29	人生就像是一场修行
许闲心	2016-11-28	于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…
sentsin	2016-11-27	Life is either a daring adventure or nothing.

HTMLcode

昵称
加入时间
签名




贤心
2016-11-29
人生就像是一场修行


许闲心
2016-11-28
于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…

基础属性

静态表格支持以下基础属性，可定义不同风格/尺寸的表格样式：

属性名	属性值	备注
lay-even	无	用于开启 隔行 背景，可与其它属性一起使用
lay-skin="属性值"	line （行边框风格） row （列边框风格） nob （无边框风格）	若使用默认风格不设置该属性即可
lay-size="属性值"	sm （小尺寸） lg （大尺寸）	若使用默认尺寸不设置该属性即可

将你所需要的基础属性写在table标签上即可，如（一个带有隔行背景，且行边框风格的大尺寸表格）：

HTMLcode

…

表格其它风格

除了默认的表格风格外，我们还提供了其它几种风格，你可以按照实际需求自由设定

昵称	加入时间	签名
贤心	2016-11-29	人生就像是一场修行
许闲心	2016-11-28	于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…
sentsin	2016-11-27	Life is either a daring adventure or nothing.

昵称	加入时间	签名
贤心	2016-11-29	人生就像是一场修行
许闲心	2016-11-28	于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…
sentsin	2016-11-27	Life is either a daring adventure or nothing.

昵称	加入时间	签名
贤心	2016-11-29	人生就像是一场修行
许闲心	2016-11-28	于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…
sentsin	2016-11-27	Life is either a daring adventure or nothing.

HTMLcode

行边框表格（内部结构参见右侧目录“常规用法”）



列边框表格（内部结构参见右侧目录“常规用法”）



无边框表格（内部结构参见右侧目录“常规用法”）

表格其它尺寸

除了默认的表格尺寸外，我们还提供了其它几种尺寸，你可以按照实际需求自由设定

昵称	加入时间	签名
贤心	2016-11-29	人生就像是一场修行
许闲心	2016-11-28	于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…
sentsin	2016-11-27	Life is either a daring adventure or nothing.

昵称	加入时间	签名
贤心	2016-11-29	人生就像是一场修行
许闲心	2016-11-28	于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…
sentsin	2016-11-27	Life is either a daring adventure or nothing.

HTMLcode

小尺寸表格（内部结构参见右侧目录“常规用法”）



大尺寸表格（内部结构参见右侧目录“常规用法”）

十二、徽章

徽章是一个修饰性的元素，它们本身细小而并不显眼，但掺杂在其它元素中就显得尤为突出了。页面往往因徽章的陪衬，而显得十分和谐。

快速使用

不妨先来看看 徽章 这个小小的大家族吧：

       6 99 61728 赤 橙 绿 青 蓝 黑 灰 6 Hot

你可能已经敏锐地发现，除去花枝招展的七种颜色，徽章具有三种不同的风格类型：小圆点、椭圆体、边框体

code

小圆点，通过 layui-badge-dot 来定义，里面不能加文字

椭圆体，通过 layui-badge 来定义。事实上我们把这个视作为主要使用方式

1. 6
2. 99
3. 61728
4. 赤
5. 橙
6. 绿
7. 青
8. 蓝
9. 黑
10. 灰

边框体，通过 layui-badge-rim 来定义

1. 6
2. Hot

与其它元素的搭配

徽章主要是修饰作用，因此必不可少要与几乎所有的元素搭配。我们目前对以下元素内置了徽章的排版支持：

按钮

---

查看消息6 动态 ← 快看！

code

查看消息1
动态

导航

---

• 控制台9
• 个人中心

code

 <-- 小Tips：这里有没有发现，设置导航靠右对齐（或居中对齐）其实非常简单 -->

控制台9


个人中心

选项卡（所有风格都支持，这里以简约风格为例）

---

• 网站设置
• 用户管理
• 最新邮件99+

code

网站设置
用户管理
最新邮件99+

十三、时间线

将时间抽象到二维平面，垂直呈现一段从过去到现在的故事。

快速使用

• 

  8月18日

  layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
  不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
  无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 

• 

  8月16日

  杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。个人最爱的名篇有：

  • 《登高》
  • 《茅屋为秋风所破歌》
• 

  8月15日

  中国人民抗日战争胜利日
  铭记、感恩
  所有为中华民族浴血奋战的英雄将士
  永垂不朽

• 

  过去

对应的代码code





8月18日





layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。


不枉近百个日日夜夜与之为伴。因小而大，因弱而强。


无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 













8月16日

杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。个人最爱的名篇有：



《登高》

《茅屋为秋风所破歌》













8月15日



中国人民抗日战争胜利72周年


常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代


铭记、感恩


所有为中华民族浴血奋战的英雄将士


永垂不朽













过去

关于时间线，似乎也没有什么太多可介绍的东西。你需要留意的是以下几点

• 图标可以任意定义（但并不推荐更改）
• 标题区域并不意味着一定要加粗
• 内容区域可自由填充。

十四、简单辅助元素 - 页面元素

本篇主要集中罗列页面中的一些简单辅助元素，如：引用块、字段集区块、横线等等，这些元素都无需依赖任何模块

引用区块

引用区域的文字

引用区域的文字

目前内置了上述两种风格

HTML结构code

引用区域的文字
引用区域的文字

• 字段集区块 - 默认风格
• 内容区域

字段集区块 - 横线风格

内容区域

你可以把它看作是一个有标题的横线

默认分割线

---

赤色分割线

---

橙色分割线

---

墨绿分割线

---

青色分割线

---

蓝色分割线

---

黑色分割线

---