第二节头部查询

akglobe

已于 2023-10-31 18:21:03 修改

阅读量111

点赞数

分类专栏： 2.业务系统前端文章标签：前端 javascript html

于 2023-10-31 16:56:54 首次发布

本文链接：https://blog.csdn.net/zjltianxin/article/details/134144037

版权

2.业务系统前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.效果图

一行一个查询文本框加四个按钮横放效果图：

一行两个文本框加四个按钮横放效果图：

一行三个文本框横放，另一行四个按钮横放效果图：

一行四个文本框横放效果图：

2.头部条件布局

2.1每个form-group样式类，作为一个换行标志

2.2一个<label>标签对应一个输入框标题

class="control-label col-sm-3" 3代表文字标题所在大小范围，最大一行可设置12

2.3一个<div>标签对应输入框

且div修饰后，避免冲突，在div中的控件不再进行修饰，样式完全由DIV控制

class="col-md-8" 8代表输入框大小，最大一行可设置12

3.头部查询html间距

3.1一行一个文本框加四个按钮横放的样式设置

使用class="col-md-3"作为DIV,效果图：

代码：

<div class="form-group" style="margin-top:3px">
										<label class="control-label col-md-1">删除状态</label>
										<div class="col-md-3">
											<select id="deleteFlag" class="form-control" data-size="3" placeholder="选择是否删除">
												<option value='1'  >未删除</option>
												<option value='0'>已删除</option>
											</select>
										</div>

										<div class="form-group" style="margin-top:3px;margin-left:30px;">
											<div class="col-md-3" style="text-align:left;">
												<button type="button" id="btn_query" class="btn btn-primary" style="margin-left:5px">查询</button>
												<button type="button" id="btn_add" class="btn btn-primary" style="margin-left:5px">新增</button>
												<button type="button" id="btn_delete" class="btn btn-primary" style="margin-left:5px">删除</button>
												<button type="button" id="btn_recovery" class="btn btn-primary" style="margin-left:5px">恢复</button>
											</div>
										</div>
									</div>

3.2一行三个文本框，按钮放在另一行

分组之后，样式设置只作用于本组之内，下图的按钮分组里Div中的col-md-4 表示所占屏幕比例为40%。且所有样式设置须在表单内有效。

效果图：

代码：

<div class="form-group" style="margin-top:3px">
										<div class="col-md-2">
											<select id="deleteFlag" class="form-control">
												<option value="1">未删除</option>
												<option value="0">已删除</option>
											</select>
										</div>
										<label  class="control-label col-sm-1" >是否启用</label>
										<div class="col-md-2">
											<select id="isQy" class="form-control">
												<option value="">全部</option>
												<option value="1">是</option>
												<option value="2">否</option>
											</select>
										</div>
										<label  class="control-label col-sm-1" >是否占满</label>
										<div class="col-md-2">
											<select id="isZm" class="form-control">
												<option value="">全部</option>
												<option value="1">是</option>
												<option value="2">否</option>
											</select>
										</div>
									</div>

3.3一行显示四个文本框

在DIV中的class="col-md-2"代表所在屏幕比例，所在比例为屏幕的20%

效果图：

代码：

<div class="col-md-2">
											<select id="deleteFlag" class="form-control">
												<option value="1">未删除</option>
												<option value="0">已删除</option>
											</select>
										</div>
										<label  class="control-label col-sm-1" >是否启用</label>
										<div class="col-md-2">
											<select id="isQy" class="form-control">
												<option value="">全部</option>
												<option value="1">是</option>
												<option value="2">否</option>
											</select>
										</div>
										<label  class="control-label col-sm-1" >是否占满</label>
										<div class="col-md-2">
											<select id="isZm" class="form-control">
												<option value="">全部</option>
												<option value="1">是</option>
												<option value="2">否</option>
											</select>
										</div>
								
										<label  class="control-label col-sm-1" >是否挂载</label>
										<div class="col-md-2">
											<select id="isGz" class="form-control">
												<option value="">全部</option>
												<option value="1">是</option>
												<option value="2">否</option>
											</select>
										</div>

4页面布局

4.1弹出界面效果图

一行一个标签加一个文本框横放效果图

弹出界面一行三个标签加三个文本框效果图

4.2跳转转后一行三个效果图

一行三个标签加三个文本框效果图：

一行三个标签加三个文本框，加一个按钮横放效果图：

4.3调整弹出的页面布局

页面所用容器的调整，

在div "modal-content"级调整弹窗的宽和高

调整弹出的页面内底部距离

效果图：

4.3.1弹出页面一行一个

每行显示一个标签和一个文本框

col-sm-3 表示为标签设计的样式，col-md-8表示控件宽度占屏幕比例的80%。

效果图：

代码：

<div style="margin-top:10%;display: none" class="modal fade" id="modal_add" tabindex="-1" role="dialog" aria-hidden="true"
	 aria-labelledby="modal_add_label">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="modal_add_label">新增</h4>
			</div>
			<div class="modal-body">
				<form  class="form-horizontal" enctype="multipart/form-data">
					<div class="form-group">
						<label class="control-label col-md-3">合同名称</label>
						<div class="col-md-8">
							<select id="contentidadd" class="form-control" data-size="3" placeholder="">
						
							</select>
						</div>
					</div>
					<div class="form-group">
						<label  class="control-label col-sm-3" >附件名称</label>
						<div class="col-md-8">
							<input type="text" name="file_name" class="form-control"  id="file_name" placeholder="" autocomplete="off">
						</div>
					
					</div>
					<div class="form-group">
						<label class="control-label col-sm-3" >上传附件</label>
						<div class="col-md-8">
							<input type="file" name="addfile" class="form-control"  id="add_file" placeholder="">
						</div>
					</div>
					
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
				<button type="button" id="btn_submit_add" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
			</div>
		</div>
	</div>
</div>

4.3.2弹出页面一行三个

每行显示三个标签和三个文本框

每个form-group分组里显示几个控件可任意调整。每个控件都单独由DIV修饰。

因分组中两个控件还是由col-md-3修饰，所以显示时后面会有空白处。

4.3.3调整跳转后的页面布局

效果图：

代码：

<form  class="form-horizontal">
								<div class="form-group" style="margin-top:3px">

									<label  class="control-label col-md-1" >合同名称:</label>
									<div class="col-md-3">
										<input type="text" id="name"  class="form-control"  placeholder="请输入合同名称" autocomplete="off">
									</div>
									<label class="control-label col-md-1">签署日期:</label>
									<div class="col-md-3">
										<input type="text" id="signingDate" name="signingDate"  class="form-control"  placeholder="">
									</div>
									<label  class="control-label col-md-1" >合同金额:</label>
									<div class="col-md-3">
										<input type="text" id="amount"  class="form-control"  placeholder="请输入金额"   autocomplete="off">
									</div>
								</div>

								<div class="form-group" style="margin-top:3px">
									
									<label class="control-label col-md-1">甲方信息:</label>
									<div class="col-md-3">
										<select id="message" class="form-control" data-size="3" placeholder="" autocomplete="off">
									
										</select>
									</div>
									
									<label class="control-label col-md-1">合同项目类型:</label>
									<div class="col-md-3">
										<select id="contract_type" class="form-control" data-size="3" placeholder="">
									
										</select>
									</div>					
								</div>
								<div class="form-group" style="margin-top:3px">
									<label  class="control-label col-md-1" >参与人:</label>
									<div class="col-md-4">
										<input type="text" id="participants"  class="form-control"autocomplete="off"  placeholder="请输入名字(电话)(职位)  例:小明(123456123)(经理)">
									</div>
									<label class="control-label col-md-1">甲方联系人:</label>
									<div class="col-md-4">
										<input type="text" id="j_participants"  class="form-control" autocomplete="off" placeholder="请输入名字(电话)(职位)  例:小明(123456123)(经理)"">
									</div>
								</div>
								
								<div class="form-group" >
									<label class="control-label col-md-1">备注:</label>
									<div class="col-md-11">
										<textarea type="text" id="remark"  class="form-control"  placeholder="" rows="10" autocomplete="off"></textarea>
									</div>
								</div>

								<div class="form-group" >
									<button type="button" id="btn_submit_add" class="btn btn-success" style="margin-left:20px">保存</button>
								</div>
							</form>