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:各种类型可叠加:
<button class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm">圆角百搭小型按钮</button>
PS:流体按钮:
<button class="layui-btn layui-btn-fluid">流体按钮(最大化适应)</button>
PS:链接按钮:
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
总结只要类设置了layui-btn就是个按钮
按钮组:
将按钮放入一个class="layui-btn-group"元素中,即可形成按钮组,按钮本身仍然可以随意搭配
<div class="layui-btn-group">
<button class="layui-btn">增加</button>
<button class="layui-btn">编辑</button>
<button class="layui-btn">删除</button>
</div>
图标 :按钮里可设置图标区分功能
更多图标见:https://www.layui.com/doc/element/icon.html
通过对一个内联元素(一般推荐用 i标签)设定 class="layui-icon",来定义一个图标,然后对元素加上图标对应的 font-class
<button class="layui-btn">
//两种方法
<i class="layui-icon"></i> 赞
<i class="layui-icon" class="layui-icon-praise"></i> 赞
</button>
自定义它的颜色或者大小,大小要注意不能大于父元素
<button class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon" style="color: red;font-size: 30px;"></i>
</button>
按钮容器
<div class="layui-btn-container">
<button class="layui-btn">按钮一</button>
<button class="layui-btn">按钮二</button>
<button class="layui-btn">按钮三</button>
</div>