layui快速上手教程

layui

获得 layui

1. 官网首页下载

你可以在我们的 官网首页 下载到 layui 的最新版，它经过了自动化构建，更适合用于生产环境。目录结构如下：

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

2.Git 仓库下载

你也可以通过 GitHub 或 码云

得到 layui 的完整开发包，以便于你进行二次开发，或者 Fork layui 为我们贡献方案

GitHub 码云

3.npm 安装

codelayui.code npm i layui-src         

一般用于 WebPack 管理

快速上手

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

codelayui.code./layui/css/layui.css./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js

字体图标

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

使用方式

通过对一个内联元素（一般推荐用 i标签）设定 class=“layui-icon”，来定义一个图标，然后对元素加上图标对应的 font-class（注意：layui 2.3.0 之前只支持采用 unicode 字符)，即可显示出你想要的图标，譬如：

codelayui.code

1. 从 layui 2.3.0 开始，支持 font-class 的形式定义图标：

3. codelayui.code注意：在 layui 2.3.0 之前的版本，只能设置 unicode 来定义图标<i class="layui-icon">&#xe60c;</i>   其中的 &#xe60c; 即是图标对应的 unicode 字符       
   

4. 你可以去定义它的颜色或者大小，如：

5. <i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>  
   

   CSS3动画类

   在实用价值的前提之下，我们并没有内置过多花俏的动画。而他们同样在 layui 的许多交互元素中，发挥着重要的作用。layui 的动画全部采用 CSS3，因此不支持ie8和部分不支持ie9（即ie8/9无动画）

   使用方式

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

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

按钮 - 页面元素

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

用法

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

表单 - 页面元素

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

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

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

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

导航相关 - 页面元素

导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如呼出二级菜单等，需借助element模块才能使用。你可以移步文档左侧【内置模块 - 常用元素操作 element】了解详情

依赖加载模块：element

HTML结构layui.code<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>