技术支持
Layui常用标签速查总结
Layui是个轻量前端框架,不用搭复杂的开发环境,引个css和js就能用呢。它所谓的“常用标签”,本质是封装好特定样式和功能的class类,套在原生HTML标签上就行,不用自己写一堆css和基础js。
先说布局类,是所有页面都要用到的。
layui-container给外层div加,自动居中,自带左右边距,适配电脑手机不同屏幕,不用写媒体查询。
栅格用layui-row加layui-col-md*组合,一行默认分12份。比如要做三栏布局,就写三个div加layui-col-md4,全塞在带layui-row的div里,自动对齐,不会错位。要做响应式就换xs/sm/lg的后缀,对应不同屏幕尺寸,不用自己调浮动、flex属性。
然后是表单类,日常开发用得最多。
首先form标签必须加layui-form,不然所有表单样式都不生效。
输入框给input加layui-input,自带圆角、内边距,聚焦时有蓝边高亮,不用自己调样式。
下拉框给select加layui-select,自动替换原生的丑下拉,带搜索功能,选项多的时候直接搜,不用写额外插件。
单选、复选框分别给对应的input加layui-radio、layui-checkbox,自带选中动画,样式统一,不会在不同浏览器里变样。
按钮给button加layui-btn,默认蓝色圆角。要小按钮就加layui-btn-sm,要红色删除按钮加layui-btn-danger,要镂空样式加layui-btn-primary,不用自己写背景色、边框代码。
接下来是导航类,做后台系统必用。
做顶部导航或者侧边栏,给ul加layui-nav。每个导航项是li,加layui-nav-item,当前选中的项加layui-this,自动高亮。要做二级下拉导航,就在li里再套个dl,加layui-nav-child,鼠标放上去自动展开,不用写hover的js逻辑。
最后呢是展示类,省得自己调容器样式。
做卡片、信息块,给div加layui-card,自带阴影、内边距、圆角,直接往里面塞就行,不用调边框边距。
做数据表格给table标签加layui-table,自动把原生表格改成隔行变色、带边框的样式,要加排序、分页功能的话,再配几行js就搞定。
所有效果生效的前提,是你提前引好了layui的css和js文件,版本尽量选2.x的稳定版,不要用测试版。平时做个小后台、工具页面,这些标签够应付80%的场景,记不住也没关系,用的时候翻官方文档复制对应class就行,比自己从零写样式快很多。



