基本元素

1.2.1按钮

1.2.1.1.用法

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

<!-- 
			按钮
				向任意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>

1.2.1.2.主题

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

1.2.1.3.尺寸

尺寸 组合
大型 class=“layui-btn layui-btn-lg”
默认 class=“layui-btn”
小型 class=“layui-btn bayui-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>

1.2.1.4.圆角

layui-btn-radius

<button class="layui-btn">默认按钮</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>

1.2.1.5图标

<button type="button" class="layui-btn">
	<i class="layui-icon-add-circle">&#e608;</i>添加
</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
	<i class="layui-icon">&#x1002;</i>刷新
</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
	<i class="layui-icon layui-icon-add-circle"></i>添加
</button>

1.2.2.导航

导航一般指页面引导性频道集合,多以菜单的形式呈现,可应用于头部和侧边.面包屑结构简单,支持自定义分隔符.

依赖加载模块：element

实现步骤:

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.显示指定类型的导航

1.2.2.1.水平导航

<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="#">解决方案</a>
         <dl class="layui-nav-child">
         	<dd><a href="#">移动模块</a></dd>
            <dd><a href="#">后台模块</a></dd>
            <dd><a href="#">电商平台</a></dd>
         </dl>
     </li>
</ul>

1.2.2.2.垂直/侧边导航

<ul class="layui-nav layui-nav-tree">
<!-- 侧边导航: java<ul class="layui-nav layui-nav-tree layui-nav-side">
	<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="#">解决方案</a>
		<dl class="layui-nav-child">
			<dd><a href="#">移动模块</a></dd>
			<dd><a href="#">后台模块</a></dd>
			<dd><a href="#">电商平台</a></dd>
		</dl>
	</li>
</ul> 

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

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

1.2.2.3.导航主题

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

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

水平导航支持的其他背景主题有: layui-bg-cyon(藏青)、layui-bg-molv(墨绿)、layui-bg-blue(艳蓝)

垂直导航支持的其他背景主题有: layui-bg-cyon(藏青)

1.2.2.4.面包屑

<!--设置属性 lay-separator="" 来自定义分隔符-->
		<span class="layui-breadcrumb" lay-separator="---">
		  <a href="">首页</a>
		  <a href="">国际新闻</a>
		  <a href="">亚太地区</a>
		  <a><cite>正文</cite></a>
		</span>

1.2.3.选项卡

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

依赖加载模块：element

1.2.3.1.实现步骤

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>

1.2.3.2.选项卡风格

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

1.2.3.3.带删除的选项卡

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

<div class="layui-tab layui-tab-card" 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>

1.2.4.表格

1.2.4.1.常规用法

<!-- 表格
        class="layui-table"
        常用属性 
            lay-even 如果设置了该属性,则可以显示隔行换色的效果
            lay-skin 设置表格边框风格
                line （行边框风格）
                row （列边框风格）
                nob （无边框风格）
            lay-size 设置表格的尺寸
                sm(小尺寸)
                lg(大尺寸)

-->
<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>

1.2.5表单

依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）

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>   

1.2.5.1.输入框

<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类

1.2.5.2.下拉选择框

<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标签都支持

  北京 上海（禁用效果） 杭州

• 可以通过 optgroup 标签给select分组

  请选择 你工作的第一个城市？ 你的工号？ 你最喜欢的老师？

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

  layer form layim

1.2.5.3.复选框

<div class="layui-form-item">
	<label class="layui-form-label">爱好</label>
	<div class="layui-input-block">
		<!-- 复选框
			1.通过title属性设置自定义文本(如果不需要显示文本,则不设置title属性)
			2.通过checked属性设置被选中的项
			3.通过lay-sjin属性设置复选框样式效果(lay-skin="primary"表示原始样式)
			4.通过disabled属性表示禁用效果
			5.设置value="1"可自定义值,否则选中时返回的就是默认的no
		-->
					
		<!-- 默认效果 -->
		<input type="checkbox" name="hobby" title="唱歌" checked="checked" value="sing"/>
		<input type="checkbox" name="hobby" title="跳舞" value="dance"/>
		<input type="checkbox" name="hobby" title="打球" disabled/>
		<hr/>
		<!-- 原始效果 -->
		<input type="checkbox" name="hobby" title="唱歌" lay-skin="primary" checked/>
		<input type="checkbox" name="hobby" title="跳舞" lay-skin="primary"/>
		<input type="checkbox" name="hobby" title="打球" lay-skin="primary"/>
	</div>
</div>

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

1.2.5.4.开关

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

<div class="layui-form-item">
	<label class="layui-form-label">开关</label>
	<div class="layui-input-block">
	<!-- 开关
			将复选框,设置lay-skin="switch"形成开关风格
			1.通过lay-text="打开的值|关闭的值"来设定开关的两种状态的文本,通过"|"分隔
			2.通过checked设置默认打开状态
			3.通过disabled属性禁用开关
			4.通过value属性设置选中的值
	-->

		<input type="checkbox" name="hobby" title="唱歌" lay-skin="switch" lay-text="打开|关闭" checked/>
		<input type="checkbox" name="hobby" title="跳舞" lay-skin="switch" lay-text="off|no"/>
		<input type="checkbox" name="hobby" title="打球" lay-skin="switch"/>
	</div>
</div>

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

1.2.5.5.单选框

<div class="layui-form-item">
	<label class="layui-form-label">性别</label>
		<div class="layui-input-block">
        <!-- 单选框 
                属性title可自定义文本
                属性disabled开启禁用
                设置value="xxx"可自定义值，否则选中时返回的就是默认的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>
    </div>
</div> 

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

1.2.5.6.文本域

<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>

• class=“layui-textarea”：layui.css提供的通用CSS类

1.2.5.7.组装行内表单

<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">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-inline" style="width: 100px;">
      <input type="password" name="" autocomplete="off" class="layui-input">
    </div>
  </div>
  
</div>

• class=“layui-inline”：定义外层行内
• class=“layui-input-inline”：定义内层行内

1.2.5.8.忽略美化渲染

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

<input type="radio" name="sex" value="nan" title="男" lay-ignore>

<select lay-ignore>
  <option>…</option>
</select>

一般不推荐这样做。事实上form组件所提供的接口，对其渲染过的元素，足以应付几乎所有的业务需求。如果忽略渲染，可能会让UI风格不和谐.

1.2.5.9.表单方框风格

通过追加 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>