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ā)模式，它在服務端頁面上有非常好的效果
2：layuu是提供給后端開發(fā)人員的ui框架，基于DOM驅動
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>
需要聲明使用的模塊和回調函數(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*這樣的預設類來定義一組列（column）且放在行（row）內，其中
- 變量md代表的是不同屏幕下的標記
- 邊浪*代表的是該列所占用的12等分（如6/12）可選值為1-12
- 如果多個列的“等分數(shù)值”總和數(shù)等于12，剛好滿行排布。如果大于12，若雨的列將自動另起一行
- 列可以同時出現(xiàn)最多四中不同的組合，分別是xs（超小屏幕，如手機），sm（小屏幕，平板），md（桌面中等屏幕），lg（桌面大型屏幕）
- 可對列追加類似的layui-col-space5，layui-col-md-offerset3這樣的預設類來定義列的間距和偏移
- 可以在類（column）元素中放入你自己的任意元素來填充內容
<div class="layui-container"> <div class="layui-row"> <div class="layui-col-md5" style="background-color: deepskyblue;"> 內容的5/12 </div> <div class="layui-col-md7" style="background-color: bisque;"> 內容的7/12 </div> </div> <div class="layui-row"> <div class="layui-col-md4" style="background-color: powderblue;"> 內容的4/12 </div> <div class="layui-col-md4" style="background-color: mediumaquamarine;"> 內容的4/12 </div> </div> </div>
響應式規(guī)則
css媒體查詢（Media Queries）的強力支持，從而針對不同尺寸的屏幕進行相應的適配處理。
| 類型 | 超小屏幕手機（<768px) | 小屏幕手機（平板>=768px) | 中等屏幕（桌面>=992px) | 大型屏幕（桌面>=1200px |
|---|---|---|---|---|
| .layui-container的值 | auto | 750px | 970px | 1170px |
| 標記 | xs | sm | md | lg |
| 列對應類*為1-12的等分數(shù)值 | layui-col-xs* | layui-col-sm* | layui-col-md* | layui-col-lg* |
| 總列數(shù) | 12 | 12 | 12 | 12 |
| 相應行為 | 始終an設定的比例水平排列 | 在當前屏幕下水平排列，如果屏幕的大小低于臨界值則堆疊排列 | 在當前屏幕下水平排列，如果屏幕的代銷低于臨界值則堆疊排列 | 在當前屏幕下水平排列，如果屏幕大小低于臨界值則堆疊排列 |
<div class="layui-row">
<div class="layui-col-md5 layui-col-sm6">
響應式規(guī)則
</div>
</div>列邊距：
通過“列邊距”的預設類，來設定之間的間距。且一行中最左的列不會出現(xiàn)左邊距，最右邊的列不會出現(xiàn)右邊距。列邊距在保證排版美觀的同時，還可以進一步保持分列的寬度精細程度。我們結合網(wǎng)頁常用的邊距，預設了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，設置后起不到作用因為設置的是padding也就是說向內縮，所以設置背景色padding也是會填上顏色，看起來好像沒有間距一樣，可以再里面在加一個div，來達到目的。
2.間距一般不高于30px，如果超過30，建議使用列偏移
列偏移
?對列最佳類似layui-col-md-offset* 的預設類，從而讓列向右偏移。其中*代表的是偏移占據(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>
注：
?列偏移可針對不同屏幕的標準進行設定，在當前設定屏幕下最有效，當?shù)陀谧烂嫫聊坏囊?guī)定的臨界值，就會堆疊排列。
列嵌套
可以對柵格進行無窮層次的嵌套。在列元素(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;">內部5</div> <div class="layui-col-md5" style="background-color: mistyrose;">內部5</div> <div class="layui-col-md2" style="background-color: aqua;">內部5</div> </div> </div> </div> </div> </div>
基本元素
按鈕
?向任意HTML元素設定class=“layui-btn”，建立一個基礎按鈕。通過追加格式為layui-btn-{type}的class來定義其他按鈕風格。
主題
| 名稱 | 組合 |
|---|---|
| 原始 | class="layui-btn layui-btn-primary" |
| 默認 | 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" |
| 默認 | 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" |
流體自適應
<button type="button" class="layui-btn layui-btn-fluid">流體按鈕（最大化適應）</button>
圓角
| 主題 | 組合 |
|---|---|
| 原始 | class="layui-btn layui-btn-radius layui-btn-primary" |
| 默認 | 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" |
圖標
<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>
默認按鈕 樣式 大小 圓角 流動自適應
**i 圖標 樣式 **
導航
?導航一般指頁面引導性頻道集合，多以菜單的形式呈現(xiàn)，可應用于頭部和側邊，面包屑結構簡單、支持自定義分隔符
?依賴加載的模塊：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>
垂直樣式+側邊
class="layui-nav layui-nav-tree layui-nav-side"
背景顏色
樣式往后加：layui-bg-orange
徽章
直接對應往后加
面包屑
<span class="layui-breadcrumb">
<a href="">首頁</a>
<a href="">國際新聞</a>
<a href="">亞太地區(qū)</a>
<a><cite>正文</cite></a>
</span>- 選中
- 通過設置屬性 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)站設置</li>
<li>用戶管理</li>
<li>權限分配</li>
<li>商品管理</li>
<li>訂單管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">內容1</div>
<div class="layui-tab-item">內容2</div>
<div class="layui-tab-item">內容3</div>
<div class="layui-tab-item">內容4</div>
<div class="layui-tab-item">內容5</div>
</div>
</div>風格
默認風格：
- layui-tab
簡潔風格追加樣式：
- layui-tab-brief
卡片風格追加樣式：
- layui-tab-card
帶刪除
對父層容器設置屬性 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 隔行換色
風格
靜態(tài)表格支持以下基礎屬性，可定義不同風格/尺寸的表格樣式：
| 屬性名 | 屬性值 | 備注 |
|---|---|---|
| lay-even | 無 | 用于開啟 隔行 背景，可與其它屬性一起使用 |
| lay-skin="屬性值" | line （行邊框風格） row （列邊框風格） nob （無邊框風格） | 若使用默認風格不設置該屬性即可 |
| lay-size="屬性值" | sm （小尺寸） lg （大尺寸） | 若使用默認尺寸不設置該屬性即可 |
表單
常用屬性
- equired 瀏覽器固定的必填字段
- lay-verify="required" 需要驗證的類型（required 表示為必填字段）
- class=“layui-input” 提供的通用樣式
文本框：
- placeholder 當文本框為空時默認顯示的文本信息
- autocomplete 表單元素是否自動填充，當瀏覽器中緩存有相同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ū)塊結構，它提供了相應是的支持，可以換成其他結構，但必學要在外層容器中定義class=“layui-form”，form模塊才能正常工作
<form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">標簽區(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" 行內
輸入框
<input type="text" name="title" required lay-verify="required" placeholder="請輸入標題" 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”設置默認選項
- disabled屬性設置禁用
- 通過option設置分組
- 設置lay-search屬性開啟搜索功能
<select name="quiz"> <option value="">請選擇</option> <optgroup label="城市記憶"> <option value="你工作的第一個城市">你工作的第一個城市？</option> </optgroup> <optgroup label="學生時代"> <option value="你的工號">你的工號？</option> <option value="你最喜歡的老師">你最喜歡的老師？</option> </optgroup> </select>
復選框
默認風格： <input type="checkbox" name="" title="寫作" checked> <input type="checkbox" name="" title="發(fā)呆"> <input type="checkbox" name="" title="禁用" disabled> 原始風格： <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可自定義文本（溫馨提示：如果只想顯示復選框，可以不用設置title）
- 屬性checked可設定默認選中
- 屬性lay-skin可設置復選框的風格
- 設置value="1"可自定義值，否則選中時返回的就是默認的on
開關
其實就是checkbox復選框的“變種”，通過設定 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="開啟|關閉"> <input type="checkbox" name="aaa" lay-skin="switch" disabled>
- 屬性checked可設定默認開
- 屬性disabled開啟禁用
- 屬性lay-text可自定義開關兩種狀態(tài)的文本 （打開的值|關閉的值）
- 設置value="1"可自定義值，否則選中時返回的就是默認的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開啟禁用
- 設置value="xxx"可自定義值，否則選中時返回的就是默認的on
文本域
<textarea name="" required lay-verify="required" placeholder="請輸入" class="layui-textarea"></textarea>
組裝行內表單
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"：定義外層行內
- class="layui-input-inline"：定義內層行內
忽略美化渲染
<select lay-ignore> <option>…</option> </select>
- lay-ignore
方框效果
通過追加 layui-form-pane 的class，來設定表單的方框風格。內部結構不變。
<form class="layui-form layui-form-pane" action="">
內部結構都一樣，值得注意的是 復選框/開關/單選框 這些組合在該風格下需要額外添加 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ā)揮重要作用。
| 場景 | 用前準備 |
|---|---|
| 1. 作為獨立組件使用 | 如果你只是單獨想使用 layer，你可以去 layer 獨立版本官網(wǎng)下載組件包。你需要在你的頁面引入jQuery1.8 以上的任意版本，并引入layer.js。 |
| 2. 作為 layui 組件使用 | 如果你使用的是 layui，那么你直接在官網(wǎng)下載 layui 框架即可，無需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js |
到此這篇關于layui框架教程的文章就介紹到這了,更多相關layui使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
用了setTimeout()想實現(xiàn)遞歸調用，如果第一個參數(shù)不加引號的話，就會出錯，下面與大家分享下該如何解決2014-09-09
swiper.js插件實現(xiàn)pc端文本上下滑動功能示例
這篇文章主要介紹了swiper.js插件實現(xiàn)pc端文本上下滑動功能,結合實例形式分析了swiper.js插件的具體引用與相關使用技巧,需要的朋友可以參考下2018-12-12
這篇文章主要為大家詳細分析了Bootstrap部分源代碼，先提供給大家學習，感興趣的小伙伴們可以參考一下2016-08-08
Javascript實現(xiàn)的類似Google的Div拖動效果代碼
Javascript實現(xiàn)的類似Google的Div拖動效果代碼，需要的朋友可以參考下。2011-08-08
JS+HTML5手機開發(fā)之滾動和慣性緩動實現(xiàn)方法分析
這篇文章主要介紹了JS+HTML5手機開發(fā)之滾動和慣性緩動實現(xiàn)方法,涉及javascript結合HTML5特性控制頁面元素的運動技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
用SWFObject 插入flash，好處多多，代碼簡潔，不會出現(xiàn)微軟的“單擊此處以激活控件”的提示（據(jù)可靠消息，這個是微軟惹的官司，其結果是害苦了用戶）。2010-07-07
動態(tài)的創(chuàng)建一個元素createElement及刪除一個元素
本文用示例為大家介紹下動態(tài)創(chuàng)建一個元素createElement及刪除一個元素，感興趣的朋友可以參考下2014-01-01
當頁面特別長的時候，用戶想回到頁面頂部，必須得滾動好幾次滾動鍵才能回到頂部，如果在頁面右下角有個“返回頂部”的按鈕，用戶點擊一下，就可以回到頂部，對于用戶來說，是一個比較好的體驗。2015-05-05
這篇文章主要為大家詳細介紹了Javascript中的作用域，具有一定的參考價值，感興趣的朋友可以參考一下2016-10-10