当前位置： 代码迷 >> 综合 >> LayUi 的基本使用步骤
  详细解决方案

LayUi 的基本使用步骤

热度：110   发布时间：2023-11-10 21:19:45.0

使用步骤

第一步：下载

https://www.layui.com/

第二步：导入
把下载的解压缩，然后把整个文件拷贝到工程目录下。然后再 head 标签引入（这里要看是引用 js 还是 css）

<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/>

按钮

要先写基础类名 “layui-btn” ，后面再添加其他样式，才好看。并且按钮都可以组合使用。

普通类型按钮

  • layui-btn
    • 默认样式
  • layui-btn-danger
    • 危险动作按钮
  • layui-btn-primary
    • 原始按钮样式
  • layui-btn-normal
    • 百搭按钮

示例：

   	<button class="layui-btn layui-btn-warm">按钮</button>

标识尺寸类按钮

  • layui-btn-lg
    • 制作一个大按钮
  • layui-btn-sm
    • 制作一个小按钮
  • layui-btn-xs
    • 制作一个超小按钮

示例（可以与之前的普通按钮混合）：

    <!-- 制作一个大的危险按钮 --><button class="layui-btn layui-btn-lg layui-btn-danger">按钮</button> class="btn">按钮</button>

标识状态按钮类名

  • layui-btn-disabled
    • 不可点击的样式
  • layui-btn-fluid
    • 流体按钮（最大化的适应）

示例：

    制作一个迷你的禁用按钮<button class="layui-btn layui-btn-xs layui-btn-disabled"> 按钮 </button>

圆角按钮

  • layui-btn-radius
    • 制作一个圆角按钮

图标按钮

  • layui-icon
    • 制作一个图标按钮

“类名 layui-icon ”最好写在 button 标签中所包含的标签，z中间标签文字是编码文字。如下：

<button class="layui-btn"><span class="layui-icon">&#xe608</span>按钮
</button>

按钮组（可以清除按钮之间的空隙）

<div class="layui-btn-group"><button class="layui-btn layui-btn-primary">按钮</button><button class="layui-btn layui-btn-danger">按钮</button>
</div>

表格

注意，这里也是要先写明 layui-table 基础样式

类名

  • layui-table
    • 为 table 定义基础样式

属性

  • lay-even
    • 无属性值
    • 用于开启隔行背景，可以与其他属性一起使用
  • lay-skin=""
    • 属性值：line（行边框风格，也就是水平方向有边框，以下同理），row（列边框风格），nob（无边框风格）
  • lay-size=""
    • 属性值：sm（小尺寸），lg（大尺寸）

示例：

<table class="layui-table" lay-even lay-skin="row line" lay-size="sm"><tr><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td></tr></table>

其他

  • <colgroup>
    • 标签用于对表格中的列进行组合，以便对其进行格式化。
    • 如需对全部列应用样式， 标签很有用，这样就不需要对各个单元和各行重复应用样式了。
    • <colgroup width="100px"></colgroup> 将所有表格的宽度定位 100px

分页

先导入 js 和 CSS （这里按需调用模块）

<!-- 引入css及js文件 -->
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui.js"></script>

html 样式

<!-- html应用体 --><div id="page"></div>

调用

<script>//laypage分页内置模块layui.use('laypage',function(){//回调函数第一步var laypage = layui.laypage;//回调函数第二步渲染//elem代表渲染的元素//,limits:[5,6,20] currentlaypage.render({elem:"page",count:50,limit:6,curr:1,groups:6,prev:"<b>previous</b>",next:"<b>next</b>",first:"首页",last:"尾页",theme:"#000"})})</script>
  • elem :
    • 需要渲染的元素
    • 固定写法
  • count :
    • 数据总数
    • 每页十个元素
  • limit:
    • 每页显示的条数
  • limits:
    • 下拉选项，用于快捷跳过第几页
  • groups:
    • 连续出现的页码数
  • curr:
    • 起始页
  • prev:
    • 自定义“上一页”的内容
  • next:
    • 自定义“下一页”的内容
  • first:
    • 自定义首页内容
  • last:
    • 自定义尾页的内容
  • theme:
    • 自定义主题颜色：
  • hash:

栅格系统

layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统。我们将容器进行了 12 等分，预设了 4*12 种 CSS 排列类

  • layui-container\
    • 基础类名
  • layui-row
    • 用来定义行
  • layui-col-md*
    • 定义列，并且要放在 row 中
    • xs 小屏幕，如手机
    • sm 平板
    • md 桌面中等屏幕
    • lg 桌面大型屏幕
  • layui-col-md-offset*
    • 列偏移
  • 栅格嵌套
    • 在列元素（layui-col-md*）中插入一个行元素（layui-row）
  • layui-col-space5
    -取值 1 ~ 10
  • 兼容 IE 8/9
    -打补丁，导入 js 文件（html5.min.js，respond.min.js）

响应式公共类

类名 说明
layui-show-*-block 定义不同设备下的 display:block；* 的可选值有：xs、sm、md、lg
layui-show-*-inline 定义不同设备下的 display:line；* 的可选值有：xs、sm、md、lg
layui-show-*-inline-block 定义不同设备下的 display:inline-block；* 的可选值有：xs、sm、md、lg
layui-hide-* 定义不同设备下的 display:none；* 的可选值有：xs、sm、md、lg

示例：（基本样式）

	<!-- layui栅格核心 --><div class="layui-container"><div class="layui-row"><div class="layui-col-xs6 layui-col-md3"><div class="layui-col-space5" style="background:red; color:#fff;">第一等份</div></div><div class="layui-col-xs3 layui-col-md6"><div class="layui-col-space5" style="background:green; color:#fff;">第二等份</div></div><div class="layui-col-xs3 layui-col-md3"><div class="layui-col-space5" style="background:blue; color:#fff">第三等份</div></div></div></div>

示例：（响应公共类）

<!-- layui-show-md-block:在md这种尺寸下显示为block layui-hide-sm：在sm这种尺寸下隐藏起来 --><div class="layui-container" style="margin:20px;"><div class="layui-row"><div class="layui-col-xs6 layui-col-md3" style="background:red; color:#fff;">第一等份</div><div class="layui-col-xs3 layui-col-md6 layui-col-md-offset3" style="background:green; color:#fff;">第二等份</div><div class="layui-col-xs3 layui-col-md3 layui-show-sm-inline layui-hide-md" style="background:blue; color:#fff">第三等份</div></div></div>

轮播图

第一步：导入 css 文件

<link rel="stylesheet" href="layui/css/layui.css">

第二步：Html 结构

<div id="demo" class="layui-carousel auto"><div carousel-item><div><img src="1.jpg" alt=""><p>文字描述图片一</p></div><div><img src="2.jpg" alt=""><p>文字描述图片二</p></div><div><img src="3.jpg" alt=""><p>文字描述图片三</p></div></div>
</div>

第三步：js 文件

<script src="layui/layui.js"></script>

第四步：js 代码

layui.use("carousel",function(){var carousel = layui.carousel;carousel.render({elem:"#demo",width:"500px",height:"175px",arrow:"always",anim:"fade",//indicator:"none",trigger:"click"})});
  • elem：
    • Id 的名称
  • width：
    • 宽度
  • height：
    • 高度
  • arrow：
    • 箭头显示状态
    • hover 悬停显示
    • always 总是显示
    • none 始终不显示
  • anim：
    • default: 默认切换
    • updown 上下切换
    • fade：淡入淡出
  • full:
    • 是否全屏轮播
  • autoplay
    • 是否自动切换
  • interval
    • 播放事件
  • indicator：
    • 指示器位置
    • inside 容器内部
    • outside 容器外部
    • none 不显示
  • trigger：指示器触发事件

弹出层

第一步：导入css和js文件

<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

第二步： 导入弹出层

layui.use("layer",function(){var layer = layui.layer;
//layer.msg(名不能为空");layer.open({content:'用户名不能为空',	title:"<span style='color:red'>提示</span>",			area:"500px",offset:["100px","100px"],icon:2,btnAlign:'c',shade:.7,shadeClose:true,time:5000,anim:6})})
  • var lay = layui.layer;
  • lay.msg(“dd”);
  • lay.open()
  • type - 基本层类型
  • title - 标题
  • content - 内容
  • area - 宽高
  • offset - 坐标
  • icon - 图标。信息框和加载层的私有参数
  • btnAlign - 按钮排列
  • shadeClose - 是否点击遮罩关闭
  • time - 自动关闭所需毫秒
  • id - 用于控制弹层唯一标识
  • anim - 弹出动画

轮播图

第一步：导入css文件

	<link rel="stylesheet" href="layui/css/layui.css">

第二步：HTML结构

	<div id="demo" class="layui-carousel auto"><div carousel-item><div><img src="1.jpg" alt=""><p>文字描述图片一</p></div><div><img src="2.jpg" alt=""><p>文字描述图片二</p></div><div><img src="3.jpg" alt=""><p>文字描述图片三</p></div></div></div>

第三步：js文件

	<script src="layui/layui.js"></script><script>layui.use("carousel",function(){var carousel = layui.carousel;carousel.render({elem:"#demo",width:"500px",height:"175px",arrow:"always",anim:"fade",//indicator:"none",trigger:"click"})})</script>

导航

水平导航

水平导航：
<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来指向当前页面分类。
  • layui.use(‘element’,function(){})

导航中的其他元素

导航中的其它元素
除了一般的文字导航，我们还内置了图片和徽章的支持
<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>
  • 导航主题
    • layui-bg-cyan（藏青）
    • layui-bg-molv（墨绿）
    • layui-bg-blue（艳蓝）
  • 垂直导航
    • layui-nav-tree
  • 侧边导航
    • layui-nav-tree layui-nav-side
  • 导航可选属性
    • lay-shrink
    • lay-unselect

面包屑导航

<span class="layui-breadcrumb"><a href="">首页</a><a href="">国际新闻</a><a href="">亚太地区</a><a><cite>正文</cite></a>
</span>
  • 自定义分隔符
    • lay-separator="-"

tab 选项卡

默认

默认Tab选项卡
<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>
  • 简洁风
    • layui-tab-brief
  • 卡片风
    • layui-tab-card
  • 带删除的 tab
    • lay-allowClose=“true”

动画

  • layui-anim
<button class="layui-btn layui-btn-danger"><span class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></span>加载中</button>

其中 layui-anim 是必须的，后面跟着的即是不同的动画类。
内置CSS3动画一览表

layui-anim-up / layui-anim-upbit / layui-anim-scale / layui-anim-scaleSpring / layui-anim-fadein / layui-anim-fadeout / layui-anim-rotate / 追加：layui-anim-loop
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.