-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
Copy pathbutton.html
148 lines (134 loc) · 9.5 KB
/
button.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!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>