源码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.css" /> <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> </head> <body> <div class="container"> <!-- 网站头部 --> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4"></div> <div class="col-md-4"> <ul class="list-inline" style="margin-top:10px ;"> <li> <a class="btn btn-primary" href="javascript:void(0);">登录</a> </li> <li> <a class="btn btn-primary" href="javascript:void(0);">注册</a> </li> <li> <a class="btn btn-danger" href="javascript:void(0);">购物车</a> </li> </ul> </div> </div> <!-- 导航条 --> <!--bootstrap导航条--> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <!-- 导航图标及汉堡按钮 --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <!-- 阅读器专用的样式 --> <span class="sr-only">这是汉堡按钮</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">首页</a> </div> <!-- 导航的主题部分 --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"> <a href="#">手机数码<span class="sr-only">(current)</span></a> </li> <li> <a href="#">电脑办公</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">更多 <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li> <a href="#">我们的电话</a> </li> <li> <a href="#">我们的宗旨</a> </li> <li> <a href="#">我们的环境</a> </li> <!-- 分割线 --> <li class="divider"></li> <li> <a href="#">我们的地址</a> </li> <li class="divider"></li> <li> <a href="#">您的建议</a> </li> </ul> </li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="请输入信息"> </div> <button type="submit" class="btn btn-default">查询</button> </form> </div> </div> </nav> <!-- 注册页面主体 --> <div class="row" style="background-image: url(img/bpic13706.jpg);"> <div class="col-sm-8 col-sm-offset-2" style="border: 5px solid gainsboro;background-color: white;"> <!-- 表单部分 --> <div class="row"> <div class="col-sm8 col-sm-offset-2"> <font color="#204D74" size="4">会员注册</font> </div> </div> <form class="form-horizontal" onsubmit="return checkForm()"> <div class="form-group" id="usernameDiv"> <label class="col-sm-2 control-label">用户名</label> <div class="col-sm-8"> <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名"> </div> <label class="col-sm-2 control-label" id="usernameMsg"></label> </div> <div class="form-group" id="passwordDiv"> <label class="col-sm-2 control-label">密码</label> <div class="col-sm-8"> <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码"> </div> <label class="col-sm-2 control-label" id="passwordMsg"></label> </div> <div class="form-group" id="repasswordDiv"> <label class="col-sm-2 control-label">确认密码</label> <div class="col-sm-8"> <input type="password" class="form-control" id="repassword" placeholder="请输入确认密码"> </div> <label class="col-sm-2 control-label" id="repasswordMsg"></label> </div> <div class="form-group"> <label class="col-sm-2 control-label">email</label> <div class="col-sm-8"> <input type="email" class="form-control" id="email" name="email" placeholder="请输入email"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">姓名</label> <div class="col-sm-8"> <input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">性别</label> <div class="col-sm-8" style="margin-top: 6px;"> <input type="radio" name="sex" value="man" checked="checked">男 <input type="radio" name="sex" value="woman">女 </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <!--btn-lg变大一点--> <input type="submit" class="btn btn-danger btn-lg" value="注 册 "> </div> </div> </form> </div> </div> <!-- 网站底部 --> <div class="row"> <div class="col-xs-12"> <img src="" width="100%"/> </div> </div> <div class="row"> <div class="col-xs-12 text-center"> <ul class="list-inline"> <li><a href="javascript:void(0);">联系我们</a></li> <li><a href="javascript:void(0);">联系我们</a></li> <li><a href="javascript:void(0);">联系我们</a></li> <li><a href="javascript:void(0);">联系我们</a></li> <li><a href="javascript:void(0);">联系我们</a></li> <li><a href="javascript:void(0);">联系我们</a></li> <li><a href="javascript:void(0);">联系我们</a></li> </ul> </div> </div> <div class="row"> <div class="col-xs-12 text-center"> ©1995-2004 咪咪咪咪 版权所有 </div> </div> </div> </body> <script> //密码和确认密码一致性效验 function checkPwdAndRepwd(f1,f2){ //密码 //前提密码和确认密码必须填写 if(f1&&f2){ var pwd = document.getElementById("password").value ; var repwd = document.getElementById("repassword").value ; var msg = document.getElementById("repasswordMsg") ; var div = document.getElementById("repasswordDiv") ; //2.一致性判断 if(pwd==repwd){ msg.innerHTML = "" ; div.className +=" form-group" ; return true ; }else{ div.className = " has-error" ; msg.innerHTML = "必须和密码一致" ; return false ; } }else{ return false ; } } function checkNotNull(nid){ //1.获取用户名菜单输入项 元素对象 var nodex = document.getElementById(nid) ; //2.获取对应的错误信息回显 label对象 var msg = document.getElementById(nid+"Msg") ; //3.获取对应的div var div = document.getElementById(nid+"Div") ; var reg = /^\s*$/ ;//如果0~多个空白符，就为true if (reg.test(nodex.value)) { //用户名信息不合格 msg.innerHTML = "不能为空" ; //如果错误及获取id更改class样式 div.className +=" has-error" ; return false ; } else{ //用户名合格 div.className = " form-group" ; msg.innerHTML = "" ; return true ; } } //表单验证方法 function checkForm(){ //用户名 var flag1 = checkNotNull("username") ; //密码 var flag2 = checkNotNull("password") ; //确认密码 var flag3 = checkNotNull("repassword") ; //一致性效验 var flag4 = checkPwdAndRepwd(flag2,flag3) ; return flag1&&flag2&&flag3&&flag4 ; } </script> </html>效果图：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/bootstrap.css" /> <script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script> <script type="text/javascript" src="js/bootstrap.js" ></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-xs-12 col-md-12" style="background-color: #EAEAEA;"> <font size="5">启动流程</font> </div> </div> <div class="row"> <div class="col-xs-12 col-md-12"> <div style="height: 10px;"></div> </div> </div> <div class="row"> <div class="col-md-12" style="background-color: #EAEAEA;"> <ul class="list-inline" style="margin-top: 6px;"> <li> <a class="btn btn-default" href="javascript:void(0);"> <span class="glyphicon glyphicon-remove"></span>关闭 </a> </li> <li> <a class="btn btn-primary" href="javascript:void(0);"> <span class="glyphicon glyphicon-send"></span>启动 </a> </li> <li> <a class="btn btn-primary" href="javascript:void(0);"> <span class="glyphicon glyphicon-floppy-disk"></span>保存草稿 </a> </li> <li> <a class="btn btn-primary" href="javascript:void(0);"> <span class="glyphicon glyphicon-picture"></span>流程图 </a> </li> <li> <a class="btn btn-primary" href="javascript:void(0);"> <span class="glyphicon glyphicon-print"></span>打印 </a> </li> </ul> </div> </div> <div class="row"> <div class="col-md-12"> <form class="form-horizontal" οnsubmit="return checkForm()"> <div class="form-group" id="usernameDiv" style="margin-top: 20px;"> <label class="col-sm-2 control-label">档案号</label> <div class="col-sm-3"> <input type="text" class="form-control" id="username" name="username" placeholder="请输入档案号"> </div> <label class="col-sm-2 control-label">电子档案</label> <div class="col-sm-3"> <input type="text" class="form-control" id="text" name="text" placeholder="请输入电子档案"> </div> </div> <div class="form-group" id="usernameDiv" style="margin-top: 20px;"> <label class="col-sm-2 control-label">数据入库版本号</label> <div class="col-sm-3"> <input type="text" class="form-control" id="username" name="username" placeholder="请输入数据入库版本号"> </div> <label class="col-sm-2 control-label">业务编号</label> <div class="col-sm-3"> <input type="text" class="form-control" id="text" name="text" placeholder="请输入业务编号"> </div> </div> <div class="form-group" id="usernameDiv" style="margin-top: 20px;"> <label class="col-sm-2 control-label">项目(批次)名称</label> <div class="col-sm-3"> <input type="text" class="form-control" id="username" name="username" placeholder="请输入项目(批次)名称"> </div> <label class="col-sm-2 control-label">土地坐落</label> <div class="col-sm-3"> <input type="text" class="form-control" id="text" name="text" placeholder="请输入土地坐落"> </div> </div> <div class="form-group" id="usernameDiv" style="margin-top: 20px;"> <label class="col-sm-2 control-label">区县代码</label> <div class="col-sm-3"> <!--<input type="text" class="form-control" id="username" name="username" placeholder="请输入区县代码">--> <select class="form-control"> <option>请选择</option> <option>惠城区</option> <option>仲恺</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <label class="col-sm-2 control-label">批准文号</label> <div class="col-sm-3"> <input type="text" class="form-control" id="text" name="text" placeholder="请输入批准文号"> </div> </div> <div class="form-group" id="usernameDiv" style="margin-top: 20px;"> <label class="col-sm-2 control-label">报批年度</label> <div class="col-sm-3"> <input type="text" class="form-control" id="username" name="username" placeholder="请输入报批年度"> </div> <label class="col-sm-2 control-label">批文日期</label> <div class="col-sm-3"> <input type="text" class="form-control" id="text" name="text" placeholder="请输入批文日期"> </div> </div> <div class="form-group" id="usernameDiv" style="margin-top: 20px;"> <label class="col-sm-2 control-label">占用指标情况</label> <div class="col-sm-3"> <input type="text" class="form-control" id="username" name="username" placeholder="请输入占用指标情况"> </div> <label class="col-sm-2 control-label">申请用地单位</label> <div class="col-sm-3"> <input type="text" class="form-control" id="text" name="text" placeholder="请输入申请用地单位"> </div> </div> <div class="form-group" id="usernameDiv" style="margin-top: 20px;"> <label class="col-sm-2 control-label">新增建设用地</label> <div class="col-sm-3"> <input type="text" class="form-control" id="username" name="username" placeholder="请输入新增建设用地"> </div> <label class="col-sm-2 control-label">农用地面积</label> <div class="col-sm-3"> <input type="text" class="form-control" id="text" name="text" placeholder="请输入农用地面积"> </div> </div> <div class="form-group" id="usernameDiv" style="margin-top: 20px;"> <label class="col-sm-2 control-label">耕地面积</label> <div class="col-sm-3"> <input type="text" class="form-control" id="username" name="username" placeholder="请输入耕地面积"> </div> <label class="col-sm-2 control-label">基本农田面积</label> <div class="col-sm-3"> <input type="text" class="form-control" id="text" name="text" placeholder="请输入基本农田面积"> </div> </div> <div class="form-group" id="usernameDiv" style="margin-top: 20px;"> <label class="col-sm-2 control-label">林地面积</label> <div class="col-sm-3"> <input type="text" class="form-control" id="username" name="username" placeholder="请输入林地面积"> </div> <label class="col-sm-2 control-label">园地面积</label> <div class="col-sm-3"> <input type="text" class="form-control" id="text" name="text" placeholder="请输入园地面积"> </div> </div> <div class="form-group" id="usernameDiv" style="margin-top: 20px;"> <label class="col-sm-2 control-label">其他农用地面积</label> <div class="col-sm-3"> <input type="text" class="form-control" id="username" name="username" placeholder="请输入其他农用地面积"> </div> <label class="col-sm-2 control-label">建设用地面积</label> <div class="col-sm-3"> <input type="text" class="form-control" id="text" name="text" placeholder="请输入建设用地面积"> </div> </div> <div class="form-group" id="usernameDiv" style="margin-top: 20px;"> <label class="col-sm-2 control-label">用地总面积</label> <div class="col-sm-3"> <input type="text" class="form-control" id="username" name="username" placeholder="请输入用地总面积"> </div> <label class="col-sm-2 control-label">问题日志</label> <div class="col-sm-3"> <input type="text" class="form-control" id="text" name="text" placeholder="请输入问题日志"> </div> </div> </form> </div> </div> <div class="row" style="background-color: #EAEAEA; height: 50px;"> <div class="col-md-10" style="margin-top: 12px;"> <font size="3">用地报批地块信息</font> </div> <div class="col-md-2" style="margin-top: 8px;"> <button class="btn btn-default" type="submit"> <span class="glyphicon glyphicon-plus"></span>添加 </button> <button class="btn btn-danger" type="submit"> <span class="glyphicon glyphicon-remove"></span>删除 </button> </div> </div> <div class="row" style="background-color:#CCCCCC; height: 50px;"> <div class="col-md-1"style="margin-top: 13px;"> <input type="checkbox" /> </div> <div class="col-md-5" style="margin-top: 13px;"> <font size="3">地块编号</font> </div> <div class="col-md-4" style="margin-top: 13px;"> <font size="3">类型</font> </div> <div class="col-md-2" style="margin-top: 13px;"> <font size="3">管理</font> </div> </div> </div> </body> </html>
