LayUI

主要內(nèi)容

LayUI 的安裝及使用

LayUI 的介紹

layui（諧音：類UI) 是一款采用自身模塊規(guī)范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式撬腾，門檻極低，拿來即用胰默。

由國人開發(fā)漓踢，16年出廠的框架，其主要提供了很多好看喧半、方便的樣式，并且基本拿來即用挺据，和Bootstrap有些相似取具，但該框架有個(gè)極大的好處就是定義了很多前后端交互的樣式接口扁耐，如分頁表格，只需在前端配置好接口块仆，后端則按照定義好的接口規(guī)則返回?cái)?shù)據(jù)构蹬，即可完成頁面的展示悔据，極大減少了后端人員的開發(fā)成本。

官網(wǎng)：https://www.layui.com

官方文檔：https://www.layui.com/doc/

LayUI 的特點(diǎn)

（1）layui屬于輕量級框架铐姚，簡單美觀肛捍。適用于開發(fā)后端模式，它在服務(wù)端頁面上有非常好的效果拙毫。

（2）layui是提供給后端開發(fā)人員的ui框架，基于DOM驅(qū)動峭跳。

下載與使用

在官網(wǎng)首頁下載到 layui 的最新版缺前。目錄結(jié)構(gòu)如下：

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n20" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;"> ├─css // css目錄
│ │─modules // 模塊css目錄（一般如果模塊相對較大，我們會單獨(dú)提取衅码，比如下面三個(gè)：）
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css // 核心樣式文件
├─font // 字體圖標(biāo)目錄
├─images // 圖片資源目錄（目前只有l(wèi)ayim和編輯器用到的GIF表情）
│─lay // 模塊核心目錄
│ └─modules // 各模塊組件
│─layui.js // 基礎(chǔ)核心庫
└─layui.all.js // 包含layui.js和所有模塊的合并文件</pre>
獲得 layui 后，將其完整地部署（拷貝到項(xiàng)目中）到你的項(xiàng)目目錄垛玻，你只需要引入下述兩個(gè)文件：

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n23" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">./layui/css/layui.css
./layui/layui.js // 提示：如果是采用非模塊化方式奶躯，此處可換成：./layui/layui.all.js</pre>

基本的入門頁面

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n27" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><!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>

還需要聲明需要使用的模塊和 回調(diào)函數(shù)嘹黔。參照官方文檔，選擇自己想要的效果就行儡蔓。

比如：

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n32" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;"><script>
// 注意：導(dǎo)航依賴 element 模塊，否則無法進(jìn)行功能性操作
layui.use('element', function(){
var element = layui.element;
?
//…
});
</script></pre>

頁面元素

布局

布局容器

固定寬度

將柵格放入一個(gè)帶有 class="layui-container" 的特定的容器中恳不，以便在小屏幕以上的設(shè)備中固定寬度开呐，讓列可控规求。

完整寬度

可以不固定容器寬度卵惦。將柵格或其它元素放入一個(gè)帶有 class="layui-fluid" 的容器中，那么寬度將不會固定沮尿，而是 100% 適應(yīng)

柵格系統(tǒng)

為了豐富網(wǎng)頁布局畜疾，簡化 HTML/CSS 代碼的耦合，并提升多終端的適配能力啡捶，layui 引進(jìn)了一套具備響應(yīng)式能力的柵格系統(tǒng)。將容器進(jìn)行了 12 等分彤敛，預(yù)設(shè)了 4*12 種 CSS 排列類了赌，它們在移動設(shè)備墨榄、平板勿她、桌面中/大尺寸四種不同的屏幕下發(fā)揮著各自的作用。

柵格布局規(guī)則

采用 layui-row 來定義行，如：

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n51" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;"><div class="layui-row"></div></pre>
采用類似 layui-col-md* 這樣的預(yù)設(shè)類來定義一組列（column）筒狠，且放在行（row）內(nèi)箱沦。其中：
- 變量 md 代表的是不同屏幕下的標(biāo)記
- 變量 ***** 代表的是該列所占用的12等分?jǐn)?shù)（如6/12），可選值為 1 - 12
- 如果多個(gè)列的“等分?jǐn)?shù)值”總和等于12谓形，則剛好滿行排列。如果大于12寒跳，多余的列將自動另起一行。
列可以同時(shí)出現(xiàn)最多四種不同的組合米辐，分別是：xs（超小屏幕，如手機(jī)）翘贮、sm（小屏幕，如平板）狸页、md（桌面中等屏幕）、lg（桌面大型屏幕）址遇。
可對列追加類似 layui-col-space5齿穗、 layui-col-md-offset3 這樣的預(yù)設(shè)類來定義列的間距和偏移。
可以在列（column）元素中放入你自己的任意元素填充內(nèi)容

示例：

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n68" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><h3>常規(guī)布局（以中型屏幕桌面為例）：</h3>
<div class="layui-row">
<div class="layui-col-md9" style="background-color: #00F7DE;">
你的內(nèi)容 9/12
</div>
<div class="layui-col-md3" style="background-color: rosybrown;">
你的內(nèi)容 3/12
</div>
</div></pre>

響應(yīng)式規(guī)則

柵格的響應(yīng)式能力跺株，得益于CSS3媒體查詢（Media Queries）的強(qiáng)力支持脖卖，從而針對四類不同尺寸的屏幕，進(jìn)行相應(yīng)的適配處理畦木。

	超小屏幕 (手機(jī)<768px)	小屏幕 (平板≥768px)	中等屏幕 (桌面≥992px)	大型屏幕(桌面≥1200px)
.layui-container的值	auto	750px	970px	1170px
標(biāo)記	xs	sm	md	lg
列對應(yīng)類 * 為1-12的等分?jǐn)?shù)值	layui-col-xs*	layui-col-sm*	layui-col-md*	layui-col-lg*
總列數(shù)	12	12	12	12
響應(yīng)行為	始終按設(shè)定的比例水平排列	在當(dāng)前屏幕下水平排列，如果屏幕大小低于臨界值則堆疊排列	在當(dāng)前屏幕下水平排列蛆封，如果屏幕大小低于臨界值則堆疊排列	在當(dāng)前屏幕下水平排列勾栗，如果屏幕大小低于臨界值則堆疊排列

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n109" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><h3>平板、桌面端的不同表現(xiàn)：</h3>
<div class="layui-row">
<div class="layui-col-sm6 layui-col-md4"
style="background-color: thistle">
平板≥768px：6/12 | 桌面端≥992px：4/12
</div>
</div>

列邊距

通過“列間距”的預(yù)設(shè)類砸讳，來設(shè)定列之間的間距界牡。且一行中最左的列不會出現(xiàn)左邊距，最右的列不會出現(xiàn)右邊距宿亡。列間距在保證排版美觀的同時(shí)，還可以進(jìn)一步保證分列的寬度精細(xì)程度挽荠。我們結(jié)合網(wǎng)頁常用的邊距泊碑，預(yù)設(shè)了 12 種不同尺寸的邊距毯欣，分別是：

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="css" cid="n112" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">/* 支持列之間為 1px-30px 區(qū)間的所有雙數(shù)間隔，以及 1px腹忽、5px砚作、15px、25px 的單數(shù)間隔 */
layui-col-space1
layui-col-space2
layui-col-space4
layui-col-space5
layui-col-space6
layui-col-space8
layui-col-space10
layui-col-space12
layui-col-space14
layui-col-space15
layui-col-space16
layui-col-space18
layui-col-space20
layui-col-space22
layui-col-space24
layui-col-space25
layui-col-space26
layui-col-space28
layui-col-space30</pre>

示例：

注：

layui-col-space：設(shè)置后不起作用主要是因?yàn)?strong>設(shè)置的是padding,也就是說是向內(nèi)縮着裹，所以設(shè)置背景色padding也是會添上顏色米同，看起來好像沒有間距一樣∶媪福可以在里面在加一個(gè)div，來達(dá)到目的熬苍。
1. 間距一般不高于30px，如果超過30婿脸，建議使用列偏移。

列偏移

對列追加類似 layui-col-md-offset* 的預(yù)設(shè)類狐树，從而讓列向右偏移凿歼。其中 * 號代表的是偏移占據(jù)的列數(shù)冗恨，可選中為 1 - 12。 ? 如：layui-col-md-offset3掀抹，即代表在“中型桌面屏幕”下，讓該列向右偏移 3 個(gè)列寬度

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n125" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><h3>列偏移</h3>
<div class="layui-row">
<div class="layui-col-md4" style="background-color: rosybrown;">
4/12
</div>
<div class="layui-col-md4 layui-col-md-offset4"
style="background-color: cornflowerblue;">
偏移4列蓉驹，從而在最右
</div>
</div></pre>

注：列偏移可針對不同屏幕的標(biāo)準(zhǔn)進(jìn)行設(shè)定，在當(dāng)前設(shè)定的屏幕下有效态兴，當(dāng)?shù)陀谧烂嫫聊坏囊?guī)定的臨界值，就會堆疊排列瞻润。

列嵌套

可以對柵格進(jìn)行無窮層次的嵌套。在列元素（layui-col-md）中插入行元素（layui-row*）正勒，即可完成嵌套。