1.基本樣式
layui - col- space* '*' 列間距最多只有到30px
layui - col- offset* '*' 右偏移占據的列數
layui - row 創建行 , layui-btn 按鈕 (有顏色 大小)
2.模塊引用
▶▶導航模塊 element
//單個模塊用字符串' ',多個模塊用數組[ ];
layui.use('element',function(){
var element = layui.element;
})
1.水平導航 layui-nav
layui-nav-item 導航項(layui-this 選中)
layui-nav-child 二級菜單
2. 垂直導航 layui-nav layui-nav-tree
3. 側邊導航 layui-nav layui-nav-tree layui-nav-side
設置導航的顏色: layui-nav-bg-顏色(molv cyan blue 等),layui-bage 徽章
4. 面包屑導航 layui-breadcrumb 屬性 lay-separator ="-" (分割符)
<cite>選中<cite>
▶▶選項卡模塊 element
選項卡 layui-tab ;
簡介風格 layui-tab-brief ;卡片風格 layui - tab -card
帶有刪除的選項卡 屬性lay-allowClose = “true”
▶▶表格
表格 layui-table ;
//設置列寬
<colgroup>
<clo widrh='150'>
<clo height='200'>
<clo>
</colgroup>
屬性
layui-even顯示隔行色
layui-skin 設置邊框 line(行) row(列) bob(無邊框)
layui-size 表格尺寸 sm(小) lg(大)
▶▶表單 form模塊
<form class='layui-form' action="">
<div class="layui-form-item">
<label class="layui-form-label"></label>
<div class="layui-input-block"> //layui-input-inline 不換行
<input type="text" name="title" class="layui-input" />
</div>
</div>
</form>
input屬性:
-
required 注冊瀏覽器所規定必填字段
-
lay-verify="required" 注冊form模塊需要驗證的類型 (點擊提交按鈕會有提示)
-
layui-input-block 占據全部寬度
-
ayui-input-inline 占據部分寬度
-
autocomplete 表單元素是否自動填充,當瀏覽器緩中存在相同的name時會自動填充。
select下拉選擇框:
disabled選擇性開啟禁用,selected設置option默認選項
optgroup標簽給option分組
屬性lay-search 開啟搜索功能
type="checkbox"復擇框:
title自定義屬性文本 (不需要不設置)
lay-skin屬性設置樣式效果 paramary表示原始效果
開關:
將復選框設置lay-skin="switch" 形成開關
lay-text=“打開|關閉” 設置開關的文本,通過‘ | ’分割
type="radio"復擇框:name相同
textarea文本域:layui-textarea
組裝行內表單:
class=“layui-inline”定義外層行內
class=“layui-input-inline”定義內層行內
lay- ignore 忽略美化,保留系統風格
lay-form-mid ‘-’美化橫線
lay-form-pane 設定表單的方框風格