LayUI前框框架普及版（一）-阿里云开发者社区

LayUI

一、课程目标

1. 【了解】LayUI框架                       
2. 【理解】LayUI基础使用
3. 【掌握】LayUI页面元素
4. 【掌握】LayUI内置模块

二、LayUI基本使用

2.1 概念

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。

2.2 下载

2.2.1 官网下载

官网 : https://layuion.com/

官方文档:https://layuion.com/docs/

2.2.2 目录结构

官网下载后，解压文件，目录结构如下

├─css //css目录
  │  │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
  │─lay //模块核心目录
  │  └─modules //各模块组件
  │─layui.js //基础核心库
  └─layui.all.js //包含layui.js和所有模块的合并文件

获得 layui 后，将其完整地部署到你的项目目录（或静态资源服务器），你只需要引入下述两个文件：

./layui/css/layui.css
./layui/layui.js

2.3 简单实例

LayUI的使用基本分为两个方面：

**页面元素：**主要是进行页面样式的修改，通过指定的layUI的class进行设置，只需要引入LayUI.css即可使用

**内置模块：**进行页面动态效果功能的展示，通过指定的layUI的相应代码进行书写，需要引入LayUI.js并按照指定格式进行书写

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>开始使用layui</title>
        <link rel="stylesheet" href="../layui/css/layui.css">
    </head>
    <body>
        <!-- 你的HTML代码 -->
        <script src="../layui/layui.js"></script>
        <script>
            //一般直接写在一个js文件中
            layui.use(['layer', 'form'], function(){
                var layer = layui.layer
                ,form = layui.form;
                layer.msg('Hello World');
            });
        </script> 
    </body>
</html>

三、LayUI页面元素

layui 提倡返璞归真，遵循于原生态的元素书写规则，所以通常而言，你仍然是在写基本的 HTML 和 CSS 代码，不同的是，在 HTML 结构上及 CSS 定义上需要稍稍遵循一定的规范。

3.1 栅格

为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能力，layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统，将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

采用 layui-row 来定义行，如：
2.采用类似 layui-col-md 这样的预设类来定义一组列（column），且放在行（row）内。其中：
变量md 代表的是不同屏幕下的标记（可选值见下文）
变量代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12
如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。
3.列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。
4.可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
5.最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！

3.1.1 示例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lCBlw3ED-1686143517856)(LayUI.assets/image-20210220084437679.png)]

<div class="layui-container">  
  常规布局（以中型屏幕桌面为例）：
  <div class="layui-row">
    <div class="layui-col-md9">
      你的内容 9/12
    </div>
    <div class="layui-col-md3">
      你的内容 3/12
    </div>
  </div>
  移动设备、平板、桌面端的不同表现：
  <div class="layui-row">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
      移动：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
      移动：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
      移动：4/12 | 平板：12/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
      移动：4/12 | 平板：7/12 | 桌面：8/12
    </div>
    <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
      移动：4/12 | 平板：5/12 | 桌面：4/12
    </div>
  </div>
</div>

3.2 颜色

视觉疲劳的形成往往是由于颜色过于丰富或过于单一形成的麻木感，而 layui 提供的颜色，清新而不乏深沉，互相柔和，不过分刺激大脑皮层的神经反应，形成越久越耐看的微妙影像。合理搭配，可与各式各样的网站避免违和，从而使你的 Web 平台看上去更为融洽。

3.2.1 常用主色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PTIVt9RN-1686143517857)(LayUI.assets/image-20210220084729592.png)]

3.2.2 场景色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l3neaTYF-1686143517858)(LayUI.assets/image-20210220084741838.png)]

3.2.3 极简中性色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yUWBnEv0-1686143517860)(LayUI.assets/image-20210220084751565.png)]

3.2.4 内置的背景色CSS类

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WrMd6lqD-1686143517862)(LayUI.assets/image-20210220084805171.png)]

3.3 字体图标

layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以把一个 icon 看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。你可以通过 font-class 或 unicode 来定义不同的图标。

3.3.1 使用

通过对一个内联元素（一般推荐用 i标签）设定 class=“layui-icon”，来定义一个图标，然后对元素加上图标对应的 font-class

例如：

<i class="layui-icon layui-icon-face-smile"></i>

3.3.2 内置图标一览表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-38tEaJP4-1686143517862)(LayUI.assets/image-20210220085050453.png)]

更多： https://www.layui.com/doc/element/icon.html

3.4 动画

layui 的动画全部采用 CSS3，因此不支持ie8和部分不支持ie9（即ie8/9无动画）

3.4.1 使用

动画的使用非常简单，直接对元素赋值动画特定的 class 类名即可。如：

其中 layui-anim 是必须的，后面跟着的即是不同的动画类
<div class="layui-anim layui-anim-up"></div>
循环动画，追加：layui-anim-loop
<div class="layui-anim layui-anim-up layui-anim-loop"></div>

3.4.2 基本动画

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K0THwV4w-1686143517864)(LayUI.assets/image-20210220085253278.png)]

3.5 按钮

layUI通过样式设置，可以将任意元素设置为相应的按钮样式

3.5.1 基本使用

向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为*layui-btn-{type}*的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>

3.5.2 主题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CpltfHeq-1686143517866)(LayUI.assets/image-20210220085732830.png)]

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

3.5.3 尺寸

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-51pM9DRb-1686143517867)(LayUI.assets/image-20210220085821417.png)]

尺寸	组合
大型按钮	class=“layui-btn layui-btn-lg”
默认按钮	class=“layui-btn”
小型按钮	class=“layui-btn layui-btn-sm”
迷你按钮	class=“layui-btn layui-btn-xs”

可以与主题按钮组合使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0iOlsvXW-1686143517870)(LayUI.assets/image-20210220085919592.png)]

尺寸	组合
大型百搭	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”

也可以根据所在块自适应大小

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7IaxKLZZ-1686143517871)(LayUI.assets/image-20210220085942658.png)]

<button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>

3.5.4 圆角

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aJAOzTM6-1686143517872)(LayUI.assets/image-20210220090506559.png)]

主题	组合
原始	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”

3.5.5 图标按钮

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1GvGOvj5-1686143517874)(LayUI.assets/image-20210220090646395.png)]

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

3.5.6 按钮组

将按钮放入一个*class=“layui-btn-group”*元素中，即可形成按钮组，按钮本身仍然可以随意搭配

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3rcyhUw8-1686143517876)(LayUI.assets/image-20210220090855049.png)]

<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-group">
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe654;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe642;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe640;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe602;</i>
  </button>
</div>
<div class="layui-btn-group">
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe654;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe642;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe640;</i>
  </button>
</div>

3.5.7 按钮容器

尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SLn4uU5Y-1686143517877)(LayUI.assets/image-20210220091006959.png)]

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

3.6 表单

LayUI通过样式设置与特定的js实现了更具有风格样式的表单，但是依赖于相应的表单模块

3.6.1 简单使用

在一个容器中设定 class=“layui-form” 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。

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

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yjm2F0Da-1686143517878)(LayUI.assets/image-20210220094149559.png)]

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-inline">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">辅助文字</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
      <select name="city" lay-verify="required">
        <option value=""></option>
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
        <option value="3">深圳</option>
        <option value="4">杭州</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读" checked>
      <input type="checkbox" name="like[dai]" title="发呆">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
      <input type="checkbox" name="switch" lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <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>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
      <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<script>
//Demo
layui.use('form', function(){
  var form = layui.form;
  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script>

3.6.2 行区块结构

基本的行区块结构，它提供了响应式的支持。但如果你不大喜欢，你可以换成你的结构，但必须要在外层容器中定义class=“layui-form”，form模块才能正常工作。

<div class="layui-form-item">
  <label class="layui-form-label">标签区域</label>
  <div class="layui-input-block">
    原始表单元素区域
  </div>
</div>

3.6.3 输入框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UtcL6P2U-1686143517880)(LayUI.assets/image-20210220094351587.png)]

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

3.6.4 下拉选择框

3.6.4.1 默认选择框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BqzLBWwm-1686143517881)(LayUI.assets/image-20210220094530902.png)]

<select name="city" lay-verify="">
  <option value="">请选择一个城市</option>
  <option value="010">北京</option>
  <option value="021">上海</option>
  <option value="0571">杭州</option>
</select>

3.6.4.2 分类选择框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q9gijm72-1686143517882)(LayUI.assets/image-20210220094655219.png)]

<select name="quiz">
  <option value="">请选择</option>
  <optgroup label="城市记忆">
    <option value="你工作的第一个城市">你工作的第一个城市？</option>
  </optgroup>
  <optgroup label="学生时代">
    <option value="你的工号">你的工号？</option>
    <option value="你最喜欢的老师">你最喜欢的老师？</option>
  </optgroup>
</select>

3.6.4.3 搜索选择框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SXEEueUe-1686143517885)(LayUI.assets/image-20210220094753884.png)]

以及通过设定属性 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>

属性selected可设定默认项

属性disabled开启禁用，select和option标签都支持

3.6.5 复选框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aQvr6VRy-1686143517886)(LayUI.assets/image-20210220094858296.png)]

默认风格：
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆"> 
<input type="checkbox" name="" title="禁用" disabled> 
原始风格：
<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可设置复选框的风格

设置*value=“1”*可自定义值，否则选中时返回的就是默认的on

3.6.6 开关

其实就是checkbox复选框的“变种”，通过设定 lay-skin=“switch” 形成了开关风格

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YEkhwHCe-1686143517888)(LayUI.assets/image-20210220095013155.png)]

<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

3.6.7 单选框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mfwjVLqx-1686143517889)(LayUI.assets/image-20210220095117539.png)]

<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

3.6.8 文本域

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8my6ge2B-1686143517891)(LayUI.assets/image-20210220095205992.png)]

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

3.6.9 表单方框风格

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vtLBtvhP-1686143517895)(LayUI.assets/image-20210220095318243.png)]

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

3.7 导航

导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。千万不要忘了加载 element模块。

3.7.1 水平导航

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HpVlshMe-1686143517897)(LayUI.assets/image-20210220095630462.png)]

<ul class="layui-nav" lay-filter="">
  <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>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  //…
});
</script>

3.7.2 垂直/侧边导航

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A83l2u75-1686143517900)(LayUI.assets/image-20210220095706408.png)]

<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">
    <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>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  //…
});
</script>

3.7.3 面包屑导航

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k3XCk5Dt-1686143517902)(LayUI.assets/image-20210220095826267.png)]

<span class="layui-breadcrumb">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</span>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  //…
});
</script>

可以通过设置属性 lay-separator=“-” 来自定义分隔符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SbfjLA7L-1686143517904)(LayUI.assets/image-20210220100206026.png)]

<span class="layui-breadcrumb" lay-separator="-">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</span>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  //…
});
</script>

3.8 Tab选项卡

Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。

依赖加载组件：element （请注意：必须加载element模块，相关功能才能正常使用）

3.8.1 默认Tab选项卡

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JrerId8l-1686143517906)(LayUI.assets/image-20210220100344934.png)]

<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>
<script>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  //…
});
</script>

3.8.2 Tab简洁风格

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DQtb6Ash-1686143517907)(LayUI.assets/image-20210220100429785.png)]

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  <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>
</div>      
<script>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  //…
});
</script>

3.8.3 Tab卡片风格

通过追加class：layui-tab-card来设定卡片风格

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mKZR3439-1686143517910)(LayUI.assets/image-20210220101939554.png)]

<div class="layui-tab layui-tab-card">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content" style="height: 100px;">
    <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 class="layui-tab-item">6</div>
  </div>
</div>
<script>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  //…
});
</script>

3.8.4 带删除的Tab

你可以对父层容器设置属性 lay-allowClose=“true” 来允许Tab选项卡被删除

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NIwTk9WB-1686143517913)(LayUI.assets/image-20210220111550729.png)]

<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 class="layui-tab-item">6</div>
  </div>
</div>
<script>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  //…
});
</script>

3.9 进度条

进度条可应用于许多业务场景，如任务完成进度、loading等等，是一种较为直观的表达元素

依赖加载组件：element

3.9.1 常规用法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ug6Qu95Y-1686143517914)(LayUI.assets/image-20210220111844383.png)]

<div class="layui-progress">
  <div class="layui-progress-bar" lay-percent="10%"></div>
</div>
<script>
//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
layui.use('element', function(){
  var element = layui.element;
});
</script>

属性 lay-percent ：代表进度条的初始百分比

3.9.2 显示进度比文本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lpzEEX1D-1686143517916)(LayUI.assets/image-20210220112052378.png)]

<div class="layui-progress" lay-showPercent="true">
  <div class="layui-progress-bar layui-bg-red" lay-percent="1/3"></div>
</div>
<div class="layui-progress" lay-showPercent="yes">
  <div class="layui-progress-bar layui-bg-red" lay-percent="30%"></div>
</div>
<div class="layui-progress layui-progress-big" lay-showPercent="yes">
  <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
</div>
<script>
//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
layui.use('element', function(){
  var element = layui.element;
});
</script>

注意：默认情况下不会显示百分比文本，如果你想开启，对属性lay-showPercent设置任意值即可，如：yes。但如果不想显示，千万别设置no或者false，直接剔除该属性即可。

3.9.3 大号进度条

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oOPESjmG-1686143517919)(LayUI.assets/image-20210220112151445.png)]

<div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar" lay-percent="20%"></div>
</div>
<div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
</div>
<div class="layui-progress layui-progress-big" lay-showPercent="true">
  <div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
</div>
<script>
//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
layui.use('element', function(){
  var element = layui.element;
});
</script>

默认风格的进度条的百分比如果开启，会在右上角显示，而大号进度条则会在内部显示。

3.10 面板

一般的面板通常是指一个独立的容器，而折叠面板则能有效地节省页面的可视面积，非常适合应用于：QA说明、帮助文档等

依赖加载组件：element

3.10.1 卡片面板

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tz33DKrr-1686143517921)(LayUI.assets/image-20210220112400179.png)]

<div class="layui-card">
  <div class="layui-card-header">卡片面板</div>
  <div class="layui-card-body">
    卡片式面板面板通常用于非白色背景色的主体内<br>
    从而映衬出边框投影
  </div>
</div>

如果你的网页采用的是默认的白色背景，不建议使用卡片面板。

3.10.2 折叠面板

通过对内容元素设置class为 layui-show 来选择性初始展开某一个面板，element 模块会自动呈现状态图标。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dJdROJBB-1686143517922)(LayUI.assets/image-20210220112455934.png)]

<div class="layui-collapse">
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">杜甫</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">李清照</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">鲁迅</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
</div>
<script>
//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  //…
});
</script>

3.10.3 手风琴面板

在折叠面板的父容器设置属性 lay-accordion 来开启手风琴，那么在进行折叠操作时，始终只会展现当前的面板。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gWlVY5QH-1686143517924)(LayUI.assets/image-20210220112558207.png)]

<div class="layui-collapse" lay-accordion>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">杜甫</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">李清照</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">鲁迅</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
</div>
<script>
//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  //…
});
</script>

3.11 静态表格

通过内置的自定义属性对其进行风格的多样化设定。

3.11.1 常规用法

通过 layui-table 将表格样式修改

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZdKaNJZf-1686143517926)(LayUI.assets/image-20210220112754506.png)]

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

3.11.2 基础属性

属性名	属性值	备注
lay-even	无	用于开启隔行背景，可与其它属性一起使用
lay-skin=“属性值”	line （行边框风格） row （列边框风格） nob （无边框风格）	若使用默认风格不设置该属性即可
lay-size=“属性值”	sm （小尺寸） lg （大尺寸）	若使用默认尺寸不设置该属性即可

将所需要的基础属性写在table标签上即可，如（一个带有隔行背景，且行边框风格的大尺寸表格）：

<table lay-even lay-skin="line" lay-size="lg">
…
</table>

3.11.3 表格尺寸

通过 lay-size=“sm” 或 *lay-size=“lg”*进行尺寸的切换

<table class="layui-table" lay-size="sm">
  小尺寸表格（内部结构参见右侧目录“常规用法”）
</table>
<table class="layui-table" lay-size="lg">
  大尺寸表格（内部结构参见右侧目录“常规用法”）
</table>

3.12 徽章

徽章是一个修饰性的元素，它们本身细小而并不显眼，但掺杂在其它元素中就显得尤为突出了。页面往往因徽章的陪衬，而显得十分和谐。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6JoGD1Xj-1686143517928)(LayUI.assets/image-20210220113132775.png)]

小圆点，通过 layui-badge-dot 来定义，里面不能加文字
<span class="layui-badge-dot"></span>
<span class="layui-badge-dot layui-bg-orange"></span>
<span class="layui-badge-dot layui-bg-green"></span>
<span class="layui-badge-dot layui-bg-cyan"></span>
<span class="layui-badge-dot layui-bg-blue"></span>
<span class="layui-badge-dot layui-bg-black"></span>
<span class="layui-badge-dot layui-bg-gray"></span>
椭圆体，通过 layui-badge 来定义。事实上我们把这个视作为主要使用方式
<span class="layui-badge">6</span>
<span class="layui-badge">99</span>
<span class="layui-badge">61728</span>
<span class="layui-badge">赤</span>
<span class="layui-badge layui-bg-orange">橙</span>
<span class="layui-badge layui-bg-green">绿</span>
<span class="layui-badge layui-bg-cyan">青</span>
<span class="layui-badge layui-bg-blue">蓝</span>
<span class="layui-badge layui-bg-black">黑</span>
<span class="layui-badge layui-bg-gray">灰</span>
边框体，通过 layui-badge-rim 来定义
<span class="layui-badge-rim">6</span>
<span class="layui-badge-rim">Hot</span>

LayUI前框框架普及版（二）https://developer.aliyun.com/article/1433690

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

LayUI前框框架普及版（一）