layui页面元素使用(一)

目录:
    1.页面元素控件的清单
    2.每个控件的使用方法
   
1.页面元素控件的清单   
 layui页面元素使用(一)_第1张图片
 2.每个控件的使用方法
    2.1 字体图标
           1) 在内链元素中设置  class="layui-icon"  然后设置图标的Unicode编码即可显示图标,图标的颜色和大小设置方法和css设置字体样式一致,下面是图标对应的Unicode编码表:  
 layui页面元素使用(一)_第2张图片layui页面元素使用(一)_第3张图片
 
         2)简单代码示例
                
 
    
  1. class="layui-icon" style="font-size: 30px; color: #1E9FFF;">
  
   2.2 按钮
        常用按钮的class名使用如下代码:
 
     
  1. class="layui-main" style="margin-top: 20px">
  2. 主题按钮



  3. class="layui-btn">默认按钮
  4. class="layui-btn layui-btn-primary">原始按钮
  5. class="layui-btn layui-btn-normal">百搭按钮
  6. class="layui-btn layui-btn-warm">暖色按钮
  7. class="layui-btn layui-btn-danger">警告按钮
  8. class="layui-btn layui-btn-disabled">禁用按钮
  • class="layui-main" style="margin-top: 20px">
  • 按钮尺寸



  • class="layui-btn layui-btn-warm layui-btn-mini">迷你按钮
  • class="layui-btn layui-btn-warm layui-btn-small">小型按钮
  • class="layui-btn layui-btn-warm">常规按钮
  • class="layui-btn layui-btn-warm layui-btn-big">大型按钮
  • class="layui-main" style="margin-top: 20px">
  • 按钮圆角



  • class="layui-btn layui-btn-danger layui-btn-radius">警告圆角按钮
  • class="layui-btn layui-btn-primary layui-btn-radius">原始圆角按钮
  • class="layui-btn layui-btn-normal layui-btn-radius">普通圆角按钮
  • class="layui-btn layui-btn-warm layui-btn-radius">暖色圆角按钮
  • class="layui-btn layui-btn-mini layui-btn-danger layui-btn-radius">警告圆角按钮
  • class="layui-main" style="margin-top: 20px">
  • 图标按钮



  • class="layui-btn layui-btn-warm "> class="layui-icon">
  • class="layui-btn layui-btn-danger "> class="layui-icon">
  • class="layui-btn layui-btn-warm "> class="layui-icon">
  • class="layui-btn layui-btn-normal "> class="layui-icon">
  • class="layui-btn layui-btn-primary "> class="layui-icon">刷新
  • class="layui-main" style="margin-top: 20px">
  • 按钮组合



  • class="layui-btn-group">
  • class="layui-btn">增加
  • class="layui-btn">编辑
  • class="layui-btn">删除
  • class="layui-btn-group">
  • class="layui-btn layui-btn-small">
  • class="layui-icon">
  • class="layui-btn layui-btn-small">
  • class="layui-icon">
  • class="layui-btn layui-btn-small">
  • class="layui-icon">
  • class="layui-btn layui-btn-small">
  • class="layui-icon">
  • class="layui-btn-group">
  • class="layui-btn layui-btn-primary layui-btn-small">
  • class="layui-icon">
  • class="layui-btn layui-btn-primary layui-btn-small">
  • class="layui-icon">
  • class="layui-btn layui-btn-primary layui-btn-small">
  • class="layui-icon">
  •         显示效果:
      layui页面元素使用(一)_第4张图片

        2.3 表单
    layui页面元素使用(一)_第5张图片
     
                常用表单的layui设置代码如下:
    
    
    
        
        
    
        
        
        
        
    
    
    

    输入框



    辅助文字

    下拉选择框



    复选框



    单选按钮



    开关



    文本域





    显示效果截图:
    layui页面元素使用(一)_第6张图片

        其他属性设置:
             lay-ignore:设置忽略layui样式,不建议设置
             layui-form-pane:form表单上设置该值,可以改变表单显示样式
           class="layui-inline":定义外层行内 
           class="layui-input-inline":定义内层行内
     

     
           参考链接: http://www.layui.com/doc/

    你可能感兴趣的:(layui页面元素使用(一))