layui按钮总结

                                          layui按钮总结

按钮类设置:class="layui-btn" ;不设置其它任何二级类名就是普通按钮

1   主题类 :layui-btn-primary 原始主题。

原始 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"

2   尺寸 layui-btn-lg 大型

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

3   圆角  layui-btn-radius

主题 组合
原始 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"

 PS:各种类型可叠加:

PS:流体按钮:

PS:链接按钮:

一个可跳转的按钮

总结只要类设置了layui-btn就是个按钮

按钮组:

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

图标 :按钮里可设置图标区分功能

 更多图标见:https://www.layui.com/doc/element/icon.html

通过对一个内联元素(一般推荐用 i标签)设定 class="layui-icon",来定义一个图标,然后对元素加上图标对应的 font-class 

 自定义它的颜色或者大小,大小要注意不能大于父元素

按钮容器

 

你可能感兴趣的:(layui)