一、栅格系统与后台布局

示例code

HTML

二、layui 颜色设计感

三、字体图标

四、CSS3动画类

按钮 - 页面元素

五、表单 - 页面元素

HTMLcode

行区块结构code

六、导航相关 - 页面元素

七、基础菜单 - 页面元素

HTML

code

八、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 来定义行，如：<div class="layui-row"></div>
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

<div class="layui-container">
常规布局（以中型屏幕桌面为例）：
<div class="layui-row">
<div class="layui-col-md9">
你的内容 9/12
</div>
<div class="layui-col-md3">
你的内容 3/12
</div>
</div>移动设备、平板、桌面端的不同表现：
<div class="layui-row">
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
移动：6/12 | 平板：6/12 | 桌面：4/12
</div>
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
移动：6/12 | 平板：6/12 | 桌面：4/12
</div>
<div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
移动：4/12 | 平板：12/12 | 桌面：4/12
</div>
<div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
移动：4/12 | 平板：7/12 | 桌面：8/12
</div>
<div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
移动：4/12 | 平板：5/12 | 桌面：4/12
</div>
</div>
</div>

二、响应式规则：

栅格的响应式能力，得益于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

<div class="layui-container">
<div class="layui-row">
……
</div>
</div>

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

</>code

<div class="layui-fluid">
……
</div>

五、列间距：

通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距，预设了 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

</>code

<div class="layui-row layui-col-space10">
<div class="layui-col-md4">
1/3
</div>
<div class="layui-col-md4">
1/3
</div>
<div class="layui-col-md4">
1/3
</div>
</div>

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

六、列偏移：

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

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

4/12

偏移4列，从而在最右

</>code

<div class="layui-row">
<div class="layui-col-md4">
4/12
</div>
<div class="layui-col-md4 layui-col-md-offset4">
偏移4列，从而在最右
</div>
</div>

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

七、栅格嵌套：

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

内部列

</>code

<div class="layui-row layui-col-space5">
<div class="layui-col-md5">
<div class="layui-row grid-demo">
<div class="layui-col-md3">
内部列
</div>
<div class="layui-col-md9">
内部列
</div>
<div class="layui-col-md12">
内部列
</div>
</div>
</div>
<div class="layui-col-md7">
<div class="layui-row grid-demo grid-demo-bg1">
<div class="layui-col-md12">
内部列
</div>
<div class="layui-col-md9">
内部列
</div>
<div class="layui-col-md3">
内部列
</div>
</div>
</div>
</div>

八、让IE8/9兼容栅格：

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

</>code

<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

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

管理系统界面布局

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

</>HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 管理系统大布局 - Layui</title>
<link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li><li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
<li class="layui-nav-item">
<a href="javascript:;">nav groups</a>
<dl class="layui-nav-child">
<dd><a href="">menu 11</a></dd>
<dd><a href="">menu 22</a></dd>
<dd><a href="">menu 33</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-md-inline-block">
<a href="javascript:;">
<img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
tester
</a>
<dl class="layui-nav-child">
<dd><a href="">Your Profile</a></dd>
<dd><a href="">Settings</a></dd>
<dd><a href="">Sign out</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical"></i>
</a>
</li>
</ul>
</div><div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">menu group 1</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">menu 1</a></dd>
<dd><a href="javascript:;">menu 2</a></dd>
<dd><a href="javascript:;">menu 3</a></dd>
<dd><a href="">the links</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">menu group 2</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">list 1</a></dd>
<dd><a href="javascript:;">list 2</a></dd>
<dd><a href="">超链接</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
<li class="layui-nav-item"><a href="">the links</a></li>
</ul>
</div>
</div><div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>
</div><div class="layui-footer">
<!-- 底部固定区域 -->
底部固定区域
</div>
</div>
<script src="./layui/layui.js"></script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element
,layer = layui.layer
,util = layui.util
,$ = layui.$;//头部事件
util.event('lay-header-event', {
//左侧菜单事件
menuLeft: function(othis){
layer.msg('展开左侧菜单的操作', {icon: 0});
}
,menuRight: function(){
layer.open({
type: 1
,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
,area: ['260px', '100%']
,offset: 'rt' //右上角
,anim: 5
,shadeClose: true
});
}
});});
</script>
</body>
</html>

二、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 的形式定义图标：

<i class="layui-icon layui-icon-face-smile"></i>

</>code

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

<i class="layui-icon"></i>

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

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

<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>

内置图标一览表（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 是必须的，后面跟着的即是不同的动画类

<div class="layui-anim layui-anim-up"></div>

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

<div class="layui-anim layui-anim-up layui-anim-loop"></div>

内置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

<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http:/" class="layui-btn">一个可跳转的按钮</a>

主题

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

名称	组合
原始	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

<button type="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"

图标

按钮

结构code

<button type="button" class="layui-btn">
<i class="layui-icon layui-icon-down layui-font-12"></i> 按钮
</button><button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon layui-icon-left"></i>
</button>

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

按钮组

增加编辑删除

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

结构code

<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-group">
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
</div><div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon"></i>
</button>
</div>

按钮容器

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

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

</>code

<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>

结语

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

五、表单 - 页面元素

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

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

小睹为快

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

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

HTMLcode

<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码框</label>
<div class="layui-input-inline">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">辅助文字</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<select name="city" lay-verify="required">
<option value=""></option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作">
<input type="checkbox" name="like[read]" title="阅读" checked>
<input type="checkbox" name="like[dai]" title="发呆">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" name="switch" lay-skin="switch">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域</label>
<div class="layui-input-block">
<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form><script>
//Demo
layui.use('form', function(){
var form = layui.form;//监听提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>

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

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

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

行区块结构code

<div class="layui-form-item">
<label class="layui-form-label">标签区域</label>
<div class="layui-input-block">
原始表单元素区域
</div>
</div>

输入框

结构code

<input type="text" name="title" required lay-verify="required"placeholder="请输入标题" autocomplete="off" class="layui-input">

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

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

下拉选择框

结构code

<select name="city" lay-verify="">
<option value="">请选择一个城市</option>
<option value="010">北京</option>
<option value="021">上海</option>
<option value="0571">杭州</option>
</select>

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

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

结构code

<select name="city" lay-verify="">
<option value="010">北京</option>
<option value="021" disabled>上海（禁用效果）</option>
<option value="0571" selected>杭州</option>
</select>

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

结构code

<select name="quiz">
<option value="">请选择</option>
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市？</option>
</optgroup>
<optgroup label="学生时代">
<option value="你的工号">你的工号？</option>
<option value="你最喜欢的老师">你最喜欢的老师？</option>
</optgroup>
</select>

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

结构code

<select name="city" lay-verify="" lay-search>
<option value="010">layer</option>
<option value="021">form</option>
<option value="0571" selected>layim</option>
……
</select>

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

复选框

结构code

默认风格：
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆">
<input type="checkbox" name="" title="禁用" disabled>原始风格：
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary">
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>

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

开关

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

结构code

<input type="checkbox" name="xxx" lay-skin="switch">
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
<input type="checkbox" name="aaa" lay-skin="switch" disabled>

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

单选框

结构code

<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>

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

文本域

结构code

<textarea name="" required lay-verify="required"placeholder="请输入" class="layui-textarea"></textarea>

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

组装行内表单

结构code

<div class="layui-form-item"><div class="layui-inline">
<label class="layui-form-label">范围</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
</div>
</div><div class="layui-inline">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="password" name="" autocomplete="off" class="layui-input">
</div>
</div></div>

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

忽略美化渲染

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

</>code

<select lay-ignore>
<option>…</option>
</select>

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

表单方框风格

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

结构code

<form class="layui-form layui-form-pane" action="">
内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则会看起来比较别扭），如：
<div class="layui-form-item" pane>
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
</div>
</div>
</form>

六、导航相关 - 页面元素

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

依赖加载模块：element

水平导航

HTML结构code

<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child"> <!-- 二级菜单 -->
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul><script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;//…
});
</script>

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

导航中的其它元素

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

HTML结构code

<ul class="layui-nav">
<li class="layui-nav-item">
<a href="">控制台<span class="layui-badge">9</span></a>
</li>
<li class="layui-nav-item">
<a href="">个人中心<span class="layui-badge-dot"></span></a>
</li>
<li class="layui-nav-item">
<a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">修改信息</a></dd>
<dd><a href="javascript:;">安全管理</a></dd>
<dd><a href="javascript:;">退了</a></dd>
</dl>
</li>
</ul>

是否瞬间上了个档次呢？

导航主题

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

</>code

//如定义一个墨绿背景色的导航
<ul class="layui-nav layui-bg-green" lay-filter="">
…
</ul>

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

垂直/侧边导航

显示侧边导航示例

<ul class="layui-nav layui-nav-tree" lay-filter="test">
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> --><li class="layui-nav-item layui-nav-itemed"><a href="javascript:;">默认展开</a><dl class="layui-nav-child"><dd><a href="javascript:;">选项1</a></dd><dd><a href="javascript:;">选项2</a></dd><dd><a href="">跳转</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">解决方案</a><dl class="layui-nav-child"><dd><a href="">移动模块</a></dd><dd><a href="">后台模版</a></dd><dd><a href="">电商平台</a></dd></dl></li><li class="layui-nav-item"><a href="">产品</a></li><li class="layui-nav-item"><a href="">大数据</a></li>
</ul>

垂直导航HTML结构code

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

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

导航可选属性/类

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

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

面包屑

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

HTML结构code

<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>

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

HTML结构code

<span class="layui-breadcrumb" lay-separator="-">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>

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

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

HTML结构code

<span class="layui-breadcrumb" lay-separator="|">
<a href="">娱乐</a>
<a href="">八卦</a>
<a href="">体育</a>
<a href="">搞笑</a>
<a href="">视频</a>
<a href="">游戏</a>
<a href="">综艺</a>
</span>

七、基础菜单 - 页面元素

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

可依赖的模块：dropdown

菜单结构

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

代码
预览

</>HTML

<div class="layui-panel">
<ul class="layui-menu" id="docDemoMenu1">
<li lay-options="{id: 100}">
<div class="layui-menu-body-title">menu item 1</div>
</li>
<li lay-options="{id: 101}">
<div class="layui-menu-body-title">
<a href="#">menu item 2 <span class="layui-badge-dot"></span></a>
</div>
</li>
<li class="layui-menu-item-divider"></li>
<li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
<div class="layui-menu-body-title">
menu item 3 group <i class="layui-icon layui-icon-up"></i>
</div>
<ul>
<li lay-options="{id: 1031}">menu item 3-1</li>
<li lay-options="{id: 1032}">
<div class="layui-menu-body-title">menu item 3-2</div>
</li>
</ul>
</li>
<li class="layui-menu-item-divider"></li>
<li lay-options="{id: 104}">
<div class="layui-menu-body-title">menu item 4</div>
</li>
<li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
<div class="layui-menu-body-title">
menu item 5
<i class="layui-icon layui-icon-right"></i>
</div>
<div class="layui-panel layui-menu-body-panel">
<ul>
<li lay-options="{id: 1051}">
<div class="layui-menu-body-title">menu item 5-1</div>
</li>
<li lay-options="{id: 1051}">
<div class="layui-menu-body-title">menu item 5-2</div>
</li>
</ul>
</div>
</li>
<li lay-options="{id: 106}">
<div class="layui-menu-body-title">menu item 6</div>
</li>
</ul>
</div>

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

菜单项类型

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

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

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

菜单项参数

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

</>code

<li lay-options="{
id: 100
,title: 'menu item 1'
,type: '' //支持的类型有：group、parent，具体用法参见上文
,aaa: '任意参数'
}">内容</li>

事件触发

我们的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

<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div><script>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;//…
});
</script>

Tab简洁风格

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

对应的HTML结构code

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content"></div>
</div>

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

Tab卡片风格

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

对应的HTML结构code

<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content" style="height: 100px;">
<div class="layui-tab-item layui-show">1</div>
<div class="layui-tab-item">2</div>
<div class="layui-tab-item">3</div>
<div class="layui-tab-item">4</div>
<div class="layui-tab-item">5</div>
<div class="layui-tab-item">6</div>
</div>
</div>

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

Tab响应式

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

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

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

带删除的Tab

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

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

对应的HTML结构code

<div class="layui-tab" lay-allowClose="true">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户基本管理</li>
<li>权限分配</li>
<li>全部历史商品管理文字长一点试试</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">1</div>
<div class="layui-tab-item">2</div>
<div class="layui-tab-item">3</div>
<div class="layui-tab-item">4</div>
<div class="layui-tab-item">5</div>
<div class="layui-tab-item">6</div>
</div>
</div>

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

ID焦点定位

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

对应的HTML结构code

<div class="layui-tab" lay-filter="test1">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="111" >文章列表</li>
<li lay-id="222">发送信息</li>
<li lay-id="333">权限分配</li>
<li lay-id="444">审核</li>
<li lay-id="555">订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">1</div>
<div class="layui-tab-item">2</div>
<div class="layui-tab-item">3</div>
<div class="layui-tab-item">4</div>
<div class="layui-tab-item">5</div>
</div>
</div>

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

</>code

<script>
layui.use('element', function(){
var element = layui.element;//获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
var layid = location.hash.replace(/^#test1=/, '');
element.tabChange('test1', layid); //假设当前地址为：http://a.com#test1=222，那么选项卡会自动切换到“发送消息”这一项//监听Tab切换，以改变地址hash值
element.on('tab(test1)', function(){
location.hash = 'test1='+ this.getAttribute('lay-id');
});
});
</script>

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

九、进度条 - 页面元素

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

依赖加载组件：element

常规用法

80%

30%

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

HTML结构code

<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="10%"></div>
</div><script>
//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
layui.use('element', function(){
var element = layui.element;
});
</script>

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

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

显示进度比文本

1/3

80%

50%

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

HTML结构code

<div class="layui-progress" lay-showPercent="true">
<div class="layui-progress-bar layui-bg-red" lay-percent="1/3"></div>
</div><div class="layui-progress" lay-showPercent="yes">
<div class="layui-progress-bar layui-bg-red" lay-percent="30%"></div>
</div><div class="layui-progress layui-progress-big" lay-showPercent="yes">
<div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
</div>

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

大号进度条

80%

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

HTML结构code

<div class="layui-progress layui-progress-big">
<div class="layui-progress-bar" lay-percent="20%"></div>
</div><div class="layui-progress layui-progress-big">
<div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
</div><div class="layui-progress layui-progress-big" lay-showPercent="true">
<div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
</div>

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

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

十、面板 - 页面元素

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

依赖加载组件：element

常规面板

效果
代码

一个面板

提示：该功能为 layui 2.6.0 新增

卡片面板

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

卡片面板

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

对应的HTML结构code

<div class="layui-card">
<div class="layui-card-header">卡片面板</div>
<div class="layui-card-body">
卡片式面板面板通常用于非白色背景色的主体内<br>
从而映衬出边框投影
</div>
</div>

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

折叠面板

杜甫

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

李清照

鲁迅

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

对应的HTML结构code

<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">杜甫</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">李清照</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">鲁迅</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
</div><script>
//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;//…
});
</script>

开启手风琴

杜甫

李清照

鲁迅

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

对应的HTML结构code

<div class="layui-collapse" lay-accordion>
<div class="layui-colla-item">
<h2 class="layui-colla-title">杜甫</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">李清照</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">鲁迅</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
</div>

十一、表格 - 页面元素

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

常规用法

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

HTMLcode

<table class="layui-table">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>昵称</th>
<th>加入时间</th>
<th>签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心</td>
<td>2016-11-29</td>
<td>人生就像是一场修行</td>
</tr>
<tr>
<td>许闲心</td>
<td>2016-11-28</td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
</tr>
</tbody>
</table>

基础属性

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

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

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

HTMLcode

<table lay-even lay-skin="line" lay-size="lg">
…
</table>

表格其它风格

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

昵称	加入时间	签名
贤心	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

<table class="layui-table" lay-skin="line">
行边框表格（内部结构参见右侧目录“常规用法”）
</table><table class="layui-table" lay-skin="row">
列边框表格（内部结构参见右侧目录“常规用法”）
</table><table class="layui-table" lay-even lay-skin="nob">
无边框表格（内部结构参见右侧目录“常规用法”）
</table>

表格其它尺寸

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

昵称	加入时间	签名
贤心	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

<table class="layui-table" lay-size="sm">
小尺寸表格（内部结构参见右侧目录“常规用法”）
</table><table class="layui-table" lay-size="lg">
大尺寸表格（内部结构参见右侧目录“常规用法”）
</table>

十二、徽章

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

快速使用

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

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

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

</>code

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

<span class="layui-badge-dot"></span>

<span class="layui-badge-dot layui-bg-orange"></span>

<span class="layui-badge-dot layui-bg-green"></span>

<span class="layui-badge-dot layui-bg-cyan"></span>

<span class="layui-badge-dot layui-bg-blue"></span>

<span class="layui-badge-dot layui-bg-black"></span>

<span class="layui-badge-dot layui-bg-gray"></span>

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

<span class="layui-badge">6</span>

<span class="layui-badge">99</span>

<span class="layui-badge">61728</span>

<span class="layui-badge">赤</span>

<span class="layui-badge layui-bg-orange">橙</span>

<span class="layui-badge layui-bg-green">绿</span>

<span class="layui-badge layui-bg-cyan">青</span>

<span class="layui-badge layui-bg-blue">蓝</span>

<span class="layui-badge layui-bg-black">黑</span>

<span class="layui-badge layui-bg-gray">灰</span>

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

<span class="layui-badge-rim">6</span>

<span class="layui-badge-rim">Hot</span>

与其它元素的搭配

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

按钮

查看消息6 动态 ← 快看！

</>code

<button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>
<button class="layui-btn">动态<span class="layui-badge-dot layui-bg-orange"></span></button>

导航

控制台9
个人中心

</>code

<ul class="layui-nav" style="text-align: right;"> <-- 小Tips：这里有没有发现，设置导航靠右对齐（或居中对齐）其实非常简单 -->
<li class="layui-nav-item">
<a href="">控制台<span class="layui-badge">9</span></a>
</li>
<li class="layui-nav-item">
<a href="">个人中心<span class="layui-badge-dot"></span></a>
</li>
</ul>

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

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

</>code

<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理<span class="layui-badge-dot"></span></li>
<li>最新邮件<span class="layui-badge">99+</span></li>
</ul>
<div class="layui-tab-content"></div>
</div>

十三、时间线

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

快速使用



8月18日

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

8月16日

杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。个人最爱的名篇有：
- 《登高》
- 《茅屋为秋风所破歌》


8月15日

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

对应的代码code

<ul class="layui-timeline"><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><h3 class="layui-timeline-title">8月18日</h3><p>layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。<br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。<br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i></p></div></li><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><h3 class="layui-timeline-title">8月16日</h3><p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p><ul><li>《登高》</li><li>《茅屋为秋风所破歌》</li></ul></div></li><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><h3 class="layui-timeline-title">8月15日</h3><p>中国人民抗日战争胜利72周年<br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代<br>铭记、感恩<br>所有为中华民族浴血奋战的英雄将士<br>永垂不朽</p></div></li><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><div class="layui-timeline-title">过去</div></div></li></ul>

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

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

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

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

引用区块

引用区域的文字

目前内置了上述两种风格

HTML结构code

<blockquote class="layui-elem-quote">引用区域的文字</blockquote>
<blockquote class="layui-elem-quote layui-quote-nm">引用区域的文字</blockquote>

<fieldset class="layui-elem-field">
<legend>字段集区块 - 默认风格</legend>
<div class="layui-field-box">
内容区域
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>字段集区块 - 横线风格</legend>
<div class="layui-field-box">
内容区域
</div>
</fieldset>
你可以把它看作是一个有标题的横线
默认分割线
<hr>
赤色分割线
<hr class="layui-border-red">
橙色分割线
<hr class="layui-border-orange">
墨绿分割线
<hr class="layui-border-green">
青色分割线
<hr class="layui-border-cyan">
蓝色分割线
<hr class="layui-border-blue">
黑色分割线
<hr class="layui-border-black">

LayUI_02 前端框架页面元素相关推荐

前端————HTML页面元素和属性
1.全局属性全局属性:对于任何一个元素都是可以使用的属性 1.hidden属性:是布尔属性,规定元素仍未或不在相关,浏览器不应显示已规定hidden属性的元素,也可用于防止用户查看,直到匹配某些条件 ...
跨屏html ui,Amaze UI(HTML5 跨屏前端框架) v2.7.2
Amaze UI 2.7.2 更新日志:2016-08-17 JS: Improved #900 处理Modal元素停止冒泡引发的使用不变问题: Improved #901 调整Tabs样式,适应元素 ...
24种页面元素与iDo网页设计工具箱
只要换成庖丁解牛的眼光来审视一个网站,就会发现网页是由视觉效果和显示内容构成的. 视觉效果包括网页的背景.区域的背景.各种装饰,而显示内容则包括各种类型的列表.文本内容.标题.图片.动画和幻灯片等,视 ...
bootstrap怎么在一个页面渲染多个表格_推荐一个前端框架
拼图Pintuer-跨屏响应式布局前端开发CSS框架几个推荐理由: 国产: 跨屏响应式,这是最基本的: 使用简单,只需引入jquery.js.pinter.js.pinter.css三个文件即可: ...
手机页面前端框架weui+
随着智能手机的普及,越来越多的用户从电脑转移到手机,现在去谈客户我们一定要说:"您一定要做手机版或者是微信端",可见智能手机的强大,虽然说手机页面很早就有,但是感觉它是被自适应网站 ...
LayUi前端框架删除数据缓存问题（解决删除后刷新页面内容又会显示问题）
LayUi前端框架删除数据缓存问题(解决删除后刷新页面内容又会显示问题) 参考文章: (1)LayUi前端框架删除数据缓存问题(解决删除后刷新页面内容又会显示问题) (2)https://www.cn ...
刚写完的商城erp + 这个商城前台，新鲜出炉。自己1个人写, 包括php框架和前端html页面....
刚写完的商城erp + 这个商城前台,新鲜出炉.自己1个人写, 包括php框架和前端html页面. 刚写完的商城erp + 这个商城前台,新鲜出炉.自己1个人写, 包括php框架和前端html页面. ...
有些框架自动重写html标签,充分利用HTML标签元素 – 简单的xtyle前端框架
充分利用HTML标签元素 – 简单的xtyle前端框架 Sponsor 目前很多设计师.前端人员都喜欢使用Bootstrap这个前端框架用来搭建网站,确实是很强大,但是体积有点大了.所以除了Boots ...
Tampermonkey脚本编写笔记一：页面元素及框架分析
我们在编写Tampermonkey脚本时,首先分析页面,定位元素,需要分以下三步: 1.定位元素:通过开发人员工具使用"审查元素",即可定位到页面中的元素 2.分析元素所在的窗口: ...

LayUI_02 前端框架 页面元素

一、栅格系统与后台布局

示例code

</>code

</>code

</>code

</>code

</>code

</>code

</>HTML

二、layui 颜色设计感

三、字体图标

</>code

</>code

四、CSS3动画类

</>code

按钮 - 页面元素

</>code

</>code

结构code

结构code

</>code

五、表单 - 页面元素

HTMLcode

行区块结构code

结构code

结构code

结构code

结构code

结构code

结构code

结构code

结构code

结构code

结构code

</>code

结构code

六、导航相关 - 页面元素

HTML结构code

HTML结构code

</>code

垂直导航HTML结构code

</>code

HTML结构code

HTML结构code

HTML结构code

七、基础菜单 - 页面元素

</>HTML

</>code

</>JS

八、Tab选项卡 - 页面元素

对应的HTML结构code

对应的HTML结构code

对应的HTML结构code

对应的HTML结构code

对应的HTML结构code

</>code

九、进度条 - 页面元素

HTML结构code

HTML结构code

HTML结构code

十、面板 - 页面元素

对应的HTML结构code

杜甫

李清照

鲁迅

对应的HTML结构code

杜甫

李清照

鲁迅

对应的HTML结构code

十一、表格 - 页面元素

HTMLcode

HTMLcode

HTMLcode

HTMLcode

十二、徽章

</>code

</>code

</>code

LayUI_02 前端框架页面元素

LayUI_02 前端框架页面元素相关推荐