使用bootstrap搭建查询框

西蜀石兰

浏览: 118964 次
性别:
来自: 北京

最近访客更多访客>>

hgj88

ufopw

l1012384516

mjs

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端

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

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

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

以下这个是自己折腾的结果，代码是从bootstrap官网拷贝下来，修改之后的效果

以下是整个页面代码

<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就可以了；

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

查看图片附件

分享到：

使用bootstrap搭建查询框（2） | MySQL使用columns关键字对日期分区

2016-01-27 18:16
浏览 1448
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论