概述如你所愿，在layui2.0的版本中，我们加入了强劲的栅格系统和后台布局方案，这意味着你终于可以着手采用layui排版你的响应式网站和后台系统了。layui的栅格系统采用业界比较常见的12等分规则，内置移动设备、平板、桌面中等和大型屏幕的多终端适配处理，最低能支持到ie8。而你应当更欣喜的是，layui终于开放了它经典的后台布局方案，快速搭建一个属于你的后台系统将变得十分轻松自如。官网：https://www.layui.com/doc/element/layout.html使用样式<style>.grid-demo{line-height:50px;text-align:center;background-color:#79C48C;color:#fff;}.grid-demo-bg1{background-color:#00F7DE;}</style>布局容器layui-container类会随着屏幕大小改变成相应的宽度，响应式推荐使用响应式布局容器固定宽度：大屏（>=1200px）宽度为1170px中屏（>=992px）宽度为970px小屏（>=768px）宽度为750px超小屏（100%）<body><divclass="layui-container"style="background:#2aabd2">大数据男孩</div></body>layui-fluid类流式布局容器任何屏幕大小都是百分百宽度，适用于单独的移动端<body><divclass="layui-fluid"style="background:#2aabd2">大数据男孩</div></body>栅格系统栅格的响应式能力，得益于CSS3媒体查询（MediaQueries）的强力支持，从而针对四类不同尺寸的屏幕，进行相应的适配处理。-超小屏幕(手机<768px)小屏幕(平板≥768px)中等屏幕(桌面≥992px)大型屏幕(桌面≥1200px).layui-container的值auto750px970px1170px标记xssmmdlg列对应类*为1-12的等分数值layui-col-xs*layui-col-sm*layui-col-md*layui-col-lg*响应行为始终按设定的比例水平排列在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列同前一个同前一个<!--中屏每个占4份3X4=12格--><style>.grid-demo{padding:10px;line-height:50px;text-align:center;background-color:#79C48C;color:#fff;}.grid-demo-bg1{background-color:#63BA79;}</style><divclass="layui-container"><divclass="layui-row"><divclass="layui-col-md4grid-demo">大数据男孩</div><divclass="layui-col-md4grid-demo-bg1">大数据男孩</div><divclass="layui-col-md4grid-demo">大数据男孩</div></div></div>列偏移对列追加类似layui-col-md-offset*的预设类，从而让列向右偏移。其中*号代表的是偏移占据的列数，可选中为1-12。如：layui-col-md-offset4，即代表在“中型桌面屏幕”下，让该列向右偏移4个列宽度<divclass="layui-container"><divclass="layui-row"><divclass="layui-col-md4grid-demo-bg1">大数据男孩</div><divclass="layui-col-md4layui-col-md-offset4grid-demo-bg1">大数据男孩</div></div></div>列间距通过“列间距”的预设类，来设定列之间的间距。且一行中·最左的列不会出现左边距，最右的列不会出现右边距。可以设置layui-col-space1~layui-col-space30。<divclass="layui-container"><!--间距10px--><divclass="layui-rowlayui-col-space10"><divclass="layui-col-md4"><divclass="grid-demo">大数据男孩</div></div><divclass="layui-col-md4"><divclass="grid-demo">大数据男孩</div></div><divclass="layui-col-md4"><divclass="grid-demo">大数据男孩</div></div></div></div>响应式公共类类名（class）说明layui-show-*-block定义不同设备下的display:block;*可选值有：xs、sm、md、lglayui-show-*-inline定义不同设备下的display:inline;*可选值同上layui-show-*-inline-block定义不同设备下的display:inline-block;*可选值同上layui-hide-*定义不同设备下的隐藏类，即：display:none;*可选值同上<divclass="layui-container"><divclass="layui-rowlayui-col-space10"><divclass="layui-col-md4"><divclass="grid-demo">大数据男孩</div></div><!--中屏下隐藏--><divclass="layui-col-md4layui-hide-md"><divclass="grid-demo">大数据男孩2</div></div><divclass="layui-col-md4"><divclass="grid-demo">大数据男孩</div></div></div></div>
概述导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。千万不要忘了加载element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如呼出二级菜单等，需借助element模块才能使用。官网：https://www.layui.com/doc/element/nav.html使用导航主要类layui-nav：导航栏layui-nav-item：导航条目layui-nav-child：二级菜单layui-this：当前选择水平导航（默认）<!--导航栏--><ulclass="layui-nav"lay-filter=""><!--导航条目--><liclass="layui-nav-item"><ahref="">最新活动</a></li><liclass="layui-nav-itemlayui-this"><ahref="">产品</a></li><liclass="layui-nav-item"><ahref="">大数据</a></li><liclass="layui-nav-item"><ahref="javascript:;">解决方案</a><!--二级菜单--><dlclass="layui-nav-child"><dd><ahref="">移动模块</a></dd><dd><ahref="">后台模版</a></dd><dd><ahref="">电商平台</a></dd></dl></li><liclass="layui-nav-item"><ahref="">社区</a></li></ul><script>//注意：导航依赖element模块，否则无法进行功能性操作layui.use(['element'],function(){});</script>追加不同的CSS背景类可以呈现不同的颜色水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）//如定义一个墨绿背景色的导航<ulclass="layui-navlayui-bg-green"lay-filter="">…</ul>垂直导航&侧边导航垂直导航（不会布满整个左侧）只需在水平导航栏追加class：layui-nav-tree侧边导航（会布满整个左侧）需要追加class：layui-nav-tree、layui-nav-side<!--相比垂直追加layui-nav-tree类--><ulclass="layui-navlayui-nav-tree"lay-filter="test"><!--侧边导航:<ulclass="layui-navlayui-nav-treelayui-nav-side">--><liclass="layui-nav-itemlayui-nav-itemed"><ahref="javascript:;">默认展开</a><dlclass="layui-nav-child"><dd><ahref="javascript:;">选项1</a></dd><dd><ahref="javascript:;">选项2</a></dd><dd><ahref="">跳转</a></dd></dl></li><liclass="layui-nav-item"><ahref="javascript:;">解决方案</a><dlclass="layui-nav-child"><dd><ahref="">移动模块</a></dd><dd><ahref="">后台模版</a></dd><dd><ahref="">电商平台</a></dd></dl></li><liclass="layui-nav-item"><ahref="">产品</a></li><liclass="layui-nav-item"><ahref="">大数据男孩</a></li></ul><script>//注意：导航依赖element模块，否则无法进行功能性操作layui.use('element',function(){});</script>导航添加图片及徽章元素<ulclass="layui-nav"><liclass="layui-nav-item"><!--添加一个徽章--><ahref="">控制台<spanclass="layui-badge">9</span></a></li><liclass="layui-nav-item"><ahref="">个人中心<spanclass="layui-badge-dot"></span></a></li><liclass="layui-nav-item"><!--添加一个图片--><ahref=""><imgsrc="//t.cn/RCzsdCq"class="layui-nav-img">我</a><dlclass="layui-nav-child"><dd><ahref="javascript:;">修改信息</a></dd><dd><ahref="javascript:;">安全管理</a></dd><dd><ahref="javascript:;">退了</a></dd></dl></li></ul><script>//注意：导航依赖element模块，否则无法进行功能性操作layui.use('element',function(){});</script>还有其他的导航栏请看官网
概述导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符，更多使用官网查看。官网：https://www.layui.com/doc/element/tab.html使用基础选项卡模板<fieldsetclass="layui-elem-fieldlayui-field-title"style="margin-top:30px;"><legend>默认风格的Tab</legend></fieldset><divclass="layui-tab"><!--选项卡标题--><ulclass="layui-tab-title"><liclass="layui-this">网站设置</li><li>用户管理</li><li>权限分配</li><li>商品管理</li><li>订单管理</li></ul><!--选项卡内容--><divclass="layui-tab-content"><!--layui-show默认展示的选项卡--><divclass="layui-tab-itemlayui-show">1.高度默认自适应，也可以随意固宽。<br>2.Tab进行了响应式处理，所以无需担心数量多少。</div><divclass="layui-tab-item">大数据男孩2</div><divclass="layui-tab-item">大数据男孩3</div><divclass="layui-tab-item">大数据男孩4</div><divclass="layui-tab-item">大数据男孩5</div></div></div><script>//注意：导航依赖element模块，否则无法进行功能性操作layui.use(['element'],function(){})</script>三种风格默认风格：class="layui-tab"简洁风格：class="layui-tablayui-tab-brief"卡片风格：class="layui-tablayui-tab-card"<fieldsetclass="layui-elem-fieldlayui-field-title"style="margin-top:50px;"><legend>默认风格</legend></fieldset><divclass="layui-tab"lay-filter="test"><ulclass="layui-tab-title"><liclass="layui-this">网站设置</li><li>用户管理</li><li>权限分配</li><li>商品管理</li><li>订单管理</li></ul><divclass="layui-tab-content"><divclass="layui-tab-itemlayui-show">点击该Tab的任一标题，观察地址栏变化，再刷新页面。选项卡将会自动定位到上一次切换的项</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div></div></div><fieldsetclass="layui-elem-fieldlayui-field-title"style="margin-top:50px;"><legend>简洁风格</legend></fieldset><divclass="layui-tablayui-tab-brief"lay-filter="docDemoTabBrief"><ulclass="layui-tab-title"><liclass="layui-this">网站设置</li><li>用户管理</li><li>权限分配</li><li>商品管理</li><li>订单管理</li></ul><divclass="layui-tab-content"style="height:100px;"><divclass="layui-tab-itemlayui-show">内容不一样是要有，因为你可以监听tab事件（阅读下文档就是了）</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div></div></div><fieldsetclass="layui-elem-fieldlayui-field-title"style="margin-top:50px;"><legend>卡片风格</legend></fieldset><divclass="layui-tablayui-tab-card"><ulclass="layui-tab-title"><liclass="layui-this">网站设置</li><li>用户管理</li><li>权限分配</li><li>商品管理</li><li>订单管理</li></ul><divclass="layui-tab-content"style="height:100px;"><divclass="layui-tab-itemlayui-show">默认宽度是相对于父元素100%适应的，你也可以固定宽度。</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div></div></div><script>//注意：导航依赖element模块，否则无法进行功能性操作layui.use(['element'],function(){})</script>选项卡的相关动态操作（删除，添加…）请看官网
概述进度条可应用于许多业务场景，如任务完成进度、loading等等，是一种较为直观的表达元素。官网：https://www.layui.com/doc/element/progress.html使用进度条的实现原理就是大Div包裹小Div主要使用的类：class="layui-progress"大Divclass="layui-progress-bar"小Div默认风格<fieldsetclass="layui-elem-fieldlayui-field-title"style="margin-top:20px;"><legend>默认风格的进度条</legend></fieldset><!--大Div没有定义宽度--><divclass="layui-progress"><divclass="layui-progress-bar"lay-percent="40%"></div></div><!--定义大Div的宽度--><divstyle="margin-top:15px;width:300px"><divclass="layui-progress"><divclass="layui-progress-bar"lay-percent="70%"></div></div></div><script>//注意进度条依赖element模块，否则无法进行正常渲染和功能性操作layui.use(['element'],function(){});</script>不同颜色官方是提供了这几种颜色，可以自己定义颜色是定义在小Div里面<fieldsetclass="layui-elem-fieldlayui-field-title"style="margin-top:50px;"><legend>更多颜色选取</legend></fieldset><divclass="layui-progress"><divclass="layui-progress-barlayui-bg-red"lay-percent="20%"></div></div><br><divclass="layui-progress"><divclass="layui-progress-barlayui-bg-orange"lay-percent="30%"></div></div><br><divclass="layui-progress"><divclass="layui-progress-barlayui-bg-green"lay-percent="40%"></div></div><br><divclass="layui-progress"><divclass="layui-progress-barlayui-bg-blue"lay-percent="50%"></div></div><br><divclass="layui-progress"><divclass="layui-progress-barlayui-bg-cyan"lay-percent="60%"></div></div><script>//注意进度条依赖element模块，否则无法进行正常渲染和功能性操作layui.use(['element'],function(){});</script>大尺寸进度条只用类：class="layui-progresslayui-progress-big"<fieldsetclass="layui-elem-fieldlayui-field-title"style="margin-top:50px;"><legend>大尺寸进度条</legend></fieldset><divclass="layui-progresslayui-progress-big"><divclass="layui-progress-bar"lay-percent="20%"></div></div>显示文本的进度条大Div需要加入值lay-showpercent="true"<fieldsetclass="layui-elem-fieldlayui-field-title"style="margin:50px030px;"><legend>显示进度比文本</legend></fieldset><divclass="layui-progress"lay-showpercent="true"><divclass="layui-progress-bar"lay-percent="20%"></div></div><br><divclass="layui-progress"lay-showpercent="true"><divclass="layui-progress-bar"lay-percent="5/10"></div></div><br><divclass="layui-progresslayui-progress-big"lay-showpercent="true"><divclass="layui-progress-bar"lay-percent="70%"></div></div><br>正如你上述看到的，除了百分数，还支持分数（layui2.1.7新增）<br>大进度条文字显示在进度条内，小进度条在外面<script>//注意进度条依赖element模块，否则无法进行正常渲染和功能性操作layui.use(['element'],function(){});</script>动态进度条请查看官网
概述向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。官网：https://www.layui.com/doc/element/button.html使用<buttontype="button"class="layui-btn">一个标准的按钮</button><ahref="https://bigdataboy.cn"class="layui-btn">一个可跳转的按钮</a>主题不同颜色风格的按钮名称组合默认class=”layui-btn”原始class=”layui-btnlayui-btn-primary”百搭class=”layui-btnlayui-btn-normal”暖色class=”layui-btnlayui-btn-warm”警告class=”layui-btnlayui-btn-danger”禁用class=”layui-btnlayui-btn-disabled”尺寸按钮的大小样式尺寸组合默认class=”layui-btn”大型class=”layui-btnlayui-btn-lg”小型class=”layui-btnlayui-btn-sm”迷你class=”layui-btnlayui-btn-xs”特殊样式按钮的圆角，图标，流体按钮（最大化适应）样式组合默认class=”layui-btn”圆角class=”layui-btnlayui-btn-radius”图标class=”layui-btnlayui-icon”流体按钮class=”layui-btnlayui-btn-fluid”<divclass="layui-row"><buttontype="button"class="layui-btnlayui-btn-warm"><iclass="layui-icon"></i>添加</button><!--暖色图标按钮--><buttontype="button"class="layui-btnlayui-btn-warmlayui-iconlayui-icon-add-1">添加</button></div>按钮组按钮组与按钮容器的差别在于按钮之间的间距<!--按钮组包裹在layui-btn-group类中--><divclass="layui-btn-group"><buttontype="button"class="layui-btn">增加</button><buttontype="button"class="layui-btn">编辑</button><buttontype="button"class="layui-btn">删除</button></div>按钮容器按钮组与按钮容器的差别在于按钮之间的间距<!--按钮容器包裹在layui-btn-container类中--><divclass="layui-btn-container"><buttontype="button"class="layui-btn">按钮一</button><buttontype="button"class="layui-btn">按钮二</button><buttontype="button"class="layui-btn">按钮三</button></div>事件监听使用Jquery来为按钮添加各种事件<buttontype="button"id="btn"class="layui-btnlayui-btn-normal">圆形百搭按钮</button><script>var$=layui.jquery;$('#btn').click(function(){layer.alert("大数据男孩")})</script>
概述layui的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以把一个icon看作是一个普通的文字，这意味着你直接用css控制文字属性，如color、font-size，就可以改变图标的颜色和大小。你可以通过font-class或unicode来定义不同的图标。官网：https://www.layui.com/doc/element/icon.html<!--引入css--><linkrel="stylesheet"href="./layui/css/layui.css">使用注意：在layui2.3.0之前的版本，只能设置unicode来定义图标<iclass="layui-icon"></i><!--如果要单纯的显示--><iclass="layui-icon">&#xe68f;</i>从layui2.3.0开始，支持font-class的形式定义图标：<iclass="layui-iconlayui-icon-heart-fill"></i>
官网介绍由职业前端倾情打造，面向全层次的前后端开发者，低门槛开箱即用的前端UI解决方案下载地址：https://www.layui.com/下载文件介绍文件树├─css//css目录││─modules//模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）││├─laydate││├─layer││└─layim│└─layui.css//核心样式文件├─font//字体图标目录├─images//图片资源目录（目前只有layim和编辑器用到的GIF表情）│─lay//模块核心目录│└─modules//各模块组件│─layui.js//基础核心库└─layui.all.js//包含layui.js和所有模块的合并文件layUI的使用引入layUI的CSS和Js<head><metacharset="UTF-8"><title>Title</title><!--引入css--><linkrel="stylesheet"href="./layui/css/layui.css"><!--映入Js--><scriptsrc="./layui/layui.js"></script></head>两种模块化用法模块化用法（一般用于开发环境）<head><metacharset="UTF-8"><title>Title</title><!--引入css--><linkrel="stylesheet"href="./layui/css/layui.css"><!--模块化的用法导入的Js--><scriptsrc="./layui/layui.js"></script><!--模块化的用法--><script>layui.use(['layer',"form"],function(){//使用哪一个模块的功能就导入哪一个varlayer=layui.layer;layer.alert("大数据男孩")})</script></head>全模块用法（一般用于线上环境）<head><metacharset="UTF-8"><title>Title</title><!--引入css--><linkrel="stylesheet"href="./layui/css/layui.css"><!--全模块化的用法导入的Js--><scriptsrc="./layui/layui.all.js"></script><!--全模块化的用法--><script>//直接使用layer.alert("大数据男孩")</script></head>