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實現(xiàn)強(qiáng)制重定向至HTTPS頁面
這篇文章主要介紹了JavaScript實現(xiàn)強(qiáng)制重定向至HTTPS頁面,本文講解如何用JS實現(xiàn)HTTP重定向HTTPS或者HTTPS跳轉(zhuǎn)到HTTP,需要的朋友可以參考下2015-06-06

BootStrap Fileinput初始化時的一些參數(shù)

Js Snowflake(雪花算法)生成隨機(jī)ID的實現(xiàn)方法

JavaScript實現(xiàn)鼠標(biāo)滑過處生成氣泡的方法