如何更改layui form表单位置，宽度，颜色等_layui-form-item 宽度-程序员宅基地

目前正在学习layui，本帖为本人在学习过程中的一点需求与积累，与大家共勉

需求：如何更改layui的表单布局（位置，宽度，颜色等）

第一步：在官网复制自己想要的业务代码，其中需将CSS、JS文件夹路径改为自己本地路径

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../static/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px">
  <legend>表单集合练习</legend>
</fieldset>

{#    <form class="layui-form" action="">#}
{# 普通表单集合样式 #}
 <form class="layui-form layui-form-pane" action="">  
 {# 方框风格的表单集合 #}
   <div class="layui-form-item">
     <label class="layui-form-label">单行输入框</label>
     <div class="layui-input-block">
       <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
     </div>
   </div>

   <div class="layui-form-item">
     <label class="layui-form-label">验证必填项</label>
     <div class="layui-input-block">
       <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
     </div>
   </div>

   <div class="layui-form-item">
     <div class="layui-inline">
       <label class="layui-form-label">验证手机</label>
       <div class="layui-input-inline">
         <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
       </div>
     </div>

     <div class="layui-inline">
       <label class="layui-form-label">验证邮箱</label>
       <div class="layui-input-inline">
         <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
       </div>
     </div>
   </div>
   <div class="layui-form-item" align="center">
     <div class="layui-input-block">
       <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
       <button type="reset" class="layui-btn layui-btn-primary">重置</button>
     </div>
   </div>
 </form>

<script src="../static/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
    layui.use('form', function(){
     
      var form = layui.form
        ,layer = layui.layer;

      //自定义验证规则
      form.verify({
        title: function(value){
     
          if(value.length < 5){
            return '标题至少得5个字符啊';
          }
        }
      });

      //监听提交
      form.on('submit(demo1)', function(data){
     
        layer.alert(JSON.stringify(data.field), {
          title: '最终的提交信息'
        });
        return false;
      });
    });
</script>

</body>
</html>

实现效果如下图：

这里写图片描述

第二步：若想要更改其位置为居中显示只需将form嵌套在一个div里，然后更改div样式即可，layui即可根据我们自定义div样式去更改位置，宽度等等。

<div style="width: 650px; position: relative; left:25%;">
    ......
</div>

如上代码只设置了div的位置和宽度，若想要更改其他属性直接添加相应的样式即可，实现效果如图：

这里写图片描述

第二步：若要更改其标签颜色只需将内置的背景色CSS类添加到lable标签class即可：

赤色：class=”layui-bg-red”
橙色：class=”layui-bg-orange”
墨绿：class=”layui-bg-green”
藏青：class=”layui-bg-cyan”
蓝色：class=”layui-bg-blue”
雅黑：class=”layui-bg-black”

<label class="layui-form-label layui-bg-orange">

更改颜色样式后实现效果如图：

这里写图片描述

完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../static/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px">
  <legend>表单集合练习</legend>
</fieldset>

<div style="width: 650px; position: relative; left:25%;">
{#    <form class="layui-form" action="">#}
    <form class="layui-form layui-form-pane" action="">  {# 方框风格的表单集合 #}
      <div class="layui-form-item">
        <label class="layui-form-label layui-bg-red">单行输入框</label>
        <div class="layui-input-block">
          <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label layui-bg-blue">验证必填项</label>
        <div class="layui-input-block">
          <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-orange">验证手机</label>
          <div class="layui-input-inline">
            <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-inline">
          <label class="layui-form-label layui-bg-orange">验证邮箱</label>
          <div class="layui-input-inline">
            <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item" align="center">
        <div class="layui-input-block">
          <button class="layui-btn layui-btn-normal layui-btn-radius" lay-submit="" lay-filter="demo1">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-danger layui-btn-radius">重置</button>
        </div>
      </div>

    </form>
</div>

<script src="../static/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
    layui.use('form', function(){
     
      var form = layui.form
        ,layer = layui.layer;

      //自定义验证规则
      form.verify({
        title: function(value){
     
          if(value.length < 5){
            return '标题至少得5个字符啊';
          }
        }
      });

      //监听提交
      form.on('submit(demo1)', function(data){
     
        layer.alert(JSON.stringify(data.field), {
          title: '最终的提交信息'
        });
        return false;
      });
    });
</script>

</body>
</html>

学习在与不断地积累，同时更多的在于自己的不断坚持，坚持，坚持，再坚持！

本文链接：https://blog.csdn.net/Luzaofa/article/details/80794927

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

python简易爬虫v1.0-程序员宅基地

文章浏览阅读1.8k次，点赞4次，收藏6次。python简易爬虫v1.0作者：William Ma (the_CoderWM)进阶python的首秀，大部分童鞋肯定是做个简单的爬虫吧，众所周知，爬虫需要各种各样的第三方库，例如scrapy, bs4, requests, urllib3等等。此处，我们先从最简单的爬虫开始。首先，我们需要安装两个第三方库：requests和bs4。在cmd中输入以下代码：pip install requestspip install bs4等安装成功后，就可以进入pycharm来写爬虫了。爬

安装flask后vim出现：error detected while processing /home/zww/.vim/ftplugin/python/pyflakes.vim:line 28_freetorn.vim-程序员宅基地

文章浏览阅读2.6k次。解决方法：解决方法可以去github重新下载一个pyflakes.vim。执行如下命令git clone --recursive git://github.com/kevinw/pyflakes-vim.git然后进入git克降目录，./pyflakes-vim/ftplugin,通过如下命令将python目录下的所有文件复制到~/.vim/ftplugin目录下即可。cp -R ...._freetorn.vim

HIT CSAPP大作业：程序人生—Hello‘s P2P-程序员宅基地

文章浏览阅读210次，点赞7次，收藏3次。本文简述了hello.c源程序的预处理、编译、汇编、链接和运行的主要过程，以及hello程序的进程管理、存储管理与I/O管理，通过hello.c这一程序周期的描述，对程序的编译、加载、运行有了初步的了解。_hit csapp

18个顶级人工智能平台-程序员宅基地

文章浏览阅读1w次，点赞2次，收藏27次。来源：机器人小妹　　很多时候企业拥有重复，乏味且困难的工作流程，这些流程往往会减慢生产速度并增加运营成本。为了降低生产成本，企业别无选择，只能自动化某些功能以降低生产成本。　　通过数字化..._人工智能平台

electron热加载_electron-reloader-程序员宅基地

文章浏览阅读2.2k次。热加载能够在每次保存修改的代码后自动刷新 electron 应用界面，而不必每次去手动操作重新运行，这极大的提升了开发效率。安装 electron 热加载插件热加载虽然很方便，但是不是每个 electron 项目必须的，所以想要舒服的开发 electron 就只能给 electron 项目单独的安装热加载插件[electron-reloader]:// 在项目的根目录下安装 electron-reloader，国内建议使用 cnpm 代替 npmnpm install electron-relo._electron-reloader

android 11.0 去掉recovery模式UI页面的选项_android recovery 删除部分菜单-程序员宅基地

文章浏览阅读942次。在11.0 进行定制化开发，会根据需要去掉recovery模式的一些选项就是在device.cpp去掉一些选项就可以了。_android recovery 删除部分菜单

随便推点

echart省会流向图（物流运输、地图）_java+echart地图+物流跟踪-程序员宅基地

文章浏览阅读2.2k次，点赞2次，收藏6次。继续上次的echart博客，由于省会流向图是从echart画廊中直接取来的。所以直接上代码<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&_java+echart地图+物流跟踪