layui - 页面元素
亢建木
参考：https://www.layui.com/doc/base/element.html
内容包括：css (即已定义样式的class)、HTML (即一些layui自定义的属性)
细分为：布局、颜色、图标、动画、按钮、表单、导航、选项卡、进度条、面板、表格、徽章、时间线、辅助
概括：
css规范：
css内置公共类(已定义内置样式的类名class)：(部分常用)
布局 / 容器：
layui-main 用于设置一个宽度为 1140px 的水平居中块（无响应式）
layui-inline 用于将标签设为内联块状元素
layui-box 用于排除一些UI框架（如Bootstrap）强制将全部元素设为box-sizing: border-box所引发的尺寸偏差
layui-clear 用于消除浮动（一般不怎么常用，因为layui几乎没用到浮动）
layui-btn-container 用于定义按钮的父容器。（layui 2.2.5 新增）
layui-btn-fluid 用于定义流体按钮。即宽度最大化适应。（layui 2.2.5 新增）
辅助：
layui-icon 用于图标
layui-elip 用于单行文本溢出省略
layui-unselect 用于屏蔽选中
layui-disabled 用于设置元素不可点击状态
layui-circle 用于设置元素为圆形
layui-show 用于显示块状元素
layui-hide 用于隐藏元素
文本：
layui-text 定义一段文本区域（如文章），该区域内的特殊标签（如a、li、em等）将会进行相应处理
layui-word-aux 灰色标注性文字，左右会有间隔
背景色（layui内置7种背景色）：
layui-bg-red 用于设置元素赤色背景
layui-bg-orange 用于设置元素橙色背景
layui-bg-green 用于设置元素墨绿色背景（主色调）
layui-bg-cyan 用于设置元素藏青色背景
layui-bg-blue 用于设置元素蓝色背景
layui-bg-black 用于设置元素经典黑色背景
layui-bg-gray 用于设置元素经典灰色背景
若需要自行定义一些样式请参考内置css class命名使class命名遵循一定规范，
命名格式一般分为两种：一：layui-模块名-状态或类型，二：layui-状态或类型，但请勿占用Layui已经命名好的类。
HTML规范：
结构：使用layui元素模块时请严格遵守其相应HTML结构，否则可能导致其功能失效（标签、类名）
公共属性：以 lay- 为前缀的自定义属性，各模块需要用到的详见官网介绍，常用(普遍运用于所有元素上的)属性如：
lay-skin=" " 定义相同元素的不同风格，如checkbox的开关风格
lay-filter=" " 事件过滤器，一般用于监听特定的自定义事件，可视为一个ID选择器
lay-submit 定义一个触发表单提交的button，不用填写值
layui页面元素包括：
<!-- -->
布局 栅格 / 后台布局
栅格：
布局规则：
lay-row 定义行，如 <div class="layui-row"></div>
layui-col-md* 定义一组列(column) 放在行(row)中，md表示不同屏幕下的标记(见响应式规则)，*可选值1-12，*总和 =12刚好排满列 >12则另起一行
列可以同时出现最多4种不同组合，即 xs、sm、md、lg，分别详见响应式规则
layui-col-space5、layui-col-md-offset3 类似的预设类可定义列的间距和偏移
在列(column)中可放入任意内容
布局容器：
class="layui-container" 将栅格放入容器 在小屏幕以上的设备中固定宽度让列可控 <div class="layui-container"><div class="layui-row">...</div></div>
class="layui-fluid" 将栅格或其他元素放入容器 不固定宽度而是100%适应 <div class="layui-fluid">...</div>
响应式规则：（ * 取值1-12 即列宽为*列 每列宽度为容器宽度的1/12 总列数均为12）
超小屏幕 手机<768px .layui-container的值为auto 标记xs 列对应类 layui-col-xs* 响应式行为 始终按设定的比例水平排列
小屏幕 平板>=768px .layui-container的值为750px 标记sm 列对应类 layui-col-sm* 响应式行为 在当前屏幕下水平排列-当屏幕大小低于临界值则堆叠排列
中等屏幕 桌面>=992px .layui-container的值为970px 标记md 列对应类 layui-col-md* 响应式行为 在当前屏幕下水平排列-当屏幕大小低于临界值则堆叠排列
大型屏幕 桌面>=1200px .layui-container的值为1170px 标记lg 列对应类 layui-col-lg* 响应式行为 在当前屏幕下水平排列-当屏幕大小低于临界值则堆叠排列
响应式公共类： * 可选值 xs、sm、md、lg
layui-show-*-block 定义不同设备下的 display:block;
layui-show-*-inline 定义不同设备下的 display:inline;
layui-show-*-inline-block 定义不同设备下的 display:inline-block;
layui-hide-* 定义不同设备下的隐藏类，即 display:none;
列间距：layui-col-space* 间距 *px *取值1-30的所有双数以及 1 5 15 25
列偏移：layui-col-md-offset* 使列向右偏移*列 (每列宽度1/12容器宽度)
嵌套：理论上可以对栅格进行无限嵌套，如在列(layui-col-md)中插入一个行元素(layui-row)
<div class="layui-row layui-col-space5"><div class="layui-col-md5"><div class="layui-row"><div class="layui-col-md3">内部列</div></div></div></div>
兼容：栅格的响应式能力得益于css3的媒体查询(Media Queries)，但IE8/9不支持媒体查询，可以使用以下补丁(来自开源社区,布丁可放在<body>任意位置)使之兼容--
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
后台布局：layui既可编织出绚丽的前台页面，又可满足繁杂的后台功能需求（官网提供后台现场方案 https://www.layui.com/doc/element/layout.html#admin 可供参考）
<!-- -->
颜色 主题色设计感 / 内置背景色
主题色设计感可参考官网提供的一些示例及layuiAdmin。layui还内置7种背景色（见css内置公共类）
<!-- -->
图标 字体图标
<i class="layui-icon layui-icon-face-smile" style="font-size:30px;color:#1E9FFF;"></i>
类 layui-icon 为必须，layui-icon-face-smile 为笑脸图标，此处style设置图标大小和颜色，
layui2.3.0起支持font-class的形式定义图标，这之前只能用unicode来定义图标：
<i class="layui-icon"></i>
图标参考：https://www.layui.com/doc/element/icon.html#table
跨域问题：由于浏览器存在同源策略，所以如果 layui（里面含图标字体文件）所在的地址与当前页面地址不在同一个域下会出现图标跨域问题。
所以要么把 layui 与网站放在同一服务器，要么就对 layui 所在资源服务器的 Response Headers 加上属性：Access-Control-Allow-Origin: *
<!-- -->
动画 内置 CSS3 动画
<div class="layui-anim layui-anim-up"></div> 其中 layui-anim 是必须的 后面跟着的即是不同的动画类
<div class="layui-anim layui-anim-up layui-anim-loop"></div> 循环动画，追加：layui-anim-loop
内置css3动画：
layui-anim-up 从最底部往上滑入 layui-anim-upbit 微微往上滑入
layui-anim-scale 平滑放大 layui-anim-scaleSpring 弹簧式放大
layui-anim-fadein 渐现 layui-anim-fadeout 渐隐
layui-anim-rotate 360度旋转 追加：layui-anim-loop 循环动画<!-- -->
按钮 button 组
基本用法： class="layui-btn"
<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
主题名称 组合
原始 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"
大型百搭 class="layui-btn layui-btn-lg layui-btn-normal"
正常暖色 class="layui-btn layui-btn-warm"
小型警告 class="layui-btn layui-btn-sm layui-btn-danger"
迷你禁用 class="layui-btn layui-btn-xs layui-btn-disabled"
圆角主题 组合
原始 class="layui-btn layui-btn-radius layui-btn-primary"
默认 class="layui-btn layui-btn-radius"
百搭 class="layui-btn layui-btn-radius layui-btn-normal"
暖色 class="layui-btn layui-btn-radius layui-btn-warm"
警告 class="layui-btn layui-btn-radius layui-btn-danger"
禁用 class="layui-btn layui-btn-radius layui-btn-disabled"
大型百搭 class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal"
小型警告 class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger"
迷你禁用 class="layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled"
图标： 如--
<button type="button" class="layui-btn">
<i class="layui-icon"></i> 添加
</button>
按钮组： 将按钮放入一个class="layui-btn-group"元素中，即可形成按钮组，按钮本身仍然可以随意搭配
<div class="layui-btn-group">
<button type="button" class="layui-btn">增加</button>
<button type="button" class="layui-btn">编辑</button>
<button type="button" class="layui-btn">删除</button>
</div>
按钮容器： 如--
<div class="layui-btn-container">
<button type="button" class="layui-btn">按钮一</button>
<button type="button" class="layui-btn">按钮二</button>
<button type="button" class="layui-btn">按钮三</button>
</div><!-- -->
表单 form 元素集合 (此处仅展示元素，更多完整form使用示例详情见form模块)
基本用法： 设置class layui-form layui-form-item ...
<form class="layui-form" action=""></form>
依赖加载模块：form （如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）
<script>
layui.use('form', function(){
var form = layui.form;
//各种基于事件的操作
});
</script>
输入框：
<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="" lay-search> <!-- lay-search 开启搜索匹配功能 -->
<option value="">请选择一个城市</option> <!-- 空值占位，预留“请选择”的提示空间，若无此行下面有value的第一行将作默认选中项 -->
<optgroup label="城市"> <!-- optgroup 分组 -->
<option value="010">北京</option>
<option value="021" disabled>上海(禁用效果)</option> <!-- disabled 禁用，select和option标签都支持 -->
<option value="0571" selected>杭州</option> <!-- selected 默认选中 -->
</optgroup>
<optgroup label="xx">
<option value="北京">北京</option>
</optgroup>
</select>
复选框：（设置value="1"可自定义值否则选中时返回的是默认的on）
默认风格：（标签式，外层框--文字+选框）
<input type="checkbox" name="" title="写作" checked> <!-- checked 默认选中 -->
<input type="checkbox" name="" title="发呆"> <!-- title 自定义文本，若只想显示复选框可不设置 -->
<input type="checkbox" name="" title="禁用" disabled> <!-- disabled 禁用 -->
原始风格：（常见样式，选框+文字）
<input type="checkbox" name="" title="写作" lay-skin="primary" checked> <!-- lay-skin 设置复选框风格 -->
<input type="checkbox" name="" title="发呆" lay-skin="primary">
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
开关：（设置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> <!-- checked 默认开状态 -->
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭"> <!-- lay-text 设置两种状态的文本 -->
<input type="checkbox" name="aaa" lay-skin="switch" disabled> <!-- disabled 禁用 -->
单选框：
<input type="radio" name="sex" value="nan" title="男"> <!-- title 自定义文本 -->
<input type="radio" name="sex" value="nv" title="女" checked> <!-- checked 默认选中 -->
<input type="radio" name="sex" value="" title="中性" disabled> <!-- disabled 禁用 -->
文本域：
设置class="layui-textarea"即使用layui提供的通用css类
<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
组装行内表单：（使表单元素如输入框显示在同一行内）
<div class="layui-form-item">
<div class="layui-inline"> <!-- class="layui-inline" 定义外层行内，此例 范围 和 密码 及其后输入框均显示在一行 -->
<label class="layui-form-label">范围</label>
<div class="layui-input-inline" style="width: 100px;"> <!-- class="layui-input-inline" 定义内层行内，此例2个￥输入框显示在一行 -->
<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>
忽略美化：
<select lay-ignore> <!-- lay-ignore 使表单元素保留系统默认风格，但一般不推荐使用，可能会导致ui风格不和谐 -->
<option>…</option>
</select>
表单方框风格：
追加 layui-form-pane 的class可设置表单为方框风格(即使表单元素和其邻近的label文字被方框划为一行的样式)
<form class="layui-form layui-form-pane" action="">
<!-- 内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要在其class="layui-form-item"的div额外添加 pane 属性 -->
<div class="layui-form-item" pane> <!--表单元素--> </div>
</form><!-- -->
导航 菜单 / 面包屑
基本用法： 设置class layui-nav layui-nav-item ...
依赖加载模块：element
layui.use('element', function(){ var element = layui.element; /*其他操作略*/ }); });
示例：
<!-- 水平导航 -->
<ul class="layui-nav" lay-filter=""> <!-- layui-nav 导航栏，class可追加css背景类让导航呈现不同的主题色 -->
<li class="layui-nav-item"><a href="">导航1</a></li>
<li class="layui-nav-item layui-this"><a href="">导航2</a></li> <!-- layui-this 指向当前页面分类 -->
<li class="layui-nav-item"><a href="">导航3</a></li>
<li class="layui-nav-item">
<a href="javascript:;">导航4</a>
<dl class="layui-nav-child"> <!-- 二级菜单 -->
<dd><a href="">导航4-1</a></dd>
<dd><a href="">导航4-2</a></dd>
<dd><a href="">导航4-3</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href=""><img src="" class="layui-nav-img">导航5</a></li> <!-- 添加图片(可做头像之类的) -->
<li class="layui-nav-item"><a href="">导航6<span class="layui-badge">9</span></a></li> <!-- 显示带数字9的方块(可做消息提示之类的) -->
<li class="layui-nav-item"><a href="">导航7<span class="layui-badge-dot"></span></a></li> <!-- 显示圆点(可做消息提示之类的) -->
</ul>
<script>
layui.use('element', function(){ // 导航 依赖 element 模块，否则无法进行功能性操作
var element = layui.element;
//…
});
</script>
更多: 导航栏class可追加css背景类让导航呈现不同的主题色，水平导航支持 layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝），垂直导航支持 layui-bg-cyan（藏青），如--
<ul class="layui-nav layui-bg-green" lay-filter=""><!--墨绿背景--></ul>
水平、垂直、侧边三个导航的HTML结构是完全一样的，不同的是 垂直导航需要追加class：layui-nav-tree 侧边导航需要追加class：layui-nav-tree layui-nav-side 如--
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
<li class="layui-nav-item layui-nav-itemed"> <!-- layui-nav-itemed 导航选中 -->
<!-- 二级菜单内容略 -->
</li>
</ul>
可选属性--
<!-- lay-shrink 设置展开子菜单时是否收缩兄弟节点已展开的子菜单(全部收缩)，默认值为空即不收缩 设置值为all即收缩，layui2.2.6新增 -->
<ul class="layui-nav layui-nav-tree" lay-shrink="all"> … </ul>
<!-- lay-unselect 设置点击导航菜单时不出现选中效果，layui2.2.0新增 -->
<li class="layui-nav-item" lay-unselect>刷新</li>
面包屑--
<!-- 首页 / 国际新闻 / 亚太地区 / 正文 -->
<span class="layui-breadcrumb"> <!-- 添加 lay-separator="-" 可自定义分隔符 -->
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
<!-- 也可以做小导航 如 --><!-- 娱乐 | 八卦 | 体育 | 搞笑 | 视频 | 游戏 | 综艺 -->
<span class="layui-breadcrumb" lay-separator="|">
<a href="">娱乐</a>
<a href="">八卦</a>
<a href="">体育</a>
<a href="">搞笑</a>
<a href="">视频</a>
<a href="">游戏</a>
<a href="">综艺</a>
</span>
<!-- -->
选项卡 Tabs 切换
基本用法： 设置class layui-tab layui-tab-title layui-tab-content ...
依赖加载组件：element （必须加载element模块，相关功能才能正常使用）
示例：
<div class="layui-tab"> <!-- 追加class： layui-tab-brief 可设定简洁风格， 追加class： layui-tab-card 可设定卡片风格， 设置属性 lay-allowClose="true" 可允许Tab选项卡被删除 -->
<ul class="layui-tab-title">
<li class="layui-this">tab1</li> <!-- layui-this 选中tab -->
<li>tab2</li>
<li>tab3</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1</div> <!-- kayui-show 展示 -->
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
</div>
</div>
<script>
layui.use('element', function(){ // 选项卡 依赖 element 模块，否则无法进行功能性操作
var element = layui.element;
//…
});
</script>
ID焦点定位： 设置 lay-id="xxx" 可作唯一的匹配索引以用于外部的定位切换，如--
<div class="layui-tab" lay-filter="test1">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="111" >文章列表</li>
<li lay-id="222">发送信息</li>
<li lay-id="333">权限分配</li>
<li lay-id="444">审核</li>
<li lay-id="555">订单管理</li>
</ul>
<div class="layui-tab-content"> ... </div>
</div>
<!-- 动态操作(部分代码) -->
<script>
layui.use('element', function(){
var element = layui.element;
//获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
var layid = location.hash.replace(/^#test1=/, '');
element.tabChange('test1', layid); //假设当前地址为：http://a.com#test1=222，那么选项卡会自动切换到“发送消息”这一项
//监听Tab切换，以改变地址hash值
element.on('tab(test1)', function(){
location.hash = 'test1='+ this.getAttribute('lay-id');
});
});
</script>
注：无论是导航、还是Tab，都需依赖 element模块，大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如Tab事件监听等，需按照场景选择性使用
<!-- -->
进度条 progress
基本用法： 设置class layui-progress ...
依赖加载组件：element
示例：
<div class="layui-progress"> <!-- 追加class：layui-progress-big 即为大尺寸的进度条风格(增加高度且文字在进度条内显示而默认在进度条右上显示)， 设置属性 lay-showPercent="yes" 可开启进度比的文本显示 若不想显示务必直接删除此属性不要设置no或false layui2.1.7新增 -->
<div class="layui-progress-bar" lay-percent="10%"></div> <!-- lay-percent 进度条的初始百分比，可动态改变进度 -->
</div>
<script>
layui.use('element', function(){ // 进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
var element = layui.element;
});
</script>
<!-- -->
面板 折叠 / 手风琴
基本用法： 设置class layui-card layui-card-header layui-card-body ...
一个独立的容器，适用于 QA说明、帮助文档等
依赖加载组件：element
示例：
<!-- 卡片面板 -->
<div class="layui-card">
<div class="layui-card-header">卡片面板</div> <!-- 头部标题 -->
<div class="layui-card-body"> <!-- 内容 -->
卡片式面板面板通常用于非白色背景色的主体内从而映衬出边框投影，如果网页采用的是默认的白色背景则不建议使用卡片面板
</div>
</div>
<!-- 折叠面板/手风琴 -->
<div class="layui-collapse"> <!-- 添加属性 lay-accordion (无值)可开启手风琴(即在进行折叠操作时始终只会展现当前的面板其他展开的面板自动收起) -->
<div class="layui-colla-item">
<h2 class="layui-colla-title">面板1</h2>
<div class="layui-colla-content layui-show">内容区域</div> <!-- 设置class为 layui-show 来选择性初始展开某一个面板，element 模块会自动呈现状态图标 -->
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">面板2</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">面板3</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
</div>
<script>
layui.use('element', function(){ // 折叠面板 依赖 element 模块，否则无法进行功能性操作
var element = layui.element; //…
});
</script>
<!-- -->
表格 静态 table
基本用法： 设置class layui-table
示例：
<table class="layui-table"> <!-- 添加属性 lay-even 开启隔行背景， 添加属性 lay-skin="值" 设置边框风格 可取值 line(行边框风格) row(列边框风格) nob(无边框风格) 使用默认风格不设置该属性即可， 添加属性 lay-size="值" 设置表格尺寸 可取值 sm(小尺寸) lg(大尺寸) 使用默认尺寸不设置该属性即可 -->
<colgroup> <!-- 样式 -->
<col width="150">
<col width="200">
<col>
</colgroup>
<thead> <!-- 表头 -->
<tr>
<th>昵称</th>
<th>加入时间</th>
<th>签名</th>
</tr>
</thead>
<tbody> <!-- 数据 -->
<tr> <!-- 行 -->
<td>行1列1</td> <!-- 列 -->
<td>2020-12-09</td>
<td>行1列3</td>
</tr>
<tr>
<td>行2列1</td>
<td>2020-12-10</td>
<td>行2列3...</td>
</tr>
</tbody>
</table>
注： 此为静态表格，若需要对表格进行排序、数据交互等一系列功能性操作请参考table模块
<!-- -->
徽章 小圆点 / 小边框
示例： <!-- 可追加class： layui-bg-* 添加背景色(7种内置背景色) -->
<!-- 小圆点 -->
<span class="layui-badge-dot"></span>
<!-- 椭圆体 -->
<span class="layui-badge">9</span>
<!-- 边框体 -->
<span class="layui-badge-rim">8</span>
也可搭配 导航、按钮、选项卡等使用
<!-- -->
时间线 timeline
基本用法： 设置class layui-timeline layui-timeline-item layui-timeline-axis layui-timeline-content layui-timeline-title ...
示例： <!-- 既可作时间线也可作其他类似用处 -->
<ul class="layui-timeline"> <!-- 时间线(容器) -->
<li class="layui-timeline-item"> <!-- 时间线(1条) -->
<i class="layui-icon layui-timeline-axis"></i> <!-- 圆圈图标(可自定义更改但不推荐自行更改) -->
<div class="layui-timeline-content layui-text"> <!-- 文字 -->
<h3 class="layui-timeline-title">8月18日</h3> <!-- 时间/标题 -->
<p>时间线1<i class="layui-icon layui-icon-face-smile"></i></p> <!-- 任意内容(文字 图标 ...) -->
</div>
</li>
<li class="layui-timeline-item"> ... </li> <!-- li同结构不同标题和内容 -->
</ul>
<!-- -->
辅助 引用 / 字段集 / 横线等
示例： <!-- 引用区块 layui-elem-quote --> <!-- blockquote 标签本身有块引用的作用，而layui内置css进行样式修饰 -->
<blockquote class="layui-elem-quote">引用区域的文字</blockquote> <!-- 默认样式风格(绿色左边框浅灰文字背景) -->
<blockquote class="layui-elem-quote layui-quote-nm">引用区域的文字</blockquote> <!-- 增加样式风格(灰色边框并加粗左边框白色文字背景) -->
<!-- 字段集区块 layui-elem-field -->
<fieldset class="layui-elem-field"> <!-- 默认风格(全边框且标题嵌在上边框) -->
<legend>标题</legend>
<div class="layui-field-box"> 任意内容，比如表单... </div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title"> <!-- 追加样式(无边框而标题带有容器长度100%的横线) -->
<legend>带标题的横线</legend>
<div class="layui-field-box"> 任意内容，比如表单... </div>
</fieldset>
<!-- 横线/分割线 --> <!-- hr 标签本身就是一条水平线，而layui内置css进行样式修饰 -->
<hr> <!-- 默认分割线 -->
<hr class="layui-bg-red"> <!-- 赤色分割线 -->
<hr class="layui-bg-orange"> <!-- 橙色分割线 -->
<hr class="layui-bg-green"> <!-- 墨绿分割线 -->
<hr class="layui-bg-cyan"> <!-- 青色分割线 -->
<hr class="layui-bg-blue"> <!-- 蓝色分割线 -->
<hr class="layui-bg-black"> <!-- 黑色分割线 -->
<hr class="layui-bg-gray"> <!-- 灰色分割线 -->
类似资料：