<del id="kmqwi"><b id="kmqwi"></b></del>
      <track id="kmqwi"><del id="kmqwi"></del></track>
    1. <table id="kmqwi"></table>
      <acronym id="kmqwi"><strong id="kmqwi"></strong></acronym>
    2. 
      
      <p id="kmqwi"><strong id="kmqwi"></strong></p>
    3. 頁面元素規范與說明

      Layui提倡返璞歸真,遵循于原生態的元素書寫規則,所以通常而言,你仍然是在寫基本的HTML和CSS代碼,不同的是,在HTML結構上及CSS定義上需要小小遵循一定的規范。

      類名(class) 說明
      布局 / 容器
      layui-main 用于設置一個寬度為 1140px 的水平居中塊(無響應式)
      layui-inline 用于將標簽設為內聯塊狀元素
      layui-box 用于排除一些UI框架(如Bootstrap)強制將全部元素設為box-sizing: border-box所引發的尺寸偏差
      layui-clear 用于消除浮動(一般不怎么常用,因為layui幾乎沒用到浮動)
      layui-btn-container 用于定義按鈕的父容器。(layui 2.2.5 新增)
      layui-btn-fluid 用于定義流體按鈕。即寬度最大化適應。(layui 2.2.5 新增)
      輔助
      layui-icon 用于圖標
      layui-elip 用于單行文本溢出省略
      layui-unselect 用于屏蔽選中
      layui-disabled 用于設置元素不可點擊狀態
      layui-circle 用于設置元素為圓形
      layui-show 用于顯示塊狀元素
      layui-hide 用于隱藏元素
      文本
      layui-text 定義一段文本區域(如文章),該區域內的特殊標簽(如a、li、em等)將會進行相應處理
      layui-word-aux 灰色標注性文字,左右會有間隔
      背景色
      layui-bg-red 用于設置元素赤色背景
      layui-bg-orange 用于設置元素橙色背景
      layui-bg-green 用于設置元素墨綠色背景(主色調)
      layui-bg-cyan 用于設置元素藏青色背景
      layui-bg-blue 用于設置元素藍色背景
      layui-bg-black 用于設置元素經典黑色背景
      layui-bg-gray 用于設置元素經典灰色背景

      其它的類一般都是某個元素或模塊所特有,因此不作為我們所定義的公共類。

      class命名前綴:layui,連接符:-,如:class="layui-form"

      命名格式一般分為兩種:一:layui-模塊名-狀態或類型,二:layui-狀態或類型。因為有些類并非是某個模塊所特有,他們通常會是一些公共類。如:一(定義按鈕的原始風格):class="layui-btn layui-btn-primary"、二(定義內聯塊狀元素):class="layui-inline"

      大致記住這些簡單的規則,會讓你在填充HTML的時候顯得更加得心應手。另外,如果你是開發Layui拓展(模塊),你最好也要遵循于類似的規則,并且請勿占用Layui已經命名好的類,假設你是在幫Layui開發一個markdown編輯器,你的css書寫規則應該如下:

      .layui-markdown{border: 1px solid #e2e2e2;}
      .layui-markdown-tools{}
      .layui-markdown-text{}
            

      Layui在解析HTML元素時,必須充分確保其結構是被支持的。以Tab選項卡為例:

      <div class="layui-tab">
        <ul class="layui-tab-title">
          <li class="layui-this">標題一</li>
          <li>標題二</li>
          <li>標題三</li>
        </ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item layui-show">內容1</div>
          <div class="layui-tab-item">內容2</div>
          <div class="layui-tab-item">內容3</div>
        </div>
      </div>
            

      你如果改變了結構,極有可能會導致Tab功能失效。所以在嵌套HTML的時候,你應該細讀各個元素模塊的相關文檔(如果你不是拿來主義)

      很多時候,元素的基本交互行為,都是由模塊自動開啟。但不同的區域可能需要觸發不同的動作,這就需要你設定我們所支持的自定義屬性來作為區分。如下面的 lay-submitlay-filter即為公共屬性(即以 lay- 作為前綴的自定義屬性):

      <button class="layui-btn" lay-submit lay-filter="login">登入</button>      
            

      目前我們的公共屬性如下所示(即普遍運用于所有元素上的屬性)

      屬性 描述
      lay-skin=" " 定義相同元素的不同風格,如checkbox的開關風格
      lay-filter=" " 事件過濾器。你可能會在很多地方看到他,他一般是用于監聽特定的自定義事件。你可以把它看作是一個ID選擇器
      lay-submit 定義一個觸發表單提交的button,不用填寫值

      額,好像有點少的樣子(反正你也基本不會看文檔。。(づ╥﹏╥)づ)。其它的自定義屬性基本都在各自模塊的文檔中有所介紹。

      其實很多時候并不想陳列條條框框(除了一些特定需要的),所以你會發現本篇的篇幅較短。(哈哈哈哈哈,其實是寫文檔寫得想吐了)

      layui - 用心與你溝通

      亚洲图色