Layui 學習整理

2021-07-26 10:00:54 字數 2919 閱讀 6133

圖示字元

layui的字元採用的是unicode字元。所有圖示全部採用字型形式,這一點和bootstrap非常相似,但是用法上稍有區別。

通過對乙個內聯元素(一般推薦用 i標籤)設定 class=」layui-icon」,來定義乙個圖示,然後對元素加上圖示對應的 unicode 字元,即可顯示出你想要的圖示。如下:

class="layui-icon">i>
和bootstrap同樣的,你可以設定字元的大小和顏色。

常用按鈕

layui的按鈕有多種樣式可供選擇,但是無論使用哪種樣式的按鈕時,都必須在該html標籤中加上乙個名為layui-btn的class名。其次再新增你需要使用的按鈕樣式所對應的的class名。

各按鈕樣式class名,按照主題可分為:

原始(layui-btn-primary)background-color:#009688;

預設(layui-btn)background-color:#009688;

百搭(layui-btn-normal)background-color:#1e9fff;

暖色(layui-btn-warm)background-color:#f7b824;

警告(layui-btn-danger)background-color:#ff5722;

禁用(layui-btn-disabled)background-color:#fbfbfb;

按鈕的預設樣式(layui-btn)在layui.css中的第370行至384行:

.layui-btn

注:layui的按鈕和bootstrap一樣可以在按鈕中加入圖示字元

按照形狀,按鈕還可以分為:

圓角(layui-btn-radius)

大按鈕(layui-btn-big)

小按鈕(layui-btn-small)

迷你按鈕(layui-btn-mini)

表單

在乙個容器中設定class=」layui-form」來標識乙個表單元素塊。

*注:需要依賴form元件,如果不載入,select、checkbox、radio等將無法顯示,並且無法使用form相關功能。

下拉選擇框

1.屬性中增加selected來規定預設已選中選項,disabled來禁用一些選項,label值為分組名。

name="quiz">

label="城市記憶">

value="你工作的第乙個城市">你工作的第乙個城市?option>

optgroup>

label="學生時代">

value="你的工號"

selected>你的工號?option>

value="你最喜歡的老師"

disabled>你最喜歡的老師?option>

optgroup>

select>

2.required:註冊瀏覽器所規定的必填字段 ,lay-verify:註冊form元件需要驗證的型別 ,class=」layui-input」:layui.css提供的通用css類 。

lay-verify:主要是五種驗證,標題(title)、姓名(fname/lname)、手機號碼(phone)、郵箱(e-mail).

type=

"text" name="title" required lay-verify="required" placeholder="請輸入標題" autocomplete="off"

class="layui-input">

核取方塊checkbox

1.普通核取方塊

type="checkbox" name="" title="寫作" checked>

type="checkbox" name="" title="發呆">

type="checkbox" name="" title="禁用" disabled>

//另外可以自定義value,來設定返回的值,不然預設值為on.

2.開關

開關為核取方塊的變種,新增lay-skin=」switch」即可設定核取方塊為開關風格。

type="checkbox" name="open" lay-skin="switch" checked>

type="checkbox" name="close" lay-skin="switch">

type="checkbox" name="close" lay-skin="switch" disabled>

//需注意設定開關的name值.同樣可自定義value.

單選框

單選框只需將核取方塊的type改為radio即可,其餘一切屬性和用法與核取方塊相同。

文字域

name=""

required

lay-verify="required"

placeholder="請輸入"

class="layui-textarea">

textarea>

其中,layui-textarea是layui提供的css樣式類。

====待補充====

layui框架整理

昨天在畫方框的時候發現搞不定方框,想到之前團隊裡面有人用了layui.就直接用了一下。因為時間緊張,沒有仔細看文件。解決遇到一堆的問題。layui使用form表單實現post請求頁面跳轉 如果想用form表單進行post請求跳轉,只能用這個方式了。所需要的引數在input裡面加好,然後在上面做賦值就...

layui小功能整理

一 資料 1.新增序號 type型別定義為numbers 序號2.新增排序 新增sort屬性sort true 庫存 監聽單元格編輯 table.on edit bookshelf function obj 4.開啟分頁 table屬性上的lay data增加屬性page true 5.單元格自定義...

layui框架學習(1) 簡介

後台模版 什麼是layui框架?layui 諧音 類ui 是一款採用自身模組規範編寫的前端 ui 框架,遵循原生 html css js 的書寫與組織形式,門檻極低,拿來即用。其外在極簡,卻又不失飽滿的內在,體積輕盈,元件豐盈,從核心 到 api 的每一處細節都經過精心雕琢,非常適合介面的快速開發。...