深圳全飞鸿

标题: layui的a和input的button按钮形态 [打印本页]
作者: zhgc    时间: 2023-3-26 21:36
标题: layui的a和input的button按钮形态
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    时间: 2023-3-26 22:33

按钮
向任意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    时间: 2023-3-26 22:37

将按钮放入一个*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>
复制代码






欢迎光临 深圳全飞鸿 (http://www.nagomes.com/disc/) Powered by Discuz! X3.2