LayUI入门基础篇2（乐字节架构、大数据）
基本元素
如果需要更多资料点击下方图片加好友领取⬇（注明来意）
按钮
用法
向任意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">i> 添加
button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon">ဂi> 刷新
button>导航
导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边。面包屑结构简单，支持自定义分隔符。
依赖加载模块：element
实现步骤：
-
引入的资源
<link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js">script> -
依赖加载模块
<script type="text/javascript"> // 注意：导航 依赖 element 模块，否则无法进行功能性操作 layui.use('element', function(){ var element = layui.element; }); script> -
显示指定类型的导航
水平导航
<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" >
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默认展开a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">选项1a>dd>
<dd><a href="javascript:;">选项2a>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>选项卡
导航菜单可应用于头部和侧边，支持响应式，支持删除选项卡等功能。
依赖加载模块：element
实现步骤
-
引入的资源
<link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js">script> -
依赖加载模块
<script type="text/javascript"> // 注意：选项卡 依赖 element 模块，否则无法进行功能性操作 layui.use('element', function(){ var element = layui.element; }); script> -
加载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">内容1div> <div class="layui-tab-item">内容2div> <div class="layui-tab-item">内容3div> <div class="layui-tab-item">内容4div> <div class="layui-tab-item">内容5div> 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">内容1div>
<div class="layui-tab-item">内容2div>
<div class="layui-tab-item">内容3div>
<div class="layui-tab-item">内容4div>
<div class="layui-tab-item">内容5div>
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-29td>
<td>人生就像是一场修行td>
tr>
<tr>
<td>许闲心td>
<td>2016-11-28td>
<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-29td>
<td>人生就像是一场修行td>
tr>
<tr>
<td>许闲心td>
<td>2016-11-28td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…td>
tr>
tbody>
table>表单
依赖加载模块：form
-
在一个容器中设定 class=“layui-form” 来标识一个表单元素块
<form class="layui-form" action=""> form> -
基本的行区块结构，它提供了响应式的支持。可以换成其他结构，但必须要在外层容器中定义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">layeroption>
<option value="021">formoption>
<option value="0571" selected>layimoption>
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="">
<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>