關於layui框架的from表單佈局(小白向)
from表單的使用
在使用from表單的時候,必須先宣告from模組,否則select、checkbox、radio等將無法顯示,並且無法使用form相關功能,這是很多小白一開始經常犯的錯誤,雖然這很簡單但也很基礎,所以有必要在這裡提一下
from模組宣告
<script> layui.use('form', function () { var form = layui.form; form.render(); }); </script>
在from使用class="layui-form"
<from class="layui-form"></from>
在from裡面,我們通常使用這三個類(其他地方也一樣)
class="layui-元素名-item"
class="layui-元素名-inline"
class="layui-元素名-block"
比如layui-form-item單獨使用這個類會預設該元素獨佔一行,如
<form class="layui-form"> <div style="padding: 20px; background-color: #F2F2F2;"> <div class="layui-form-item"> <input type="text" class="layui-input"> </div> </div> </form>
效果如下
這是單獨一行的文字框,當然這樣並不好看,通常我們會把它和標籤一起使用
<form class="layui-form"> <div style="padding: 20px; background-color: #F2F2F2;"> <div class="layui-form-item"> <label class="layui-input-inline">標籤:</label> <input type="text" class="layui-input"> </div> </div> </form>
效果如下
這時候我們發現,這兩個東西並沒有並在一排,我們通常需要給input外面新增一個class="layui-input-block"的div
<div class="layui-input-block">
<input type="text" class="layui-input">
</div>
這時候這兩個元素就會排成一排
這是因為layui-input-block這個類是一個表單元素佔一行,豎著,以例表的形式排列。然後配合layui-form-item的使用,使這兩個元素處在同一行。
但通常來講,我們不需要這麼長的input,我們可以把外面的div的類換成class="layui-input-inline"試試
<div class="layui-input-inline">
<label class="layui-input-inline">標籤:</label>
<div class="layui-input-block">
<input type="text" class="layui-input">
</div>
</div>
class="layui-input-inline"允許多個表單控制元件佔一行,橫著,一行可以放置多個表單元素
讓我們多複製幾段看看效果
如果我想讓它們豎下來排呢?別忘了上面講到的layui-input-block
但是這樣並不好看,我們通常是這樣使用
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">標籤:</label>
<div class="layui-inline">
<input type="text" class="layui-input">
</div>
</div>
</div>
一般來講,新增不同元素名和預設的layui-inline的效果是不一樣的,這個就需要大家多加試驗來挑選合適自己的類。
以上是我的一些心得總結,後續我還會更新其他的關於layui框架的部落格,希望能幫助到更多剛入門的同學,謝謝大家的支援!