wangxinglong
/
caipan_shop_admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
caipan_shop_admin/public/static/layuimini/page/button.html

148 lines
9.5 KiB
JavaScript
Executable File
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="../css/public.css" media="all">
<style>
.site-demo-button{margin: 10px 0 10px 0}
</style>
</head>
<body>
<div class="layuimini-container">
<div class="layuimini-main">
<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">
<legend>按钮尺寸</legend>
<div>
<button type="button" class="layui-btn layui-btn-primary layui-btn-lg">大型按钮</button>
<button type="button" class="layui-btn layui-btn-primary">默认按钮</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">小型按钮</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮</button>
<br>
<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>
<br>
<button type="button" class="layui-btn layui-btn-lg layui-btn-normal">大型按钮</button>
<button type="button" class="layui-btn layui-btn-normal">默认按钮</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal">小型按钮</button>
<button type="button" class="layui-btn layui-btn-xs layui-btn-normal">迷你按钮</button>
<br>
<div style="width: 216px; margin: 0;">
<button type="button" class="layui-btn layui-btn-fluid">流体按钮</button>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field site-demo-button">
<legend>灵活的图标按钮（更多图标请阅览：文档-图标）</legend>
<div>
<button type="button" class="layui-btn"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn"><i class="layui-icon"></i></button>
<br>
<button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
<br>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
</div>
</fieldset>
<fieldset class="layui-elem-field site-demo-button">
<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>
<button type="button" class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius">大型加圆角</button>
<a href="http://www.layui.com/doc/element/button.html" class="layui-btn" target="_blank">跳转的按钮</a>
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon"></i> 删除</button>
<button type="button" class="layui-btn layui-btn-xs layui-btn-disabled"><i class="layui-icon"></i> 分享</button>
</div>
</fieldset>
<fieldset class="layui-elem-field site-demo-button">
<legend>按钮组</legend>
<div class="layui-btn-group">
<button type="button" class="layui-btn">增加</button>
<button type="button" class="layui-btn ">编辑</button>
<button type="button" class="layui-btn">删除</button>
</div>
<div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
</div>
<div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">文字</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
</div>
</fieldset>
</div>
</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink