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>

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

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

<button class="layui-btn">
//两种方法
  <i class="layui-icon">&#xe6c6;</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;">&#xe6c6;</i>
</button>

按钮容器

<div class="layui-btn-container">
  <button class="layui-btn">按钮一</button> 
  <button class="layui-btn">按钮二</button> 
  <button class="layui-btn">按钮三</button> 
</div>

layui按钮总结

layui按钮总结

猜你喜欢