layui框架教程
更新時間：2022年09月29日 11:24:33 作者：Steam殘酷
layui是一套開源的 Web UI 解決方案，采用自身經(jīng)典的模塊化規(guī)范，并遵循原生 HTML/CSS/JS 的開發(fā)方式，常適合網(wǎng)頁界面的快速開發(fā)，這篇文章主要介紹了layui框架教程,需要的朋友可以參考下
LayUI
layui（諧音：類 UI) 是一套開源的 Web UI 解決方案，采用自身經(jīng)典的模塊化規(guī)范，并遵循原生 HTML/CSS/JS 的開發(fā)方式，常適合網(wǎng)頁界面的快速開發(fā)。layui 區(qū)別于那些基于MVVM 底層的前端框架，它更多是面向后端開發(fā)者，無需涉足前端各種工具，只需面對瀏覽器本身，讓一切所需要的元素與交互。
LayUI的特點
1：layui屬于輕量級框架，簡單美觀，適用于后端開發(fā)模式，它在服務(wù)端頁面上有非常好的效果
2：layuu是提供給后端開發(fā)人員的ui框架，基于DOM驅(qū)動
LayUI
基本使用
1.下載layui
官網(wǎng)：https://layuion.com/
2.安裝、引入依賴
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
<script src="layui/layui.js" type="application/javascript" charset="UTF-8"></script>
</head>
<body>
<script>
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
});
</script>
</body>
</html>
需要聲明使用的模塊和回調(diào)函數(shù)，參照官方文檔，選擇自己想要的效果即可。
比如：
<script>
layui.use(['element'], function(){
var element = layui.element;
//...
});
</script> 頁面元素
布局
1.固定寬度--兩邊有空白常用
<div class="layui-container" style="background-color:navajowhite ;height: 300px;"> 固定寬度 </div>
2.完整寬度--占據(jù)寬度的100%
<div class="layui-fluid" style="background-color:navajowhite ;height: 300px;"> 完整寬度 </div>
柵格系統(tǒng)
采用layui-row來定義行
<div class="layui-row"> </div>
- 采用layui-col-md*這樣的預(yù)設(shè)類來定義一組列（column）且放在行（row）內(nèi)，其中
- 變量md代表的是不同屏幕下的標(biāo)記
- 邊浪*代表的是該列所占用的12等分（如6/12）可選值為1-12
- 如果多個列的“等分?jǐn)?shù)值”總和數(shù)等于12，剛好滿行排布。如果大于12，若雨的列將自動另起一行
- 列可以同時出現(xiàn)最多四中不同的組合，分別是xs（超小屏幕，如手機(jī)），sm（小屏幕，平板），md（桌面中等屏幕），lg（桌面大型屏幕）
- 可對列追加類似的layui-col-space5，layui-col-md-offerset3這樣的預(yù)設(shè)類來定義列的間距和偏移
- 可以在類（column）元素中放入你自己的任意元素來填充內(nèi)容
<div class="layui-container"> <div class="layui-row"> <div class="layui-col-md5" style="background-color: deepskyblue;"> 內(nèi)容的5/12 </div> <div class="layui-col-md7" style="background-color: bisque;"> 內(nèi)容的7/12 </div> </div> <div class="layui-row"> <div class="layui-col-md4" style="background-color: powderblue;"> 內(nèi)容的4/12 </div> <div class="layui-col-md4" style="background-color: mediumaquamarine;"> 內(nèi)容的4/12 </div> </div> </div>
響應(yīng)式規(guī)則
css媒體查詢（Media Queries）的強(qiáng)力支持，從而針對不同尺寸的屏幕進(jìn)行相應(yīng)的適配處理。
| 類型 | 超小屏幕手機(jī)（<768px) | 小屏幕手機(jī)（平板>=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)行為 | 始終an設(shè)定的比例水平排列 | 在當(dāng)前屏幕下水平排列，如果屏幕的大小低于臨界值則堆疊排列 | 在當(dāng)前屏幕下水平排列，如果屏幕的代銷低于臨界值則堆疊排列 | 在當(dāng)前屏幕下水平排列，如果屏幕大小低于臨界值則堆疊排列 |
<div class="layui-row">
<div class="layui-col-md5 layui-col-sm6">
響應(yīng)式規(guī)則
</div>
</div>列邊距：
通過“列邊距”的預(yù)設(shè)類，來設(shè)定之間的間距。且一行中最左的列不會出現(xiàn)左邊距，最右邊的列不會出現(xiàn)右邊距。列邊距在保證排版美觀的同時，還可以進(jìn)一步保持分列的寬度精細(xì)程度。我們結(jié)合網(wǎng)頁常用的邊距，預(yù)設(shè)了12中不同的尺寸的邊距。
/* 支持列之間為1px-30px的區(qū)間的所有雙數(shù)間距，以及1px，5px，15px，25px的單數(shù)間隔 */ 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>
注：
1.layui-col-space，設(shè)置后起不到作用因為設(shè)置的是padding也就是說向內(nèi)縮，所以設(shè)置背景色padding也是會填上顏色，看起來好像沒有間距一樣，可以再里面在加一個div，來達(dá)到目的。
2.間距一般不高于30px，如果超過30，建議使用列偏移
列偏移
?對列最佳類似layui-col-md-offset* 的預(yù)設(shè)類，從而讓列向右偏移。其中*代表的是偏移占據(jù)的列數(shù)，可選中為1-12
如：layui-col-md-offset3，即和代表在“中型桌面屏幕下，讓該列向右偏移3個列表寬度
<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>
注：
?列偏移可針對不同屏幕的標(biāo)準(zhǔn)進(jìn)行設(shè)定，在當(dāng)前設(shè)定屏幕下最有效，當(dāng)?shù)陀谧烂嫫聊坏囊?guī)定的臨界值，就會堆疊排列。
列嵌套
可以對柵格進(jìn)行無窮層次的嵌套。在列元素(layui-col-md*)中插入行元素（layui-row），即可完成嵌套。
<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;">內(nèi)部5</div> <div class="layui-col-md5" style="background-color: mistyrose;">內(nèi)部5</div> <div class="layui-col-md2" style="background-color: aqua;">內(nèi)部5</div> </div> </div> </div> </div> </div>
基本元素
按鈕
?向任意HTML元素設(shè)定class=“layui-btn”，建立一個基礎(chǔ)按鈕。通過追加格式為layui-btn-{type}的class來定義其他按鈕風(fēng)格。
主題
| 名稱 | 組合 |
|---|---|
| 原始 | class="layui-btn layui-btn-primary" |
| 默認(rèn) | 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" |
中間是空心：
| 名稱 | 組合 |
|---|---|
| 主色 | class="layui-btn layui-btn-primary layui-border-green" |
| 百搭 | class="layui-btn layui-btn-primary layui-border-blue" |
| 暖色 | class="layui-btn layui-btn-primary layui-border-orange" |
| 警告 | class="layui-btn layui-btn-primary layui-border-red" |
| 深色 | class="layui-btn layui-btn-primary layui-border-black" |
尺寸：
| 尺寸 | 組合 |
|---|---|
| 大型 | class="layui-btn layui-btn-lg" |
| 默認(rèn) | class="layui-btn" |
| 小型 | class="layui-btn layui-btn-sm" |
| 迷你 | class="layui-btn layui-btn-xs" |
| 尺寸 | 組合 |
|---|---|
| 大型百搭 | 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" |
流體自適應(yīng)
<button type="button" class="layui-btn layui-btn-fluid">流體按鈕（最大化適應(yīng)）</button>
圓角
| 主題 | 組合 |
|---|---|
| 原始 | class="layui-btn layui-btn-radius layui-btn-primary" |
| 默認(rèn) | 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" |
| 尺寸 | 組合 |
|---|---|
| 大型百搭 | class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal" |
| 小型警告 | class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger" |
| 迷你禁用 | class="layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled" |
圖標(biāo)
<button type="button" class="layui-btn"> <i class="layui-icon layui-icon-down layui-font-12"></i> 按鈕</button> <button type="button" class="layui-btn layui-btn-sm layui-btn-primary"> <i class="layui-icon layui-icon-left"></i></button>
默認(rèn)按鈕 樣式 大小 圓角 流動自適應(yīng)
**i 圖標(biāo) 樣式 **
導(dǎo)航
?導(dǎo)航一般指頁面引導(dǎo)性頻道集合，多以菜單的形式呈現(xiàn)，可應(yīng)用于頭部和側(cè)邊，面包屑結(jié)構(gòu)簡單、支持自定義分隔符
?依賴加載的模塊：element
實現(xiàn)的步驟：
引入的資源：
<link rel="stylesheet" href="layui/css/layui.css"/> <script type="application/javascript" src="layui/layui.js"></script>
class=“layui-nav”
class=“layui-nav-item”--class=“layui-nav-item layui-this”選中
class="layui-nav-child" 二級菜單
例子：
<ul class="layui-nav" lay-filter=""> <li class="layui-nav-item"><a href="">最新活動</a></li> <li class="layui-nav-item layui-this"><a href="">產(chǎn)品</a></li> <li class="layui-nav-item"><a href="">大數(shù)據(jù)</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="">社區(qū)</a></li> </ul>
垂直樣式+側(cè)邊
class="layui-nav layui-nav-tree layui-nav-side"
背景顏色
樣式往后加：layui-bg-orange
徽章
直接對應(yīng)往后加
面包屑
<span class="layui-breadcrumb">
<a href="">首頁</a>
<a href="">國際新聞</a>
<a href="">亞太地區(qū)</a>
<a><cite>正文</cite></a>
</span>- 選中
- 通過設(shè)置屬性 lay-separator="-" 來自定義分隔符
選項卡
引入資源:
<link rel="stylesheet" href="layui/css/layui.css"/> <script type="application/javascript" src="layui/layui.js"></script>
- class="layui-tab"
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">網(wǎng)站設(shè)置</li>
<li>用戶管理</li>
<li>權(quán)限分配</li>
<li>商品管理</li>
<li>訂單管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">內(nèi)容1</div>
<div class="layui-tab-item">內(nèi)容2</div>
<div class="layui-tab-item">內(nèi)容3</div>
<div class="layui-tab-item">內(nèi)容4</div>
<div class="layui-tab-item">內(nèi)容5</div>
</div>
</div>風(fēng)格
默認(rèn)風(fēng)格：
- layui-tab
簡潔風(fēng)格追加樣式：
- layui-tab-brief
卡片風(fēng)格追加樣式：
- layui-tab-card
帶刪除
對父層容器設(shè)置屬性 lay-allowClose="true" 來允許Tab選項卡被刪除
表格
<table class="layui-table" lay-even> <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>
- 添加屬性 lay-even 隔行換色
風(fēng)格
靜態(tài)表格支持以下基礎(chǔ)屬性，可定義不同風(fēng)格/尺寸的表格樣式：
| 屬性名 | 屬性值 | 備注 |
|---|---|---|
| lay-even | 無 | 用于開啟 隔行 背景，可與其它屬性一起使用 |
| lay-skin="屬性值" | line （行邊框風(fēng)格） row （列邊框風(fēng)格） nob （無邊框風(fēng)格） | 若使用默認(rèn)風(fēng)格不設(shè)置該屬性即可 |
| lay-size="屬性值" | sm （小尺寸） lg （大尺寸） | 若使用默認(rèn)尺寸不設(shè)置該屬性即可 |
表單
常用屬性
- equired 瀏覽器固定的必填字段
- lay-verify="required" 需要驗證的類型（required 表示為必填字段）
- class=“layui-input” 提供的通用樣式
文本框：
- placeholder 當(dāng)文本框為空時默認(rèn)顯示的文本信息
- autocomplete 表單元素是否自動填充，當(dāng)瀏覽器中緩存有相同name值是會自動填充
引入依賴
<link rel="stylesheet" href="layui/css/layui.css"/> <script type="application/javascript" src="layui/layui.js"></script>
- form 模塊
1.給定form容器
class=“layui-form”
<form class="layui-form" action=""> </form>
2.基本的行區(qū)塊結(jié)構(gòu)，它提供了相應(yīng)是的支持，可以換成其他結(jié)構(gòu)，但必學(xué)要在外層容器中定義class=“layui-form”，form模塊才能正常工作
<form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">標(biāo)簽區(qū)域</label> <div class="layui-input-block"> <input type="text" name="tite" class="layui-input"/> </div> </div> </form>
- class="layui-input-block" 一整行
- class="layui-input-inline" 行內(nèi)
輸入框
<input type="text" name="title" required lay-verify="required" placeholder="請輸入標(biāo)題" autocomplete="off" class="layui-input">
- required：注冊瀏覽器所規(guī)定的必填字段
- lay-verify：注冊form模塊需要驗證的類型
- class="layui-input"：layui.css提供的通用CSS類
下拉框
<select name="city" lay-verify="required"> <option value="">請選擇一個城市</option> <option value="010">北京</option> <option value="021">上海</option> <option value="0571">杭州</option> </select>
- 通過selected=“selected”設(shè)置默認(rèn)選項
- disabled屬性設(shè)置禁用
- 通過option設(shè)置分組
- 設(shè)置lay-search屬性開啟搜索功能
<select name="quiz"> <option value="">請選擇</option> <optgroup label="城市記憶"> <option value="你工作的第一個城市">你工作的第一個城市？</option> </optgroup> <optgroup label="學(xué)生時代"> <option value="你的工號">你的工號？</option> <option value="你最喜歡的老師">你最喜歡的老師？</option> </optgroup> </select>
復(fù)選框
默認(rèn)風(fēng)格： <input type="checkbox" name="" title="寫作" checked> <input type="checkbox" name="" title="發(fā)呆"> <input type="checkbox" name="" title="禁用" disabled> 原始風(fēng)格： <input type="checkbox" name="" title="寫作" lay-skin="primary" checked> <input type="checkbox" name="" title="發(fā)呆" lay-skin="primary"> <input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
- 屬性title可自定義文本（溫馨提示：如果只想顯示復(fù)選框，可以不用設(shè)置title）
- 屬性checked可設(shè)定默認(rèn)選中
- 屬性lay-skin可設(shè)置復(fù)選框的風(fēng)格
- 設(shè)置value="1"可自定義值，否則選中時返回的就是默認(rèn)的on
開關(guān)
其實就是checkbox復(fù)選框的“變種”，通過設(shè)定 lay-skin="switch" 形成了開關(guān)風(fēng)格
<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="開啟|關(guān)閉"> <input type="checkbox" name="aaa" lay-skin="switch" disabled>
- 屬性checked可設(shè)定默認(rèn)開
- 屬性disabled開啟禁用
- 屬性lay-text可自定義開關(guān)兩種狀態(tài)的文本 （打開的值|關(guān)閉的值）
- 設(shè)置value="1"可自定義值，否則選中時返回的就是默認(rèn)的on
單選框
<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開啟禁用
- 設(shè)置value="xxx"可自定義值，否則選中時返回的就是默認(rèn)的on
文本域
<textarea name="" required lay-verify="required" placeholder="請輸入" class="layui-textarea"></textarea>
組裝行內(nèi)表單
div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">范圍</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">密碼</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="password" name="" autocomplete="off" class="layui-input">
</div>
</div>
</div>- class="layui-inline"：定義外層行內(nèi)
- class="layui-input-inline"：定義內(nèi)層行內(nèi)
忽略美化渲染
<select lay-ignore> <option>…</option> </select>
- lay-ignore
方框效果
通過追加 layui-form-pane 的class，來設(shè)定表單的方框風(fēng)格。內(nèi)部結(jié)構(gòu)不變。
<form class="layui-form layui-form-pane" action="">
內(nèi)部結(jié)構(gòu)都一樣，值得注意的是 復(fù)選框/開關(guān)/單選框 這些組合在該風(fēng)格下需要額外添加 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>彈出層
引入依賴：
<link rel="stylesheet" href="layui/css/layui.css"/> <script type="application/javascript" src="layui/layui.js"></script>
模塊化：
- layer
layer 作為 Layui 的代表性組件 ，比 Layui 要出現(xiàn)的早，作為 Layui 最早的源動力，layer 的使用之廣泛甚至一度超過了 Layui 本身。 layer 擁有眾多的自定義功能，也是許多開發(fā)者的網(wǎng)頁彈出層的首選交互方案，在各類場景都能發(fā)揮重要作用。
| 場景 | 用前準(zhǔn)備 |
|---|---|
| 1. 作為獨立組件使用 | 如果你只是單獨想使用 layer，你可以去 layer 獨立版本官網(wǎng)下載組件包。你需要在你的頁面引入jQuery1.8 以上的任意版本，并引入layer.js。 |
| 2. 作為 layui 組件使用 | 如果你使用的是 layui，那么你直接在官網(wǎng)下載 layui 框架即可，無需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js |
到此這篇關(guān)于layui框架教程的文章就介紹到這了,更多相關(guān)layui使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家分享介紹了JavaScript頭像上傳插件源碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要介紹了基于javascript實現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
JavaScript實現(xiàn)強(qiáng)制重定向至HTTPS頁面
這篇文章主要介紹了JavaScript實現(xiàn)強(qiáng)制重定向至HTTPS頁面,本文講解如何用JS實現(xiàn)HTTP重定向HTTPS或者HTTPS跳轉(zhuǎn)到HTTP,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細(xì)介紹了JavaScript字符串檢索字符的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06 
BootStrap Fileinput初始化時的一些參數(shù)
本文通過一個例子給大家簡單介紹了bootstrap fileinput初始化時的一些參數(shù)，非常不錯，具有參考借鑒價值，需要的朋友參考下
2016-12-12 
js 鼠標(biāo)、鍵盤的幾個事件的例子
2008-07-07 
這篇文章主要針對JavaScript數(shù)組操作函數(shù)push，pop，join，shift，unshift，slice，splice，concat進(jìn)行總結(jié)，感興趣的小伙伴們可以參考一下
2016-08-08 
Js Snowflake(雪花算法)生成隨機(jī)ID的實現(xiàn)方法
這篇文章主要介紹了Js Snowflake(雪花算法)生成隨機(jī)ID的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08 
JavaScript實現(xiàn)鼠標(biāo)滑過處生成氣泡的方法
這篇文章主要介紹了JavaScript實現(xiàn)鼠標(biāo)滑過處生成氣泡的方法,涉及鼠標(biāo)事件與頁面樣式的相關(guān)操作技巧,需要的朋友可以參考下
2015-05-05