layui-學習02-全局樣式

CSS內置公共基礎類

類名（class）	說明
佈局
layui-main	用於設置一個寬度爲 1140px 的水平居中塊（無響應式）
layui-inline	用於將標籤設爲內聯塊狀元素
layui-box	用於排除一些UI框架（如Bootstrap）強制將所有元素設爲box-sizing: border-box所引起的尺寸誤差
layui-clear	用於消除浮動（通常不怎麼經常使用，由於layui幾乎沒用到浮動）
輔助
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	用於設置元素經典灰色背景

 

CSS命名規範

class命名前綴：layui，鏈接符：-，如：class="layui-form"

命名格式通常分爲兩種：

一：layui-模塊名-狀態或類型，

二：layui-狀態或類型。

由於有些類並不是是某個模塊所特有，他們一般會是一些公共類。如：一（定義按鈕的原始風格）：class="layui-btn layui-btn-primary"、二（定義內聯塊狀元素）：class="layui-inline"

 

經常使用公共屬性：

元素的基本交互行爲，都是由模塊自動開啓。但不一樣的區域可能須要觸發不一樣的動做，這就須要你設定咱們所支持的自定義屬性來做爲區分。以下面的 lay-submit、lay-filter即爲公共屬性（即以 lay- 做爲前綴的自定義屬性）：<button class="layui-btn" lay-submit lay-filter="login">登入</button>

目前咱們的公共屬性以下所示（即廣泛運用於全部元素上的屬性）

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