layui按钮知识

本课内容:

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

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

名称	组合
原始	class="layui-btn layui-btn-primary"
默认	class="layui-btn"
百搭	class="layui-btn layui-btn-normal"
暖色	class="layui-btn layui-btn-warm"
警告	class="layui-btn layui-btn-danger"
禁用	class="layui-btn layui-btn-disabled"

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

尺寸	组合
大型	class="layui-btn layui-btn-lg"
默认	class="layui-btn"
小型	class="layui-btn layui-btn-sm"
迷你	class="layui-btn layui-btn-xs"

实用例子

尺寸	组合
大型百搭	class="layui-btn layui-btn-lg layui-btn-normal"
正常暖色	class="layui-btn layui-btn-warm"
小型警告	class="layui-btn layui-btn-sm layui-btn-danger"
迷你禁用	class="layui-btn layui-btn-xs layui-btn-disabled"

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>

　　

名称	组合
原始	class="layui-btn layui-btn-primary"
默认	class="layui-btn"
百搭	class="layui-btn layui-btn-normal"
暖色	class="layui-btn layui-btn-warm"
警告	class="layui-btn layui-btn-danger"
禁用	class="layui-btn layui-btn-disabled"

尺寸

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

尺寸	组合
大型	class="layui-btn layui-btn-lg"
默认	class="layui-btn"
小型	class="layui-btn layui-btn-sm"
迷你	class="layui-btn layui-btn-xs"

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

尺寸	组合
大型百搭	class="layui-btn layui-btn-lg layui-btn-normal"
正常暖色	class="layui-btn layui-btn-warm"
小型警告	class="layui-btn layui-btn-sm layui-btn-danger"
迷你禁用	class="layui-btn layui-btn-xs layui-btn-disabled"

流体按钮（最大化适应）

流体按钮（最大化适应）

codelayui.code

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

圆角

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

主题	组合
原始	class="layui-btn layui-btn-radius layui-btn-primary"
默认	class="layui-btn layui-btn-radius"
百搭	class="layui-btn layui-btn-radius layui-btn-normal"
暖色	class="layui-btn layui-btn-radius layui-btn-warm"
警告	class="layui-btn layui-btn-radius layui-btn-danger"
禁用	class="layui-btn layui-btn-radius layui-btn-disabled"

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

尺寸	组合
大型百搭	class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal"
小型警告	class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger"
迷你禁用	class="layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled"

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

图标

 添加 ဂ     

ဂ      ဂ    

结构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>

结语

你是否发现，主题、尺寸、图标、圆角的交叉组合，可以形成难以计算的按钮种类。另外，你可能最关注的是配色，Layui内置的六种主题的按钮颜色都是业界常用的标准配色，如果他们仍然无法与你的网站契合，那么请先允许我“噗”一声。。。然后你就大胆地自撸一个颜色吧！比如：粉红色或者菊花色（一个有味道的颜色）

layui - 用心与你沟通