1. Import Plug
layui the need to use imported layui js and css:
<link rel="stylesheet" href="layui/css/layui.css" /> <script src="layui/layui.js"></script>
2. Grid System
2.1 Getting Started demo:
<div class = " layui-Container " > General Layout (medium-sized screen to the desktop for example): <div class = " layui-Row " > <div class = " layui-COL-MD9 " > Your content 9 / 12 < / div> <div class = " layui-COL-MD3 " > your content . 3 / 12 is </ div> </ div> </ div>
2.2 Add Column spacing
By "column pitch" default class, to set the spacing between the columns. And a row of the left-most column does not appear from the left, the right-most column does not appear right margin. Column spacing, while ensuring aesthetic typography, may further ensure that the width of the fineness of disaggregated. There are 12 different sizes of margins, as layui-col-space1, layui-col-space3, layui-col-space5 the like, refer to the official website of the specific description. Here is an example:
<div class="layui-row layui-col-space10"> <div class="layui-col-md4"> 1/3 </div> <div class="layui-col-md4"> 1/3 </div> <div class="layui-col-md4"> 1/3 </div> </div>
Offset 2.3
Additional columns similar layui-col-md-offset * preset classes, so that column shift to the right. Wherein * representative number is the number of offset columns occupied, optionally for 1--12. Such as: layui-COL-md-] OFFSET3 is , which represents in the "medium-sized desktop screen," so that the column shifted to the right three columns width.
A "column offset" mechanism for the right and left two columns aligned Examples:
<div class = " layui-Row " > <div class = " layui-COL-MD4 " > . 4 / 12 is </ div> <div class = " layui-COL-COL-MD-MD4 layui-OFFSET4 " > Offset 4, so that the rightmost </ div> </ div>
2.4 Let IE8 / 9 compatible raster
The above code into your page <body> any position within the tag:
<! - Let IE8 / 9 support media queries, so that a grid-compatible -> <! - [ IF lt IEs . 9 ]> <Script the src = " https://cdn.staticfile.org/html5shiv/r29/html5 .min.js " > </ Script> <Script the src = " https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js " > </ Script> <[endif]! - ->
2.5 Background layout style
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>栅格系统demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="plugin/layui/css/layui.css" rel="stylesheet">
<script src="plugin/layui/layui.js"></script>
<script src="plugin/jquery-3.4.1/jquery-3.4.1.js"></script>
</ head>
<body class = " layui-layout-body " >
<div class = " layui-layout layui-layout-ADMIN " >
<div class = " layui-header " >
<div class = " layui-logo " > layui background layout </ div>
<-! head region (can be used with existing horizontal navigation layui) ->
<UL class = " layui-layui NAV-layout-left " >
<Li class = "layui-nav-item"><a href="">控制台</a></li>
<li class="layui-nav-item"><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"""> mail management </a> </ dd>
<Dd> <a href=>
<dd><a href="">消息管理</a></dd>
<dd><a href="">授权管理</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
贤心
</a>
<dl class="layui-nav-child">
<dd><a href="">基本资料</a></dd>
<dd><a href="">安全设置</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">退了</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="
<UL
<-! left navigation area (layui can be used with conventional vertical navigation) ->>"Side-Scroll-layuiclass="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">所有商品</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">列表一</a></dd>
<dd><the href = A > List two </a> </ dd>"JavaScript :;"
<dd><a href="javascript:;">列表三</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="javascript:;">列表一</a></dd>
<dd><a href="javascript:;">列表二</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>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="class
<div
</ div>> body region contents </ div>"padding: 15px;
="layui-footer" >
<! - the bottom fastening area ->
© layui.com - bottom fastening region
</ div>
</ div>
<Script the src = " ../src/layui.js " > </ Script>
<Script> // the JavaScript code region
layui.use ( ' Element ' , function () {
var Element = layui.element;
}); </ Script>
</ HTML>
3. Color Design
Reference website: https://www.layui.com/doc/element/color.html
3.1 Common primary colors
# 009 688 commonly used buttons, and any modification element
# 5FB878 generally used for selected
# 393D49 commonly used for navigation
# 1E9FFF more suitable for some of the bright color of the page
3.2 Color Scene
# FFB800 warm colors, generally used for informational element
# FF5722 compare interesting color
# 01AAED for text coloring, such as link text
# 2F4056 sides or bottom of the widely used color
3.3 built-in color
赤色：class="layui-bg-red"
橙色：class="layui-bg-orange"
墨绿：class="layui-bg-green"
Navy: class = "layui-bg-cyan"
Blue: class = "layui-bg-blue"
雅黑：class="layui-bg-black"
Silver: class = "layui-bg-gray"
4. Fonts icon
Reference website: https://www.layui.com/doc/element/icon.html
<i class="layui-icon layui-icon-face-smile"></i>
Custom icon size for each color:
<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>
5.CSS3 Animation