layui的頁面元素規範與說明
阿新 • • 發佈：2018-12-07
layui的頁面元素規範與說明
1 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 | 用於設定元素經典灰色背景 |
其它的類一般都是某個元素或模組所特有，因此不作為我們所定義的公共類。
2 css命名規範
class命名字首：layui，連線符：-，如：class="layui-form"
命名格式一般分為兩種：一：layui-模組名-狀態或型別，二：layui-狀態或型別。因為有些類並非是某個模組所特有，他們通常會是一些公共類。如：一（定義按鈕的原始風格）：class="layui-btn layui-btn-primary"、二（定義內聯塊狀元素）：class="layui-inline"
目前我們的公共屬性如下所示（即普遍運用於所有元素上的屬性）
| 屬性 | 描述 |
|---|---|
| lay-skin=" " | 定義相同元素的不同風格，如checkbox的開關風格 |
| lay-filter=" " | 事件過濾器。你可能會在很多地方看到他，他一般是用於監聽特定的自定義事件。你可以把它看作是一個ID選擇器 |
| lay-submit | 定義一個觸發表單提交的button，不用填寫值 |