1、layui基礎(導航 表格 表單)


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屬性:
  1.  required 注冊瀏覽器所規定必填字段
  2. lay-verify="required" 注冊form模塊需要驗證的類型 (點擊提交按鈕會有提示)
  3.  layui-input-block 占據全部寬度
  4.  ayui-input-inline 占據部分寬度
  5.  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  設定表單的方框風格


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM