基本元素
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">ဂ</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标签都支持
<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>
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>
扫一扫
1338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
