按钮 图标 表单 容器
<html>
<head>
<meta content="text/html;charset=UTF-8"/>
<script type="text/javascript" src="layui-v2.3.0/layui/layui.js"></script>
<link rel="stylesheet" href="layui-v2.3.0/layui/css/layui.css">
<style>
i{color: #1E9FFF;}
</style>
</head>
<body>
<!--
[
xs超小屏幕
,sm小屏幕
,md中等屏幕
,lg大型屏幕
]
layui-container容器（宽度限制）
-->
<!--
layui-fluid:铺满
-->
<div class="layui-container">
<!--row行-->
<div class="layui-row">
<!--
[
layui-col-xs3
,layui-col-sm3
,layui-col-md3
]
xs移动 sm平板 md桌面
-->
<div class="layui-col-md12">
<i class="layui-icon"></i><i class="layui-icon layui-icon-face-smile"></i>
<i class="layui-icon"></i><i class="layui-icon layui-icon-read"></i>
<i class="layui-icon"></i><i class="layui-icon layui-icon-edit"></i>
<i class="layui-icon"></i><i class="layui-icon layui-icon-delete"></i>
<i class="layui-icon"></i><i class="layui-icon layui-icon-form"></i>
<i class="layui-icon"></i><i class="layui-icon layui-icon-search"></i>
<i class="layui-icon"></i><i class="layui-icon layui-icon-component"></i>
<i class="layui-icon"></i><i class="layui-icon layui-icon-home"></i>
<i class="layui-icon"></i><i class="layui-icon layui-icon-refresh"></i>
<i class="layui-icon"></i><i class="layui-icon layui-icon-ok"></i>
<i class="layui-icon">ဆ</i><i class="layui-icon layui-icon-close"></i>
<i class="layui-icon"></i><i class="layui-icon layui-icon-app"></i>
<i class="layui-icon"></i><i class="layui-icon layui-icon-fire"></i>
</div>
<div class="layui-col-md3" style="background-color:#FFB800">占用3/12</div>
<div class="layui-col-md9" style="background-color:#009688">占用9/12</div>
<div class="layui-col-md6" style="background-color:#FF5722">占用6/12</div>
<div class="layui-col-md6" style="background-color:#2F4056">占用6/12</div>
<div class="layui-col-md9" style="background-color:#01AAED">占用9/12</div>
<div class="layui-col-md3" style="background-color:#5FB878">占用3/12</div>
<div class="layui-col-md12" style="background-color:#393D49">占用12/12</div>
</div>
</div>
<div class="layui-fluid">
<!--layui-btn-lg大型 layui-btn-sm小型 layui-btn-xs迷你-->
<button class="layui-btn"><i class="layui-icon layui-icon-read"></i></button>
<button class="layui-btn"><i class="layui-icon layui-icon-edit"></i></button>
<button class="layui-btn"><i class="layui-icon layui-icon-fire"></i></button>
<button class="layui-btn"><i class="layui-icon layui-icon-app"></i></button>
<button class="layui-btn"><i class="layui-icon layui-icon-ok"></i></button>
<button class="layui-btn"><i class="layui-icon layui-icon-form"></i></button>
<button class="layui-btn"><i class="layui-icon layui-icon-search"></i></button>
<button class="layui-btn"><i class="layui-icon layui-icon-close"></i></button>
<button class="layui-btn ">标准按钮</button>
<button class="layui-btn layui-btn-warm">暖色按钮</button>
<button class="layui-btn layui-btn-danger">警告按钮</button>
<button class="layui-btn layui-btn-disabled">禁用按钮</button>
<a href="http://www.baidu.com" class="layui-btn layui-btn-normal">链接按钮</a>
<button class="layui-btn layui-btn-xs">迷你按钮</button>
<button class="layui-btn layui-btn-sm">小型按钮</button>
<button class="layui-btn">正常按钮</button>
<button class="layui-btn layui-btn-lg">大型按钮</button>
<button class="layui-btn layui-btn-fluid">流体按钮</button>
<!--layui-btn-group:按钮组-->
<div class="layui-btn-group">
<button class="layui-btn">增加</button>
<button class="layui-btn">编辑</button>
<button class="layui-btn">删除</button>
</div>
<div class="layui-btn-group">
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
</div>
<div class="layui-btn-group">
<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
</div>
</div>
<div class="layui-container">
<div class="layui-col-md6">
<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">
<input type="radio" name="sex" value="男" title="男" checked>
<input type="radio" name="sex" value="女" title="女">
</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>
</div>
</div>
</body>
<script>
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
//消息提示框
layer.msg('Hello World');
//监听提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
//===============================
var requestData = JSON.stringify(data.field);
layer.msg(JSON.stringify(requestData));
//===============================
return false;//阻止action跳转
});
});
</script>
</html>
1143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
