圖示字元
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 的每一處細節都經過精心雕琢,非常適合介面的快速開發。...