- 必要样式 layui-btn
- 主题样式
-
大小样式
-
图标结合
- 圆角样式
- 按钮组
- 事件监听
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>按钮</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
</head>
<body>
<fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;">
<legend>按钮主题</legend>
<div>
<button type="button" class="layui-btn layui-btn-primary">原始按钮</button>
<button type="button" class="layui-btn">默认按钮</button>
<button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
<button type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
<button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
<button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
</div>
</fieldset>
<fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;">
<legend>按钮大小</legend>
<div>
<button type="button" class="layui-btn layui-btn-lg">最大按钮</button>
<button type="button" class="layui-btn">默认按钮</button>
<button type="button" class="layui-btn layui-btn-sm ">小型按钮</button>
<button type="button" class="layui-btn layui-btn-xs">微型按钮</button>
<button type="button" class="layui-btn layui-btn-xs layui-btn-danger">微型警告按钮</button>
</div>
</fieldset>
<fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;">
<legend>图标按钮</legend>
<div>
<button type="button" class="layui-btn layui-icon layui-icon-rate-half"> </button>
<button type="button" class="layui-btn layui-icon layui-icon-cellphone">手机按钮</button>
<button type="button" class="layui-btn layui-icon"> <span class="layui-icon"></span>手机按钮</button>
</div>
</fieldset>
<fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;">
<legend>圆角按钮</legend>
<div>
<button type="button" class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
<button type="button" class="layui-btn layui-btn-radius" >默认按钮</button>
<button type="button" class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
<button type="button" class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
<button type="button" class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
<button type="button" class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
</div>
</fieldset>
<fieldset class="layui-elem-field site-demo-button">
<legend>按钮组</legend>
<div class="layui-btn-group">
<button type="button" class="layui-btn" id="add">增加</button>
<button type="button" class="layui-btn " id="update">编辑</button>
<button type="button" class="layui-btn" id="delete">删除</button>
</div>
</fieldset>
<script src="resources/layui/layui.js"></script>
<script type="text/javascript">
layui.use(["jquery"],function(){
var $=layui.jquery;
/* $(".layui-btn").click(function(){
alert($(this).html())
}) */
$("#add").click(function(){
alert($(this).html())
})
})
</script>
</body>
</html>
