基本元素

按钮

用法

​ 向任意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

实现步骤：

  1. 引入的资源

  2. 依赖加载模块

  3. 显示指定类型的导航
水平导航
垂直/侧边导航

水平、垂直、侧边三个导航的HTML结构是完全一样的，不同的是：

水平导航：layui-nav
垂直导航需要追加class：layui-nav-tree
侧边导航需要追加class：layui-nav-tree layui-nav-side
导航主题

​ 通过对导航追加CSS背景类，让导航呈现不同的主题色



    
  …

水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）
垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）

面包屑

  首页
  国际新闻
  亚太地区
  正文

你还可以通过设置属性 lay-separator="" 来自定义分隔符。例如：


  首页
  国际新闻
  亚太地区
  正文

选项卡

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

​ 依赖加载模块：element

实现步骤

  1. 引入的资源

  2. 依赖加载模块

  3. 加载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
      于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…
基础属性
属性名 属性值 备注
lay-even 无 用于开启 隔行 背景，可与其它属性一起使用
lay-skin="属性值" line （行边框风格）
row （列边框风格）
nob （无边框风格）		 若使用默认风格不设置该属性即可
lay-size="属性值" sm （小尺寸）
lg （大尺寸）		 若使用默认尺寸不设置该属性即可

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




  
    
    
    
  
  
    

      昵称
      加入时间
      签名
    
 
  
  
    

      贤心
      2016-11-29
      人生就像是一场修行
    

    

      许闲心
      2016-11-28
      于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…