layui中常見的表單排版有哪些

發布時間：2020-06-24 17:23:21 來源：億速云閱讀：900 作者：元一欄目：web開發

layui中常見的表單排版有哪些？可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

前言：

layui，是一款采用自身模塊規范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細節都經過精心雕琢，非常適合界面的快速開發。layui 首個版本發布于2016年秋，她區別于那些基于 MVVM 底層的 UI 框架，卻并非逆道而行，而是信奉返璞歸真之道。準確地說，她更多是為服務端程序員量身定做，你無需涉足各種前端工具的復雜配置，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來。

layui 提供了豐富的內置模塊，他們皆可通過模塊化的方式按需加載，其中包括:layer、layDate、layPage、laytpl、table、form、upload、element、tree、layeditor、rate、carousel、flow、util、code等。

平常我們經常用到的表單排版方式常見的有兩種，layui文檔中已經給出垂直的排版方式，我們做后臺的時候也會用到水平排版方式,用于在頁面的頂部進行搜索的時候用到。

下面我們來看一下水平+垂直表單列表實現：

一、垂直排版

html:

<div class="formList">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">昵稱<em class="dotRed">*</em>：</label>
            <div class="layui-input-block">
                <input type="text" placeholder="請輸入昵稱" class="layui-input" style="width: 320px;">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">郵箱<em class="dotRed">*</em>：</label>
            <div class="layui-input-block">
                <input type="email" placeholder="請輸入郵箱" class="layui-input" style="width: 320px;">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性別：</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="保密" title="保密" checked>
                <input type="radio" name="sex" value="男" title="男">
                <input type="radio" name="sex" value="女" title="女">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">興趣：</label>
            <div class="layui-input-block">
                <input type="checkbox" name="" title="寫作" lay-skin="primary" checked>
                <input type="checkbox" name="" title="發呆" lay-skin="primary">
                <input type="checkbox" name="" title="唱歌" lay-skin="primary">
                <input type="checkbox" name="" title="跳舞" lay-skin="primary" checked>
                <input type="checkbox" name="" title="睡覺" lay-skin="primary">
                <input type="checkbox" name="" title="畫畫" lay-skin="primary">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">城市<em class="dotRed">*</em>：</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="required" class="select_wd320">
                    <option value=""></option>
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2">廣州</option>
                    <option value="3">深圳</option>
                    <option value="4">杭州</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">狀態：</label>
            <div class="layui-input-block">
                <input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">個人簽名：</label>
            <div class="layui-input-block">
                <textarea name="desc" placeholder="請輸入活動備注內容" class="layui-textarea"></textarea>
            </div>
        </div>
    </form>
</div>

css:

.dotRed {
    color: #ff3100;
}
.mt32{ margin-top:32px;}
.formList .layui-form-label { padding-right: 0; }
.formList .layui-input-block{ margin-left:100px;}

效果展示:

layui中常見的表單排版有哪些二、垂直排版---文字很多的時候

我之前在做垂直表單的時候遇到過左側文字很多的時候會換行顯示不美觀,那咋辦呢,下面是解決辦法:

html:

<div class="formList">
    <form class="layui-form layui-form-wd120" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">瀏覽器名稱<em class="dotRed">*</em>：</label>
            <div class="layui-input-block">
                <input type="text" placeholder="請輸入瀏覽器名稱" class="layui-input" style="width: 480px;">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商店詳細地址<em class="dotRed">*</em>：</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="required" class="select_wd320">
                    <option value=""></option>
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2">廣州</option>
                    <option value="3">深圳</option>
                    <option value="4">杭州</option>
                </select>
            </div>
        </div>
    </form>
</div>

css:

.layui-form-wd120 .layui-form-label{ width:120px;}
.layui-form-wd120 .layui-input-block{ margin-left:140px;}

效果展示:

layui中常見的表單排版有哪些如果覺得文字還要很多呢,繼續同樣的辦法:

html:

<div class="formList">
    <form class="layui-form layui-form-wd210" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">啟用上傳商品自動生成相冊圖<em class="dotRed">*</em>：</label>
            <div class="layui-input-block">
                <input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
                <span class="error-tips">啟用后以商品原圖無壓縮上傳，原圖文件較大，會影響網頁圖片打開速度。</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">啟用上傳商品保留原圖<em class="dotRed">*</em>：</label>
            <div class="layui-input-block">
                <input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
            </div>
        </div>
    </form>
</div>

css:

.layui-form-wd210 .layui-form-label{ width:210px;}
.layui-form-wd210 .layui-input-block{ margin-left:230px;}

.error-tips{ color: #ff3100; font-size:13px; padding-left:10px;}

效果展示:

layui中常見的表單排版有哪些

三、水平排版

html:

<div class="mainTop layui-clear">
        <div class="fl">
            <button type="button" class="layui-btn layui-btn-blue">新增商品</button>
        </div>
        <div class="fr">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">狀態：</label>
                        <div class="layui-input-inline">
                            <select name="city" lay-verify="required" class="select_wd120">
                                <option value=""></option>
                                <option value="0">啟用</option>
                                <option value="1">禁用</option>
                                <option value="2">暫時</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">創建時間：</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input dateIcon" id="dateTime" placeholder="請選擇時間范圍"
                                   style="width: 240px;">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" placeholder="請輸入標題" class="layui-input" style="width: 240px;">
                        </div>
                        <div class="layui-input-inline">
                            <button type="button" class="layui-btn layui-btn-blue">搜索</button>
                        </div>
                    </div>
                </div>

            </form>
        </div>
    </div>

公共css:(包括主題顏色修改)

.fl { float: left; }
.fr { float: right; }
.mb10{ margin-bottom:10px;}
.sideBlock { padding: 24px; }
.layui-form-item .layui-input-inline { width: auto; }
.layui-input, .layui-select, .layui-textarea{ height:36px;}
.layui-form-label {
    padding: 8px 15px;
}
.layui-form-switch {
    height: 34px;
    line-height: 34px;
    margin-top: 0;
    min-width: 54px;
}
.layui-form-switch i {
    width: 24px;
    height: 24px;top: 5px;
}
.layui-form-onswitch i {
    margin-left: -28px;
    top: 5px;
}
.layui-form-switch em{margin-left: 27px;}
.layui-form-onswitch em {
    margin-left: 5px;
}
.layui-btn{ height:36px;}
/*修改顏色風格-藍色 */
.layui-form-select dl dd.layui-this {
    background-color: #02a7f0;
}
.layui-btn-blue { background-color: #02a7f0; }
.layui-form-onswitch {
    border-color: #02a7f0;
    background-color: #02a7f0;
}
.layui-form-radio>i:hover, .layui-form-radioed>i {
    color: #02a7f0;
}
.layui-form-checked[lay-skin=primary] i {
    border-color: #02a7f0;
    background-color: #02a7f0;
}
.layui-form-checkbox[lay-skin=primary]:hover i {
    border-color: #02a7f0;
}

水平css:

.mainTop .layui-form-label { width: auto; padding-right: 5px; }
.dateIcon { display: inline-block; background: url(images/dateIcon.png) no-repeat 210px center; }

效果展示:

layui中常見的表單排版有哪些

看完上述內容，你們對layui中常見的表單排版有進一步的了解嗎？如果還想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀。

向AI問一下細節

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

layui中常見的表單排版有哪些

猜你喜歡

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

layui中常見的表單排版有哪些

猜你喜歡

最新資訊

相關推薦

相關標簽