layui 按钮知识

作者:神秘网友 发布时间:2021-01-30 20:20:08

layui按钮知识

本课内容:

1.普通按钮类:layui-btn 基础类(别的各种按钮都是在这个类后面添加类)

2.按钮主题:在layui-btn后面加按钮主题的类

3.按钮尺寸:在layui-btn后面添加按钮尺寸的类

实用例子

4.圆角按钮类:layui-btn layui-radius

5.带图标的按钮:原理在按钮里面加一个i标签

6.按钮组:layui-btn-group将按钮放入一个class="layui-btn-group"元素中，即可形成按钮组，按钮本身仍然可以随意搭配

7.按钮容器:layui-btn-container 作用(也是和按钮组之间的区别)：放在按钮容器中的按钮之间有空格

1.普通按钮类使用例子  type有三种选择:button reset submit
　　button type="button" class="layui-btn"普通按钮/button
2.圆角按钮类的例子   圆角按钮和普通按钮的属性通用
　　button type="button" class="layui-btn layui-btn圆角按钮/button
3.带图标的按钮例子
　　button type="button" class="layui-btn"
　　i class="layui-icon layui-icon-face-smile"/i
　　/button
4.可跳转的按钮
　　a class="layui-btn"可跳转的按钮/a
5.按钮组
　　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
6.按钮容器例子
　　div class="layui-btn-container"

	button type="button" class="layui-btn"增加/button
	button type="button" class="layui-btn"编辑/button
	button type="button" class="layui-btn"删除/button
　　/div

尺寸

大型按钮默认按钮小型按钮迷你按钮

大型百搭正常暖色小型警告禁用

流体按钮（最大化适应） 流体按钮（最大化适应）

codelayui.code

2. button type="button" class="layui-btn layui-btn-fluid"流体按钮（最大化适应）/button

圆角

原始按钮默认按钮百搭按钮暖色按钮警告按钮禁用按钮

大型百搭小型警告迷你禁用

哈哈哈哈哈，这组合名长得简直没朋友~

图标

添加?

??

结构layui.code

1. button type="button" class="layui-btn"
2. i class="layui-icon"#xe608;/i 添加
3. /button
5. button type="button" class="layui-btn layui-btn-sm layui-btn-primary"
6. i class="layui-icon"#x1002;/i
7. /button

温馨提示：各种图标字体请移步文档左侧【页面元素 - 图标】阅览

按钮组

增加编辑删除  

将按钮放入一个class="layui-btn-group"元素中，即可形成按钮组，按钮本身仍然可以随意搭配

结构layui.code

1. div class="layui-btn-group"
2. button type="button" class="layui-btn"增加/button
3. button type="button" class="layui-btn"编辑/button
4. button type="button" class="layui-btn"删除/button
5. /div
7. div class="layui-btn-group"
8. button type="button" class="layui-btn layui-btn-sm"
9. i class="layui-icon"#xe654;/i
10. /button
11. button type="button" class="layui-btn layui-btn-sm"
12. i class="layui-icon"#xe642;/i
13. /button
14. button type="button" class="layui-btn layui-btn-sm"
15. i class="layui-icon"#xe640;/i
16. /button
17. button type="button" class="layui-btn layui-btn-sm"
18. i class="layui-icon"#xe602;/i
19. /button
20. /div
22. div class="layui-btn-group"
23. button type="button" class="layui-btn layui-btn-primary layui-btn-sm"
24. i class="layui-icon"#xe654;/i
25. /button
26. button type="button" class="layui-btn layui-btn-primary layui-btn-sm"
27. i class="layui-icon"#xe642;/i
28. /button
29. button type="button" class="layui-btn layui-btn-primary layui-btn-sm"
30. i class="layui-icon"#xe640;/i
31. /button
32. /div

按钮容器

尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器

按钮一按钮二按钮三按钮四按钮五按钮六按钮一按钮二按钮三按钮四按钮五按钮六按钮一按钮二按钮三按钮四按钮五按钮六按钮一按钮二

codelayui.code

1. div class="layui-btn-container"
2. button type="button" class="layui-btn"按钮一/button
3. button type="button" class="layui-btn"按钮二/button
4. button type="button" class="layui-btn"按钮三/button
5. /div

结语