使用bootstrap搭建查询框

最新推荐文章于 2023-06-21 10:12:12 发布

yuan487639

最新推荐文章于 2023-06-21 10:12:12 发布

阅读量350

点赞数

分类专栏： web前端文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/yuan487639/article/details/84763631

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

最近在研究项目JSP页面用到的一些标签，有些标签确实好用，不过由于不是bootstrap最新版本，存在一些小毛病，想着能不能重新做一套CSS标签。

先从查询框说起吧，最后想达到的效果是这样子的

[img]http://dl2.iteye.com/upload/attachment/0114/8464/47f9f621-86e2-3485-9d22-7398e58c4881.png[/img]

从上到下分为三个部分title、body、button，类似于官网模态窗口，父标签大小设定之后，其中的子标签以及样式可以自适应填充。

以下这个是自己折腾的结果，代码是从bootstrap官网拷贝下来，修改之后的效果
[img]http://dl2.iteye.com/upload/attachment/0114/8466/bb809c6a-0788-3988-81f1-5899624e920b.png[/img]

以下是整个页面代码


<body>
	<div class="row" style="margin: 50px">
		<div class="col-xs-3">
			<form class="form-horizontal">
				<div class="form-group">
					<label class="col-sm-3 control-label">开始时间</label>
					<div class="col-sm-8">
						<input placeholder="2016-01-26" class="form-control"
							id="starttime" readonly="readonly">
					</div>
					<script type="text/javascript">
					$("#starttime").datetimepicker({
						startView : 4,
						minView : 2,
						maxView : 4,
						format : 'yyyy-mm-dd',
						autoclose : true,
						language : 'zh-CN',
						todayHighlight : true,
					});
					</script>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">结束时间</label>
					<div class="col-sm-8">
						<input class="form-control" id="endTime"
							readonly="readonly" placeholder="2016-01-27">
					</div>
					<script type="text/javascript">
						$("#endTime").datetimepicker({
							startView : 0,
							minView : 0,
							maxView : 1,
							format : 'yyyy-mm-dd hh:ii:ss',
							minuteStep : 5,
							autoclose : true,
							language : 'zh-CN',
						});
					</script>
				</div>
			</form>
		</div>
		<div class="col-xs-9">
			<p1>嘿嘿嘿，我是表格</p1>
		</div>
	</div>
</body>

以下是引的一些资源文件，其中bootstrap和juqery都是直接引的官网仓库，不需要本地下载，实际开发肯定不能这么引


<link rel="stylesheet"href="/dynamic2.5/resource/css/bootstrap-datetimepicker.css" />
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="/dynamic2.5/resource/js/jquery.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="/dynamic2.5/resource/js/bootstrap-datetimepicker.js"></script>
<script src="/dynamic2.5/resource/js/bootstrap-datetimepicker.zh-CN.js"></script>

关于资源引入：
jquery引入需要在bootstrap.js之前；
bootstrap需要一个css样式文件和一个js文件；
同样datetimepicker插件除了js和css以外，额外需要一个汉化文件，所以上面一共引了6个资源文件；

关于页面布局：直接使用bootstrap提供的"row"以及"col-xs-X"组合，可以轻松的分割页面；而使用"form-group"以及"col-sm-3 control-label"组合，可以方便地对一行进行划分，比较适合查询框或者输入框这类需求；

关于插件参数：关于日期选择，除了datetimepicker之外，还有datepicker，不过后者不支持时间选择，而且我在引入的时候，字体样式都出现问题。所以还是直接使用后者吧。如果没有时间需求，使用minView和maxView两个参数进行控制就可以了。
两个参数的值都是0-4，分别对应分、时、日、月、年；
如果不想使用时间，直接将开始的视图设置到日，也就是minView=2就可以了；

代码中带有一些其他参数，有心的童鞋看一下就知道了，在这里就不需要多说了。

yuan487639

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用bootstrap搭建查询框

最近在研究项目JSP页面用到的一些标签，有些标签确实好用，不过由于不是bootstrap最新版本，存在一些小毛病，想着能不能重新做一套CSS标签。先从查询框说起吧，最后想达到的效果是这样子的[img]http://dl2.iteye.com/upload/attachment/0114/8464/47f9f621-86e2-3485-9d22-7398e58c4881.png[/i...
复制链接

扫一扫