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

//两种方法 赞 自定义它的颜色或者大小,大小要注意不能大于父元素 按钮容器
<div class="layui-btn-container">
  <button class="layui-btn">按钮一</button> 
  <button class="layui-btn">按钮二</button> 
  <button class="layui-btn">按钮三</button> 
</div>
 
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值