• 章节:20
  • 访问:845
  • 时长:00:02:45
  • 日期:2020-06-12 08:55

向任意HTML元素设定class="layui-btn",建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。

内置的按钮class可以进行任意组合,从而形成更多种按钮风格。

<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>

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

大型 class="layui-btn layui-btn-lg"

默认 class="layui-btn"

小型 class="layui-btn layui-btn-sm"

迷你 class="layui-btn layui-btn-xs"

圆角

class="layui-btn layui-btn-radius"

搭配图标使用

<button type="button" class="layui-btn">
  <i class="layui-icon"></i> 添加
</button>
 
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
  <i class="layui-icon">ဂ</i>
</button>

按钮组

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

<div class="layui-btn-group">
  <button type="button" class="layui-btn">增加</button>
  <button type="button" class="layui-btn">编辑</button>
  <button type="button" class="layui-btn">删除</button>
</div>
      
<div class="layui-btn-group">
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
</div>
 
<div class="layui-btn-group">
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
</div>

按钮容器

尽管按钮在同节点并排时会自动拉开间距,但在按钮太多的情况,效果并不是很美好。因为你需要用到按钮容器

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