LayUI
layui (homophony: UI) is an open source web UI solution that adopts its own classic modular specifications and follows the development method of native HTML/CSS/JS, which is often suitable for the rapid development of web interfaces. Layui is different from those front-end frameworks based on MVVM's underlying layer. It is more aimed at back-end developers. It does not need to get involved in various front-end tools. It only needs to face the browser itself and let all the elements and interactions required.
Features of LayUI
1: Layui is a lightweight framework, simple and beautiful, suitable for the back-end development model, it has very good results on the server page
2: Layuu is a ui framework provided to backend developers, based on DOM driver
LayUI
Basic use
1. Download layui
Official website:/
2. Install and introduce dependencies
example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="layui/css/"/>
<script src="layui/" type="application/javascript" charset="UTF-8"></script>
</head>
<body>
<script>
(['layer', 'form'], function(){
var layer =
,form = ;
('Hello World');
});
</script>
</body>
</html>
You need to declare the modules and callback functions used, refer to the official documentation and select the effect you want.
for example:
<script>
(['element'], function(){
var element = ;
//...
});
</script> Page elements
layout
1. Fixed width--if there is blank space on both sides
<div class="layui-container" style="background-color:navajowhite ;height: 300px;"> Fixed width </div>
2. Complete width-occupies 100% of the width
<div class="layui-fluid" style="background-color:navajowhite ;height: 300px;"> Full width </div>
Grid system
Use layui-row to define rows
<div class="layui-row"> </div>
- Use a preset class like layui-col-md* to define a set of columns and put them in rows, where
- variablemdRepresents the marks under different screens
- The side wave* represents the 12 equal parts occupied by this column (such as 6/12) optional values are 1-12.
- If the sum of the "equal value" of multiple columns is equal to 12, it is just arranged in full rows. If it is greater than 12, if the rainy column will automatically start another row
- The column can appear at most four different combinations at the same time, namely xs (super small screen, such as mobile phone), sm (small screen, tablet), md (desktop medium screen), lg (desktop large screen)
- You can append preset classes such as layui-col-space5 and layui-col-md-offerset3 to define the spacing and offset of the column.
- You can put any element of your own in the column element to fill in the content
<div class="layui-container"> <div class="layui-row"> <div class="layui-col-md5" style="background-color: deepskyblue;"> Content5/12 </div> <div class="layui-col-md7" style="background-color: bisque;"> Content7/12 </div> </div> <div class="layui-row"> <div class="layui-col-md4" style="background-color: powderblue;"> Content4/12 </div> <div class="layui-col-md4" style="background-color: mediumaquamarine;"> Content4/12 </div> </div> </div>
Responsive rules
The strong support for css media queries (Media Queries) allows corresponding adaptation processing for screens of different sizes.
| type | Ultra-small screen mobile phone (<768px) | Small screen mobile phone (tablet >=768px) | Medium screen (desktop>=992px) | Large screen (desktop >=1200px |
|---|---|---|---|---|
| The value of .layui-container | auto | 750px | 970px | 1170px |
| mark | xs | sm | md | lg |
| Equal fraction values with column corresponding class * of 1-12 | layui-col-xs* | layui-col-sm* | layui-col-md* | layui-col-lg* |
| Total column count | 12 | 12 | 12 | 12 |
| Corresponding behavior | Always an analyses the proportional level | Arrange horizontally under the current screen, and stack if the screen size is below the critical value | Arrange horizontally under the current screen, and stack if the screen's distribution is below the critical value | Arrange horizontally under the current screen, and stack if the screen size is below the critical value |
<div class="layui-row">
<div class="layui-col-md5 layui-col-sm6">
Responsive rules
</div>
</div>Column margin:
The spacing between them is set through the preset class of "Column Margins". And the leftmost column in a row will not have a left margin, and the rightmost column will not have a right margin. While ensuring the beautiful layout, the column margin can further maintain the fineness of the width of the column. We have preset margins of different sizes in 12 based on the commonly used margins on web pages.
/* All even intervals between columns are supported in intervals of 1px-30px, and singular intervals of 1px, 5px, 15px, 25px */ layui-col-space1 layui-col-space2 layui-col-space4 layui-col-space5 layui-col-space6 .....
<div class="layui-row layui-col-space10"> <div class="layui-col-md4" style="background-color: ghostwhite;"><div style="background-color: white;">4</div></div> <div class="layui-col-md4" style="background-color: powderblue;">4</div> <div class="layui-col-md4" style="background-color: mediumaquamarine;">4</div> </div>
Note:
-col-space, it will not work after setting. Because the setting is padding, that is, shrinking inward, so setting the background color padding will also fill in the color, which looks like there is no spacing. You can add a div inside to achieve the goal.
2. The spacing is generally not higher than 30px. If it exceeds 30, it is recommended to use column offset.
Column offset
The best preset class for the column is layui-col-md-offset*, so that the column is offset to the right. * represents the number of columns occupied by the offset, which can be selected from 1-12
For example: layui-col-md-offset3, that is, under the "medium desktop screen, let the column offset the width of the list to the right by 3 lists.
<div class="layui-row "> <div class="layui-col-md4" style="background-color: ghostwhite;"><div style="background-color: white;">4</div></div> <div class="layui-col-md4 layui-col-md-offset2" style="background-color: powderblue;">4</div> </div>
Note:
Column offset can be set for the standards of different screens, which is most effective under the current setting screen. When it is lower than the specified critical value of the desktop screen, it will be stacked and arranged.
Nesting
You can nest rasters at infinite levels. Insert the row element (layui-col-md*) into the column element (layui-col-md*) to complete the nesting.
<div class="layui-container"> <div class="layui-row"> <div class="layui-col-md6"> <div style="background-color: darkturquoise;"> <div class="layui-row"> <div class="layui-col-md5" style="background-color: seashell;">internal5</div> <div class="layui-col-md5" style="background-color: mistyrose;">internal5</div> <div class="layui-col-md2" style="background-color: aqua;">internal5</div> </div> </div> </div> </div> </div>
Basic elements
Button
Set class="layui-btn" to any HTML element and create a basic button. Define other button styles by appending class formatted as layui-btn-{type}.
theme
| name | combination |
|---|---|
| original | class="layui-btn layui-btn-primary" |
| default | class="layui-btn" |
| All-match | class="layui-btn layui-btn-normal" |
| warm color | class="layui-btn layui-btn-warm" |
| warn | class="layui-btn layui-btn-danger" |
| Disabled | class="layui-btn layui-btn-disabled" |
In the middle is hollow:
| name | combination |
|---|---|
| Main color | class="layui-btn layui-btn-primary layui-border-green" |
| All-match | class="layui-btn layui-btn-primary layui-border-blue" |
| warm color | class="layui-btn layui-btn-primary layui-border-orange" |
| warn | class="layui-btn layui-btn-primary layui-border-red" |
| Dark | class="layui-btn layui-btn-primary layui-border-black" |
size:
| size | combination |
|---|---|
| Large | class="layui-btn layui-btn-lg" |
| default | class="layui-btn" |
| Small | class="layui-btn layui-btn-sm" |
| Mini | class="layui-btn layui-btn-xs" |
| size | combination |
|---|---|
| Large versatile | class="layui-btn layui-btn-lg layui-btn-normal" |
| Normal warm color | class="layui-btn layui-btn-warm" |
| Small warning | class="layui-btn layui-btn-sm layui-btn-danger" |
| Mini Disabled | class="layui-btn layui-btn-xs layui-btn-disabled" |
Fluid adaptation
<button type="button" class="layui-btn layui-btn-fluid">Fluid Button（Maximize adaptation）</button>
Round corners
| theme | combination |
|---|---|
| original | class="layui-btn layui-btn-radius layui-btn-primary" |
| default | class="layui-btn layui-btn-radius" |
| All-match | class="layui-btn layui-btn-radius layui-btn-normal" |
| warm color | class="layui-btn layui-btn-radius layui-btn-warm" |
| warn | class="layui-btn layui-btn-radius layui-btn-danger" |
| Disabled | class="layui-btn layui-btn-radius layui-btn-disabled" |
| size | combination |
|---|---|
| Large versatile | class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal" |
| Small warning | class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger" |
| Mini Disabled | class="layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled" |
icon
<button type="button" class="layui-btn"> <i class="layui-icon layui-icon-down layui-font-12"></i> Button</button> <button type="button" class="layui-btn layui-btn-sm layui-btn-primary"> <i class="layui-icon layui-icon-left"></i></button>
Default Button Style Size Rounded Corners Flow Adaptive
**i Icon Style **
navigation
Navigation generally refers to a collection of page guided channels, which are mostly presented in the form of menus and can be applied to the head and sides. The breadcrumb structure is simple and supports custom separators.
Module loading depends on: element
Steps to implement:
Resources introduced:
<link rel="stylesheet" href="layui/css/"/> <script type="application/javascript" src="layui/"></script>
class=“layui-nav”
-
class=“layui-nav-item”--class=“layui-nav-item layui-this”Select
class="layui-nav-child" Secondary menu
example:
<ul class="layui-nav" lay-filter=""> <li class="layui-nav-item"><a href="">Latest Events</a></li> <li class="layui-nav-item layui-this"><a href="">product</a></li> <li class="layui-nav-item"><a href="">Big Data</a></li> <li class="layui-nav-item"> <a href="javascript:;">Solution</a> <dl class="layui-nav-child"> <!-- Secondary menu --> <dd><a href="">Mobile module</a></dd> <dd><a href="">Backend template</a></dd> <dd><a href="">E-commerce platform</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">Community</a></li> </ul>
Vertical style + side edge
class="layui-nav layui-nav-tree layui-nav-side"
Background color
Add the style backwards: layui-bg-orange
badge
Directly corresponding to later
Bread crumbs
<span class="layui-breadcrumb">
<a href="">front page</a>
<a href="">International News</a>
<a href="">Asia Pacific</a>
<a><cite>text</cite></a>
</span>- Select
- Customize the separator by setting the attribute lay-separator="-"
Tab
Introducing resources:
<link rel="stylesheet" href="layui/css/"/> <script type="application/javascript" src="layui/"></script>
- class="layui-tab"
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">Website settings</li>
<li>User Management</li>
<li>Permission assignment</li>
<li>Product Management</li>
<li>Order Management</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">content1</div>
<div class="layui-tab-item">content2</div>
<div class="layui-tab-item">content3</div>
<div class="layui-tab-item">content4</div>
<div class="layui-tab-item">content5</div>
</div>
</div>style
Default style:
- layui-tab
Simple style additional style:
- layui-tab-brief
Card style additional style:
- layui-tab-card
With deletion
Set the property lay-allowClose="true" for the parent layer container to allow the Tab tab to be deleted
sheet
<table class="layui-table" lay-even> <colgroup> <col width="150"> <col width="200"> <col> </colgroup> <thead> <tr> <th>Nick name</th> <th>Join time</th> <th>sign</th> </tr> </thead> <tbody> <tr> <td>Virtuous heart</td> <td>2016-11-29</td> <td>Life is like a practice</td> </tr> <tr> <td>Xu Xianxin</td> <td>2016-11-28</td> <td>Meet the person you meet among millions of people，In the past tens of millions of years，In the endless wilderness of time…</td> </tr> </tbody> </table>
- Add attribute lay-even color change
style
Static tables support the following basic properties to define table styles of different styles/sizes:
| Attribute name | Attribute value | Remark |
|---|---|---|
| lay-even | none | Used to turn on interlaced background, can be used with other properties |
| lay-skin="attribute value" | line (row border style) row (column border style) nob (borderless style) | If you use the default style, don't set this property |
| lay-size="attribute value" | sm (small size) lg (large size) | If you use the default size, don't set this property |
Form
Common properties
- required fields for the browser fixed
- lay-verify="required" The type to be verified (required is denoted as a required field)
- class="layui-input" provides a common style
Text box:
- placeholder Text information displayed by default when the text box is empty
- autocomplete form elements are automatically filled, and will be automatically filled when the cached in the browser has the same name value.
Introduce dependencies
<link rel="stylesheet" href="layui/css/"/> <script type="application/javascript" src="layui/"></script>
- form module
1. Given form container
class=“layui-form”
<form class="layui-form" action=""> </form>
2. The basic row block structure provides corresponding support and can be replaced with other structures, but it is necessary to define class="layui-form" in the outer container so that the form module can work normally.
<form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">Tag area</label> <div class="layui-input-block"> <input type="text" name="tite" class="layui-input"/> </div> </div> </form>
- class="layui-input-block" A whole line
- class="layui-input-inline" Inside the line
Input box
<input type="text" name="title" required lay-verify="required" placeholder="Please enter the title" autocomplete="off" class="layui-input">
- required: Register the required fields specified by the browser
- lay-verify: The type that needs to be verified by registering form module
- class="layui-input": The provided general CSS class
Pull down box
<select name="city" lay-verify="required"> <option value="">Please select a city</option> <option value="010">Beijing</option> <option value="021">Shanghai</option> <option value="0571">Hangzhou</option> </select>
- Set default options by selected="selected"
- Disabled property setting disabled
- Setting grouping by option
- Set the layout-search attribute to enable search function
<select name="quiz"> <option value="">Please select</option> <optgroup label="City Memory"> <option value="The first city you work for">The first city you work for？</option> </optgroup> <optgroup label="Student Time"> <option value="Your work number">Your work number？</option> <option value="Your favorite teacher">Your favorite teacher？</option> </optgroup> </select>
Check box
Default style： <input type="checkbox" name="" title="writing" checked> <input type="checkbox" name="" title="daze"> <input type="checkbox" name="" title="Disable" disabled> Original style： <input type="checkbox" name="" title="writing" lay-skin="primary" checked> <input type="checkbox" name="" title="daze" lay-skin="primary"> <input type="checkbox" name="" title="Disable" lay-skin="primary" disabled>
- Attribute title can customize text (warm reminder: If you only want to display check boxes, you can do not need to set title)
- The property checked can be selected by default
- Properties lay-skin can set the style of the checkbox
- Set value="1" to customize the value, otherwise the default on is returned when selected.
switch
In fact, it is the "variant" of the checkbox checkbox. The switch style is formed by setting 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="Open|Off"> <input type="checkbox" name="aaa" lay-skin="switch" disabled>
- The property checked can be set to default on
- The property disabled is enabled and disabled
- Property layout-text can customize the text of two states of the switch (on value|off value)
- Set value="1" to customize the value, otherwise the default on is returned when selected.
Radio box
<input type="radio" name="sex" value="nan" title="male"> <input type="radio" name="sex" value="nv" title="female" checked> <input type="radio" name="sex" value="" title="neutral" disabled>
- Attribute title customizes text
- The property disabled is enabled and disabled
- Set value="xxx" to customize the value, otherwise the default on is returned when selected.
Text field
<textarea name="" required lay-verify="required" placeholder="Please enter" class="layui-textarea"></textarea>
Assemble the in-line form
div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">scope</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">
<label class="layui-form-label">password</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="password" name="" autocomplete="off" class="layui-input">
</div>
</div>
</div>- class="layui-inline": defines the outer line inside
- class="layui-input-inline": define inner line inside
Ignore beautification rendering
<select lay-ignore> <option>…</option> </select>
- lay-ignore
Box effect
Set the box style of the form by appending the class of layui-form-pane. The internal structure remains unchanged.
<form class="layui-form layui-form-pane" action="">
The internal structure is the same，It is worth noting that Check box/switch/Radio box These combinations need to be added in this style paneproperty（Otherwise it will look awkward），like：
<div class="layui-form-item" pane>
<label class="layui-form-label">Radio box</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="male" title="male">
<input type="radio" name="sex" value="female" title="female" checked>
</div>
</div>
</form>Pop-up layer
Introducing dependencies:
<link rel="stylesheet" href="layui/css/"/> <script type="application/javascript" src="layui/"></script>
Modular:
- layer
As a representative component of Layui, layer appeared earlier than Layui. As Layui's earliest source power, layer's use was even more widely than Layui itself. layer has many custom functions and is also the preferred interactive solution for the web pop-up layer of many developers, which can play an important role in various scenarios.
| Scene | Prepare before use |
|---|---|
| 1. Use as a standalone component | If you just want to use layer alone, you can golayerOfficial website download component package. You need to introduce any version of jQuery 1.8 or above on your page and introduce it. |
| 2. Use as a layui component | If you are using layui, then you can download the layui framework directly on the official website, without introducing jQuery and , but you need to import and |
This is the end of this article about the Layui framework tutorial. For more related content on Layui usage, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!