layui-表单样式


<form class="layui-form" style="width:90%;">
    <div class="layui-form-item layui-row layui-col-xs12">
        <label class="layui-form-label">调用别名</label>
        <div class="layui-input-block">
            <input type="text" name="Name" class="layui-input Name" lay-verify="required" placeholder="只允许字母数字下划线">
        </div>
    </div>
    <div class="layui-form-item layui-row layui-col-xs12">
        <label class="layui-form-label">显示名称</label>
        <div class="layui-input-block">
            <input type="text" name="DisplayName" class="layui-input DisplayName" lay-verify="required" placeholder="请输入显示名称">
        </div>
    </div>
    <div class="layui-form-item layui-row layui-col-xs12">
        <label class="layui-form-label">上级菜单</label>
        <div class="layui-input-block">           
            <select name="ParentId" class="ParentId" lay-filter="ParentId">
            <option value="0">无上级菜单</option>
            @foreach (var item in Model)
            {
                <option value="@item.Id">@item.DisplayName</option>
            }
            </select>
        </div>
    </div>  
    <div class="layui-form-item layui-row layui-col-xs12">
        <label class="layui-form-label">是否显示</label>
        <div class="layui-input-block IsDisplay">
            <input type="radio" name="IsDisplay" value="0" title="否">
            <input type="radio" name="IsDisplay" value="1" title="是" checked>
        </div>
    </div> 
    <div class="layui-form-item layui-row layui-col-xs12">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-sm" lay-submit="" lay-filter="addUser">确定</button>
            <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">重置</button>
        </div>
    </div>
</form>

方框样式(追加class layui-form-pane,值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性(否则会看起来比较别扭))

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM