LayUI入门基础篇2（乐字节架构、大数据）

基本元素

如果需要更多资料点击下方图片加好友领取⬇（注明来意）

按钮

用法

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



一个可跳转的按钮
一个按钮

主题

名称	组合
原始	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"

圆角

layui-btn-radius

图标

选项卡

导航菜单可应用于头部和侧边，支持响应式，支持删除选项卡等功能。

依赖加载模块：element

实现步骤

引入的资源

依赖加载模块

加载HTML


  
    网站设置
    用户管理
    权限分配
    商品管理
    订单管理
  
  
    内容1
    内容2
    内容3
    内容4
    内容5

选项卡风格

默认风格：layui-tab
简洁风格需要追加class：layui-tab-brief
卡片风格需要追加class：layui-tab-card

带删除的选项卡

可以对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除


  
    网站设置
    用户管理
    权限分配
    商品管理
    订单管理
  
  
    内容1
    内容2
    内容3
    内容4
    内容5

表格

常规用法


  
    
    
    
  
  
    
      昵称
      加入时间
      签名
     
  
  
    
      贤心
      2016-11-29
      人生就像是一场修行
    
    
      许闲心
      2016-11-28
      于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…

昵称	加入时间	签名
贤心	2016-11-29	人生就像是一场修行
许闲心	2016-11-28	于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…

基础属性

属性名	属性值	备注
lay-even	无	用于开启隔行背景，可与其它属性一起使用
lay-skin="属性值"	line （行边框风格） row （列边框风格） nob （无边框风格）	若使用默认风格不设置该属性即可
lay-size="属性值"	sm （小尺寸） lg （大尺寸）	若使用默认尺寸不设置该属性即可

你所需要的基础属性写在table标签上，例如：



  
    
    
    
  
  
    
      昵称
      加入时间
      签名
     
  
  
    
      贤心
      2016-11-29
      人生就像是一场修行
    
    
      许闲心
      2016-11-28
      于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…

昵称	加入时间	签名
贤心	2016-11-29	人生就像是一场修行
许闲心	2016-11-28	于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…

表单

依赖加载模块：form

在一个容器中设定 class="layui-form" 来标识一个表单元素块
```
    
```
基本的行区块结构，它提供了响应式的支持。可以换成其他结构，但必须要在外层容器中定义class="layui-form"，form模块才能正常工作。
```
      标签区域
      
        原始表单元素区域
      
```

输入框

required：注册浏览器所规定的必填字段
lay-verify：注册form模块需要验证的类型
class="layui-input"：layui.css提供的通用CSS类

下拉选择框

属性selected可设定默认项
属性disabled开启禁用，select和option标签都支持

可以通过 optgroup 标签给select分组

通过设定属性 lay-search 来开启搜索匹配功能

复选框

默认风格：

 
 
 
原始风格：

属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
属性checked可设定默认选中
属性lay-skin可设置复选框的风格（原始风格：lay-skin="primary"）
设置value="1"可自定义值，否则选中时返回的就是默认的on

开关

将复选框checkbox，通过设定 lay-skin="switch" 形成了开关风格

属性checked可设定默认开
属性disabled开启禁用
属性lay-text可自定义开关两种状态的文本（两种文本用 "|" 隔开）
设置value="1"可自定义值，否则选中时返回的就是默认的on

单选框

属性title可自定义文本
属性disabled开启禁用
设置value="xxx"可自定义值，否则选中时返回的就是默认的on

文本域

class="layui-textarea"：layui.css提供的通用CSS类

组装行内表单

class="layui-inline"：定义外层行内
class="layui-input-inline"：定义内层行内

忽略美化渲染

可以对表单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格。

表单方框风格

通过追加 layui-form-pane 的class，来设定表单的方框风格。


  
  
    单选框

LayUI入门基础篇2（乐字节架构、大数据）

基本元素

按钮

用法

主题

尺寸

圆角

图标

导航

水平导航

垂直/侧边导航

导航主题

面包屑

选项卡