layUI
- 需要从layui官网手动下载组件到目录下使用<link>调用其中./layui-v2.7.6/layui/css/layui.css文件使用<script>./layui-v2.7.6/layui/layui.js文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<link href="./layui-v2.7.6/layui/css/layui.css" rel="stylesheet">
<link rel="stylesheet" href="./class.css">
</head>
<body>
<script src="./layui-v2.7.6/layui/layui.js"></script>
</body>
栅格布局
- Layui 栅格系统是一套具备响应式能力的布局方案,采用业界比较常用的容器横向 12 等分规则,预设了 5*12 种 CSS 排列类,内置多种大小尺寸的多终端适配,能很好地实现响应式布局,这意味着一套系统,能同时适配于电脑的不同大小屏幕和手机、平板等移动屏幕,使得网页布局变得更加灵活,同时也极大地降低了 HTML/CSS 代码的耦合
等比例水平排列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<link href="css文件地址" rel="stylesheet">
</head>
<body>
<div class="layui-row">
<div class="layui-col-xs6">
<div class="grid-demo grid-demo-bg1">6/12</div>
</div>
<div class="layui-col-xs6">
<div class="grid-demo">6/12</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-xs3">
<div class="grid-demo grid-demo-bg1">3/12</div>
</div>
<div class="layui-col-xs3">
<div class="grid-demo">3/12</div>
</div>
<div class="layui-col-xs3">
<div class="grid-demo grid-demo-bg1">3/12</div>
</div>
<div class="layui-col-xs3">
<div class="grid-demo">3/12</div>
</div>
</div>
</body>
</html>
移动设备、平板、桌面的复杂组合响应式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<link href="css文件地址" rel="stylesheet">
</head>
<body>
<div class="layui-row">
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
<div class="grid-demo grid-demo-bg1">xs:6/12 | sm:6/12 | md:4/12</div>
</div>
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
<div class="grid-demo layui-bg-red">xs:6/12 | sm:6/12 | md:4/12</div>
</div>
<div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
<div class="grid-demo layui-bg-blue">xs:4/12 | sm:12/12 | md:4/12</div>
</div>
<div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
<div class="grid-demo layui-bg-green">xs:4/12 | sm:7/12 | md:8/12</div>
</div>
<div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
<div class="grid-demo layui-bg-black">xs:4/12 | sm:5/12 | md:4/12</div>
</div>
</div>
</body>
</html>
导航菜单
- 通过 class=“layui-nav” 设置导航容器
- 通过 class=“layui-nav-item” 设置导航菜单项
- 追加 className 为 layui-this 可设置菜单选中项
- 通过 class=“layui-nav-child” 设置导航子菜单项
- 追加 className 为 layui-nav-child-c 和 layui-nav-child-r 可设置子菜单居中和向右对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<link href="css文件地址" rel="stylesheet">
</head>
<body>
<ul class="layui-nav">
<li class="layui-nav-item layui-this"><a href="">选中</a></li>
<li class="layui-nav-item">
<a href="javascript:;">常规</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="">菜单1</a></dd>
<dd><a href="">菜单2</a></dd>
<dd><a href="">菜单3</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">选项</a>
<dl class="layui-nav-child">
<dd><a href="">选项1</a></dd>
<dd class="layui-this"><a href="">选项2</a></dd>
<dd><a href="">选项3</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">演示</a></li>
</ul>
<script src="js文件地址"></script>
</body>
</html>
轮播
- 轮播组件 carousel 主要适用于跑马灯/轮播等交互场景。它并非单纯地为焦点图而生,准确地说,它可以满足任何内容的轮播式切换操作,亦可胜任 fullpage(全屏上下轮播)的需求。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<link href="css文件地址" rel="stylesheet">
</head>
<body>
<div class="layui-carousel" id="ID-carousel-demo-1">
<div carousel-item>
<div>条目1</div>
<div>条目2</div>
<div>条目3</div>
<div>条目4</div>
<div>条目5</div>
</div>
</div>
<hr class="ws-space-16">
<div class="layui-carousel" id="ID-carousel-demo-2">
<div carousel-item>
<div>条目1</div>
<div>条目2</div>
</div>
</div>
<script src="js文件地址"></script>
<script>
layui.use(function(){
var carousel = layui.carousel;
// 渲染 - 常规轮播
carousel.render({
elem: '#ID-carousel-demo-1',
width: 'auto'
});
// 渲染 - 设置时间间隔、动画类型、宽高度等属性
carousel.render({
elem: '#ID-carousel-demo-2',
interval: 1800,
anim: 'fade',
width: 'auto',
height: '120px'
});
});
</script>
</body>
</html>
表单
- 表单组件form是包含输入框、选择框、复选框、开关、单选框等表单项组件的集合,主要用于对表单域进行各类动态化渲染和相关的交互操作。form是 Layui 最常用的组件之一。
登入模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
<link href="css文件地址" rel="stylesheet">
</head>
<body>
<style>
.demo-login-container{width: 320px; margin: 21px auto 0;}
.demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
</style>
<form class="layui-form">
<div class="demo-login-container">
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-password"></i>
</div>
<input type="password" name="password" value="" lay-verify="required" placeholder="密 码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
</div>
</div>
<div class="layui-form-item">
<div class="layui-row">
<div class="layui-col-xs7">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-vercode"></i>
</div>
<input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-col-xs5">
<div style="margin-left: 10px;">
<img src="https://www.oschina.net/action/user/captcha" οnclick="this.src='https://www.oschina.net/action/user/captcha?t='+ new Date().getTime();">
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
<a href="#forget" style="float: right; margin-top: 7px;">忘记密码?</a>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
</div>
<div class="layui-form-item demo-login-other">
<label>社交账号登录</label>
<span style="padding: 0 21px 0 6px;">
<a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
<a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
<a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
</span>
或 <a href="#reg">注册帐号</a>
</div>
</div>
</form>
<script src="js文件地址"></script>
<script>
layui.use(function(){
var form = layui.form;
var layer = layui.layer;
// 提交事件
form.on('submit(demo-login)', function(data){
var field = data.field; // 获取表单字段值
// 显示填写结果,仅作演示用
layer.alert(JSON.stringify(field), {
title: '当前填写的字段值'
});
// 此处可执行 Ajax 等操作
// …
return false; // 阻止默认 form 跳转
});
});
</script>
</body>
</html>