本节课我们来开始了解
Layui
自带的按钮和按钮组功能。
一.按钮
1.
创建一个按钮最基本的用法为:
layui-btn
;
<button class="layui-btn">按钮</button>
2.
再加上相关颜色定义,则可以设置按钮颜色或功能:
layui-btn-x
;
<button class="layui-btn layui-btn-primary">按钮</button>
<button class="layui-btn layui-btn-normal">按钮</button>
<button class="layui-btn layui-btn-warm">按钮</button>
<button class="layui-btn layui-btn-danger">按钮</button>
<button class="layui-btn layui-btn-disabled">按钮</button>
3.
除了默认的大小,还可以设置其它三种大小方案;
<button class="layui-btn layui-btn-lg">按钮</button>
<button class="layui-btn layui-btn-sm">按钮</button>
<button class="layui-btn layui-btn-xs">按钮</button>
4.
支持
100%
流体按钮;
<button class="layui-btn layui-btn-fluid">按钮</button>
5.
支持圆角按钮;
<button class="layui-btn layui-btn-radius">按钮</button>
6.
给按钮加上图标;
<button class="layui-btn">
<i class="layui-icon layui-icon-user"></i>按钮
</button>
7.
按钮组;
<div class="layui-btn-group">
<button class="layui-btn">增加</button>
<button class="layui-btn">删除</button>
<button class="layui-btn">修改</button>
<button class="layui-btn">
<i class="layui-icon layui-icon-add-1"></i></button>
<button class="layui-btn">
<i class="layui-icon layui-icon-delete"></i></button>
<button class="layui-btn">
<i class="layui-icon layui-icon-edit"></i></button>
</div>
8.
按钮容器,合理的间隔,包括垂直和水平;
<div class="layui-btn-container">
<button class="layui-btn">按钮</button>
<button class="layui-btn">按钮</button>
<button class="layui-btn">按钮</button>
<button class="layui-btn">按钮</button>
<button class="layui-btn">按钮</button>
</div>