layui的a和input的button按钮形态

zhgc

layui的a和input的button按钮形态

1. <p>本模板基于layui2.5.4以及font-awesome-4.7.0进行实现。layui开发文档地址：<a class="layui-btn layui-btn-xs layui-btn-danger" target="_blank" href="http://www.layui.com/doc">layui文档</a></p>

复制代码

zhgc

按钮
向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为*layui-btn-{type}*的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

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

复制代码

主题
原始        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”

1. <button class="layui-btn">默认按钮</button>
   
2. <button class="layui-btn layui-btn-primary">原始按钮</button>
   
3. <button class="layui-btn layui-btn-normal">百搭按钮</button>
   
4. <button class="layui-btn layui-btn-warm">暖色按钮</button>
   
5. <button class="layui-btn layui-btn-danger">警告按钮</button>
   
6. <button class="layui-btn layui-btn-disabled">禁用按钮</button>

复制代码

尺寸[color=rgba(0, 0, 0, 0.75)]

尺寸

组合

大型

class=“layui-btn layui-btn-lg”

默认

class=“layui-btn”

小型

class=“layui-btn layui-btn-sm”

迷你

class=“layui-btn layui-btn-xs”

1. <button class="layui-btn layui-btn-normal layui-btn-xs">超小型</button>
   
2. <button class="layui-btn layui-btn-warm layui-btn-sm">小型</button>
   
3. <button class="layui-btn layui-btn-danger layui-btn-normal">默认</button>
   
4. <button class="layui-btn layui-btn-disabled layui-btn-lg">大型</button>

复制代码

圆角

layui-btn-radius

1. <button class="layui-btn layui-btn-radius layui-btn-primary layui-btn-xs">原始超小型圆角按钮</button>
   
2. <button class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm">百搭小型圆角按钮</button>
   
3. <button class="layui-btn layui-btn-radius layui-btn-warm">暖色正常圆角按钮</button>
   
4. <button class="layui-btn layui-btn-radius layui-btn-danger layui-btn-lg">警告超大型圆角按钮</button>

复制代码

图标

1. <button type="button" class="layui-btn layui-btn-primary">
   
2.     <i class="layui-icon layui-icon-logout layui-font-16"></i> 退出/注销
   
3. </button>
   
4. <button type="button" class="layui-btn layui-btn-normal">
   
5.     <i class="layui-icon layui-icon-home layui-font-16"></i> 主页
   
6. </button>

复制代码

zhgc

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

1. <div class="layui-btn-group">
   
2.     <button class="layui-btn layui-btn-primary layui-btn-sm">
   
3.         <i class="layui-icon layui-font-16">?</i> 编辑
   
4.     </button>
   
5.     <button class="layui-btn layui-btn-primary layui-btn-sm">
   
6.         <i class="layui-icon layui-font-16">?</i> 分享
   
7.     </button>
   
8.     <button class="layui-btn layui-btn-primary layui-btn-sm">
   
9.         <i class="layui-icon layui-font-16">?</i> 删除
   
10.     </button>
    
11. </div>

复制代码