最近在研究项目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就可以了;
代码中带有一些其他参数,有心的童鞋看一下就知道了,在这里就不需要多说了。
- 大小: 6.3 KB
- 大小: 6.8 KB
分享到:
相关推荐
使用ThinkPhp5框架,实现了注册登录,发布修改文章,文章标签等功能,前端使用bootstrap,带数据库结构文件,需要使用apache或nginx代理,可直接使用,作为课设或者参考。
bootstrap网页前端框架,轻松搭建facebook网页效果,内部封装了css,js,jquery,定义了大量功能丰富的控件。
这么简单的功能还需要一天搭建基础环境?能不能只关心我所需要的业务? 有这样的一个项目,基于ASP.NET MVC、EntityFramework、Memcached、Bootstrap的快速项目开发框架,只需3秒钟即可创建一个带有简单用户管理的...
bootstrap+html5框架搭建简易添加页面,适合初学者,,,
采用强大的Angular和Bootstrap框架搭建的web框架,不需要过多的配置就能搭建一个美观高拓展性的平台
轻量级的layui框架后台模板bootstrap,想使用的快来下载
这是一个基于 AngularStrap 和 Bootstrap 搭建的中、小型 AngularJS Demo,其中包括 ui-router路由、文件上传、表单验证、手机邮箱注册、时间日期、动画特效、模态框、警示、选项卡、加载动画的一些封装。
基于bootstrap的前端框架集合,方便前端及设计人员快速搭建前端页面,包含系统管理,各种表格等。
最新metronic+bootstrap后台框架,绝对可用
基于python flask框架构建的前后端分离,房屋租赁系统全栈项目,采用RESTful风格,使用bootstrap响应式布局,可用于本科毕业设计,课程设计作业等 使用flask框架RESTful风格快速搭建。 一个互联网租房项目,前端使用...
•下拉选择框:jQuery Select2 •树结构控件:jQuery zTree、jQuery wdtree •页面布局:jquery.layout.js 1.4.4 •图表插件:echarts、highcharts •日期控件: My97DatePicker •2、后端技术 •核心...
bootstrap介绍 Bootstrap是前端开发中应用非常广泛的一个框架,最早是Twitter 公司内部的一个...说了这么多,都是题外话,下面看看bootstrap搭建传送带的代码。 进度指示器 <div id=homepage-feature class=carousel>
这是C# mvc 5框架快速搭建文档,包含bootstrap前端框架。
推荐2款我试用的Bootstrap JavaScript插件 jqBootstrapValidation验证控件 http://reactiveraven.github.com/jqBootstrapValidation/ bootsnipp http://bootsnipp.com/ 推荐插件:...
使用BootStrap进行UI设计;使用JSTL标识库用于减少JSP文件的Java代码;使用Navicat软件进行可视化操作。 适用人群:大学生群体(课程作业)、自学项目 能学到的东西:Springboot和Mybatis后端框架的使用,Maven项目...
简洁的后台管理界面 , 利用了Bootstrap与jQuery2.2.4 ,文件解压导进自己的项目中,可以通过Index.html 查看界面效果
这是一个基于bootstrap搭建的信息管理后台系统模板,内容丰富,可改性强,可以根据这个系统来定制属于自己的后台管理系统
Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 Bootstrap是基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和...
使用NodeJs的express框架完成电影网站后端搭建; 使用mongodb完成数据存储,通过mongoose模块完成对mongodb数据的构建; 使用jade模板引擎完成页面创建渲染; 使用Moment.js格式化电影存储时间; 3、本地开发环境...
软件架构说明 本项目后台使用SpringMVC架构,数据库使用MySQL+hibernate,前端使用bootstrap3搭建的响应式框架,结合layIM搭建聊天界面 安装教程 本项目下载即可启动使用,进入首页注册一个账号跳转到登录页面登录...