根本元素

            
              如果须要更多材料点击下方图片加好友支付⬇（注明来意）
                   

按钮

用法

向任意HTML元素设定class="layui-btn"，建设一个根底按钮。通过追加格局为layui-btn-{type}的class来定义其它按钮格调。

<!-- 根底按钮 --><button type="button" class="layui-btn">一个规范的按钮</button><a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a><div class="layui-btn">一个按钮</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"

示例：

<!-- 不同主题的按钮 --><button class="layui-btn">默认按钮</button><button class="layui-btn layui-btn-primary">原始按钮</button> <button class="layui-btn layui-btn-normal">百搭按钮</button><button class="layui-btn layui-btn-warm">寒色按钮</button><button class="layui-btn layui-btn-danger">正告按钮</button><button class="layui-btn layui-btn-disabled">禁用按钮</button>
尺寸
尺寸组合
大型class="layui-btn layui-btn-lg"
默认class="layui-btn"
小型class="layui-btn layui-btn-sm"
迷你class="layui-btn layui-btn-xs"
<!-- 不同尺寸的按钮 --><button class="layui-btn layui-btn-primary layui-btn-lg">大型</button> <button class="layui-btn">默认</button><button class="layui-btn layui-btn-sm layui-btn-danger">小型</button><button class="layui-btn layui-btn-xs">迷你</button>
圆角

layui-btn-radius

<button class="layui-btn layui-btn-radius">默认按钮</button><button class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button> <button class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button><button class="layui-btn layui-btn-warm layui-btn-radius">寒色按钮</button><button class="layui-btn layui-btn-danger layui-btn-radius">正告按钮</button><button class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
图标
<button type="button" class="layui-btn">    <i class="layui-icon">&#xe608;</i> 增加</button><button type="button" class="layui-btn layui-btn-sm layui-btn-primary">    <i class="layui-icon">&#x1002;</i> 刷新</button>

导航

导航个别指页面引导性频道汇合，多以菜单的模式出现，可利用于头部和侧边。面包屑构造简略，反对自定义分隔符。

<font color="red">依赖加载模块：element</font>

实现步骤：

  1. 引入的资源

    <link rel="stylesheet" href="layui/css/layui.css"><script src="layui/layui.js"></script>

  2. 依赖加载模块

    <script type="text/javascript">    // 留神：导航 依赖 element 模块，否则无奈进行功能性操作    layui.use('element', function(){        var element = layui.element;    });</script>
  3. 显示指定类型的导航
程度导航
<ul class="layui-nav">    <li class="layui-nav-item"><a href="">最新流动</a></li>    <li class="layui-nav-item layui-this"><a href="">产品</a></li>    <li class="layui-nav-item"><a href="">大数据</a></li>    <li class="layui-nav-item">        <a href="javascript:;">解决方案</a>        <dl class="layui-nav-child"> <!-- 二级菜单 -->            <dd><a href="">挪动模块</a></dd>            <dd><a href="">后盾模版</a></dd>            <dd><a href="">电商平台</a></dd>        </dl>    </li>    <li class="layui-nav-item"><a href="">社区</a></li></ul>
垂直/侧边导航
<ul class="layui-nav layui-nav-tree" ><!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->  <li class="layui-nav-item layui-nav-itemed">    <a href="javascript:;">默认开展</a>    <dl class="layui-nav-child">      <dd><a href="javascript:;">选项1</a></dd>      <dd><a href="javascript:;">选项2</a></dd>      <dd><a href="">跳转</a></dd>    </dl>  </li>  <li class="layui-nav-item">    <a href="javascript:;">解决方案</a>    <dl class="layui-nav-child">      <dd><a href="">挪动模块</a></dd>      <dd><a href="">后盾模版</a></dd>      <dd><a href="">电商平台</a></dd>    </dl>  </li>  <li class="layui-nav-item"><a href="">产品</a></li>  <li class="layui-nav-item"><a href="">大数据</a></li></ul>

程度、垂直、侧边三个导航的HTML构造是齐全一样的，不同的是：

程度导航：layui-nav垂直导航须要追加class：layui-nav-tree侧边导航须要追加class：layui-nav-tree layui-nav-side
导航主题

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

<!-- 如定义一个墨绿背景色的导航 --><ul class="layui-nav layui-bg-move" >  …</ul>

程度导航反对的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）
垂直导航反对的其它背景主题有：layui-bg-cyan（藏青）

面包屑
<span class="layui-breadcrumb">  <a href="">首页</a>  <a href="">国内新闻</a>  <a href="">亚太地区</a>  <a><cite>注释</cite></a></span>

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

<span class="layui-breadcrumb" lay-separator="-">  <a href="">首页</a>  <a href="">国内新闻</a>  <a href="">亚太地区</a>  <a><cite>注释</cite></a></span>

选项卡

导航菜单可利用于头部和侧边，反对响应式，反对删除选项卡等性能。

<font color="red">依赖加载模块：element</font>

实现步骤

  1. 引入的资源

    <link rel="stylesheet" href="layui/css/layui.css"><script src="layui/layui.js"></script>

  2. 依赖加载模块

    <script type="text/javascript">    // 留神：选项卡 依赖 element 模块，否则无奈进行功能性操作    layui.use('element', function(){        var element = layui.element;    });</script>

  3. 加载HTML

    <div class="layui-tab">  <ul class="layui-tab-title">    <li class="layui-this">网站设置</li>    <li>用户治理</li>    <li>权限调配</li>    <li>商品治理</li>    <li>订单治理</li>  </ul>  <div class="layui-tab-content">    <div class="layui-tab-item layui-show">内容1</div>    <div class="layui-tab-item">内容2</div>    <div class="layui-tab-item">内容3</div>    <div class="layui-tab-item">内容4</div>    <div class="layui-tab-item">内容5</div>  </div></div>
选项卡格调
默认格调：layui-tab简洁格调须要追加class：layui-tab-brief卡片格调须要追加class：layui-tab-card
带删除的选项卡

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

<div class="layui-tab" lay-allowClose="true">  <ul class="layui-tab-title">    <li class="layui-this">网站设置</li>    <li>用户治理</li>    <li>权限调配</li>    <li>商品治理</li>    <li>订单治理</li>  </ul>  <div class="layui-tab-content">    <div class="layui-tab-item layui-show">内容1</div>    <div class="layui-tab-item">内容2</div>    <div class="layui-tab-item">内容3</div>    <div class="layui-tab-item">内容4</div>    <div class="layui-tab-item">内容5</div>  </div></div>

表格

惯例用法
<table class="layui-table">  <colgroup>    <col width="150">    <col width="200">    <col>  </colgroup>  <thead>    <tr>      <th>昵称</th>      <th>退出工夫</th>      <th>签名</th>    </tr>   </thead>  <tbody>    <tr>      <td>贤心</td>      <td>2016-11-29</td>      <td>人生就像是一场修行</td>    </tr>    <tr>      <td>许闲心</td>      <td>2016-11-28</td>      <td>于千万人之中遇见你所遇见的人，于千万年之中，工夫的无涯的荒野里…</td>    </tr>  </tbody></table>
根底属性
属性名属性值备注
lay-even无用于开启 隔行 背景，可与其它属性一起应用
lay-skin="属性值"line （行边框格调）
row （列边框格调）
nob （无边框格调）		若应用默认格调不设置该属性即可
lay-size="属性值"sm （小尺寸）
lg （大尺寸）		若应用默认尺寸不设置该属性即可

你所须要的根底属性写在table标签上，例如：

<!-- 一个带有隔行背景，且行边框格调的大尺寸表格 --><table class="layui-table" lay-even lay-size="lg" lay-skin="row">  <colgroup>    <col width="150">    <col width="200">    <col>  </colgroup>  <thead>    <tr>      <th>昵称</th>      <th>退出工夫</th>      <th>签名</th>    </tr>   </thead>  <tbody>    <tr>      <td>贤心</td>      <td>2016-11-29</td>      <td>人生就像是一场修行</td>    </tr>    <tr>      <td>许闲心</td>      <td>2016-11-28</td>      <td>于千万人之中遇见你所遇见的人，于千万年之中，工夫的无涯的荒野里…</td>    </tr>  </tbody></table>

表单

<font color="red">依赖加载模块：form </font>

  1. 在一个容器中设定 class="layui-form" 来标识一个表单元素块

    <form class="layui-form" action="">    </form>

  2. 根本的行区块构造，它提供了响应式的反对。能够换成其余构造，但必须要在外层容器中定义class="layui-form"，form模块能力失常工作。

    <div class="layui-form-item">      <label class="layui-form-label">标签区域</label>      <div class="layui-input-block">        原始表单元素区域      </div></div>
输入框
<input type="text" name="title" required lay-verify="required" placeholder="请输出题目" autocomplete="off" class="layui-input" />
  • required：注册浏览器所规定的必填字段
  • lay-verify：注册form模块须要验证的类型
  • class="layui-input"：layui.css提供的通用CSS类
下拉抉择框
<select name="city" lay-verify="">  <option value="">请抉择一个城市</option>  <option value="010">北京</option>  <option value="021">上海</option>  <option value="0571">杭州</option></select>
  • 属性selected可设定默认项
  • 属性disabled开启禁用，select和option标签都反对
<select name="city" lay-verify="">  <option value="010">北京</option>  <option value="021" disabled>上海（禁用成果）</option>  <option value="0571" selected>杭州</option></select>
  • 能够通过 optgroup 标签给select分组
<select name="quiz">  <option value="">请抉择</option>  <optgroup label="城市记忆">    <option value="你工作的第一个城市">你工作的第一个城市？</option>  </optgroup>  <optgroup label="学生时代">    <option value="你的工号">你的工号？</option>    <option value="你最喜爱的老师">你最喜爱的老师？</option>  </optgroup></select>
  • 通过设定属性 lay-search 来开启搜寻匹配性能
<select name="city" lay-verify="" lay-search>  <option value="010">layer</option>  <option value="021">form</option>  <option value="0571" selected>layim</option></select>
复选框
<h2>默认格调：</h2><input type="checkbox" name="" title="写作" checked><input type="checkbox" name="" title="发愣"> <input type="checkbox" name="" title="禁用" disabled>  <h2>原始格调：</h2><input type="checkbox" name="" title="写作" lay-skin="primary" checked><input type="checkbox" name="" title="发愣" lay-skin="primary"> <input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
  • 属性title可自定义文本（舒适提醒：如果只想显示复选框，能够不必设置title）
  • 属性checked可设定默认选中
  • 属性lay-skin可设置复选框的格调 （原始格调：lay-skin="primary"）
  • 设置value="1"可自定义值，否则选中时返回的就是默认的on
开关

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

<input type="checkbox" name="xxx" lay-skin="switch"><input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked><input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|敞开"><input type="checkbox" name="aaa" lay-skin="switch" disabled>
  • 属性checked可设定默认开
  • 属性disabled开启禁用
  • 属性lay-text可自定义开关两种状态的文本 （两种文本用 "|" 隔开）
  • 设置value="1"可自定义值，否则选中时返回的就是默认的on
单选框
<input type="radio" name="sex" value="nan" title="男"><input type="radio" name="sex" value="nv" title="女" checked><input type="radio" name="sex" value="" title="中性" disabled>
  • 属性title可自定义文本
  • 属性disabled开启禁用
  • 设置value="xxx"可自定义值，否则选中时返回的就是默认的on
文本域
<textarea name="remark" required lay-verify="required" placeholder="请输出集体介绍" class="layui-textarea"></textarea>
  • class="layui-textarea"：layui.css提供的通用CSS类
组装行内表单
<div class="layui-form-item">    <div class="layui-inline">        <label class="layui-form-label">范畴</label>        <div class="layui-input-inline" style="width: 100px;">          <input type="text" name="price_min" placeholder="￥"                  autocomplete="off" class="layui-input">        </div>        <div class="layui-form-mid">-</div>        <div class="layui-input-inline" style="width: 100px;">          <input type="text" name="price_max" placeholder="￥"                  autocomplete="off" class="layui-input">        </div>    </div></div>
  • class="layui-inline"：定义外层行内
  • class="layui-input-inline"：定义内层行内
疏忽丑化渲染

能够对表单元素减少属性 lay-ignore 设置后，将不会对该标签进行丑化渲染，即保留零碎格调。

<input type="radio" name="sex" value="nan" title="男" lay-ignore>
表单方框格调

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

<form class="layui-form layui-form-pane" action="">  <!--         内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该格调下须要额定增加 pane属性（否则        会看起来比拟顺当），如：   -->  <div class="layui-form-item" pane>    <label class="layui-form-label">单选框</label>    <div class="layui-input-block">      <input type="radio" name="sex" value="男" title="男">      <input type="radio" name="sex" value="女" title="女" checked>    </div>  </div></form>