關於layui框架的form表單布局

2021-09-13 23:47:16 字數 3245 閱讀 9339

在使用from表單的時候,必須先宣告from模組,否則select、checkbox、radio等將無法顯示,並且無法使用form相關功能,這是很多小白一開始經常犯的錯誤,雖然這很簡單但也很基礎,所以有必要在這裡提一下

form模組宣告

在form使用class="layui-form"

在from裡面,我們通常使用這三個類(其他地方也一樣)

class="layui-元素名-item"

class="layui-元素名-inline"

class="layui-元素名-block"

比如layui-form-item單獨使用這個類會預設該元素獨佔一行,如

效果如下

這是單獨一行的文字框,當然這樣並不好看,通常我們會把它和標籤一起使用

效果如下

這時候我們發現,這兩個東西並沒有並在一排,我們通常需要給input外面新增乙個class="layui-input-block"的div

這時候這兩個元素就會排成一排

這是因為layui-input-block這個類是乙個表單元素佔一行,豎著,以例表的形式排列。然後配合layui-form-item的使用,使這兩個元素處在同一行。

但通常來講,我們不需要這麼長的input,我們可以把外面的div的類換成class="layui-input-inline"試試

標籤:

class="layui-input-inline"允許多個表單控制項佔一行,橫著,一行可以放置多個表單元素讓我們多複製幾段看看效果

如果我想讓它們豎下來排呢?別忘了上面講到的layui-input-block

但是這樣並不好看,我們通常是這樣使用

標籤:

一般來講,新增不同元素名和預設的layui-inline的效果是不一樣的,這個就需要大家多加試驗來挑選合適自己的類。

在使用from表單的時候,必須先宣告from模組,否則select、checkbox、radio等將無法顯示,並且無法使用form相關功能,這是很多小白一開始經常犯的錯誤,雖然這很簡單但也很基礎,所以有必要在這裡提一下

form模組宣告

在form使用class="layui-form"

在from裡面,我們通常使用這三個類(其他地方也一樣)

class="layui-元素名-item"

class="layui-元素名-inline"

class="layui-元素名-block"

比如layui-form-item單獨使用這個類會預設該元素獨佔一行,如

效果如下

這是單獨一行的文字框,當然這樣並不好看,通常我們會把它和標籤一起使用

效果如下

這時候我們發現,這兩個東西並沒有並在一排,我們通常需要給input外面新增乙個class="layui-input-block"的div

這時候這兩個元素就會排成一排

這是因為layui-input-block這個類是乙個表單元素佔一行,豎著,以例表的形式排列。然後配合layui-form-item的使用,使這兩個元素處在同一行。

但通常來講,我們不需要這麼長的input,我們可以把外面的div的類換成class="layui-input-inline"試試

標籤:

class="layui-input-inline"允許多個表單控制項佔一行,橫著,一行可以放置多個表單元素讓我們多複製幾段看看效果

如果我想讓它們豎下來排呢?別忘了上面講到的layui-input-block

但是這樣並不好看,我們通常是這樣使用

標籤:

一般來講,新增不同元素名和預設的layui-inline的效果是不一樣的,這個就需要大家多加試驗來挑選合適自己的類。

關於layui框架的問題及解決

layui表單驗證 內建自定義規則 使用說明 allfirst rank v2 rank v25 1 78481867.nonecase utm term layui e4 b8 8b e6 8b 89 e8 8f 9c e5 8d 95 e8 b5 8b e5 80 bc 下面展示一些內聯 片。1...

關於layui框架中的select的監聽

首先,我是個菜鳥,自己做點常犯錯誤的筆記。大神勿噴 在layui的select中,發現平常的監聽根本不起作用,不管是使用change,onchange,click,onclick,有些情況下是根本不起作用的,不管是你換哪個版本的jquery檔案。不管是用name取值,還是id,都不起作用,當這些都試...

layui中form表單渲染的問題

layui 官網的這部分文件介紹 注意 針對的是表單元素,input select textarea 1.必須給表單體系所在的父元素加上class layui form 裡層的每乙個專案,加上class layui form item 2執行layui.form.render type,filter...