上午接着折腾,总算做出个能看的了,实际效果如下:
先说一下需求:
1.查询框表头需要文字居左,高度一定,存在分隔边框;
2.查询框主体需要分隔边框;
3.查询框底部需要文字居右,添加按钮之类;
以下是三个CSS样式以及实际的代码:
.title {
height: 30px;
padding-left: 10px;
padding-top: 3px;
background-color: #d9d9d9;
border: 1px solid #CCCCCC;
text-align: left;
}
.body {
border: 1px solid #CCCCCC;
border-top: 0px;
padding-left: 12px;
padding-top: 12px;
background: #ededed;
}
.button1 {
border: 1px solid #CCCCCC;
border-top: 0px;
padding-right: 12px;
padding: 6px;
text-align: right;
background: #ededed;
}
并没有什么特别的地方,无非就是设置了下内边距以及背景色还有边框;
以下是这个查询框的代码:
<div class="container-fluid" style="margin-top:10px">
<div class="row">
<div class="col-lg-3">
<div class="title">
<span style="font-size: 13px; font-weight: bold; color: #555555" class="glyphicon glyphicon-search">查询</span>
</div>
<div class="body">
<div class="row">
<div class="col-lg-3">
<span style="font-size: 15px; margin-left:10px;">开始时间</span>
</div>
<div class="col-lg-9 form-group" style="margin-bottom: 10px">
<div class="col-lg-11 ">
<input class="form-control" >
</div>
</div>
<div class="col-lg-3">
<span style="font-size: 15px; margin-left:10px; ">结束时间</span>
</div>
<div class="col-lg-9 form-group" style="margin-bottom: 10px">
<div class="col-lg-11 ">
<input class="form-control" >
</div>
</div>
</div>
</div>
<div class="button1">
<button class="btn btn-success btn-sm">查询</button>
<button class="btn btn-primary btn-sm">重置 </button>
</div>
</div>
<div class="col-lg-9">
<p1>col-xs-9</p1>
</div>
<div class="col-lg-9">
<p1>col-xs-9</p1>
</div>
<div class="col-lg-9">
<p1>col-xs-9</p1>
</div>
</div>
</div>
之前项目使用的是bootstrap2.0早起版本,其中的"span"标签并不是很好用,主要是因为内边距,导致换行时,无法对齐。
而bootstrap3.0版本很好的解决了这个问题,如果大小超过12,那么会另起一行,并且自动对齐。
补充:关于响应式布局
“col-xs-x”、“col-sm-x”、“col-md-x”、“col-lg-x”这四个标签是根据屏幕分辨来适配,和实际屏幕尺寸无关,如果电脑、笔记本、手机、平板的分辨率都是1902*1080P,那么直接使用col-lg-x是可以适配所有设备的,这也就是所谓的响应式布局。
- 大小: 3.2 KB
分享到:
相关推荐
使用ThinkPhp5框架,实现了注册登录,发布修改文章,文章标签等功能,前端使用bootstrap,带数据库结构文件,需要使用apache或nginx代理,可直接使用,作为课设或者参考。
bootstrap网页前端框架,轻松搭建facebook网页效果,内部封装了css,js,jquery,定义了大量功能丰富的控件。
这么简单的功能还需要一天搭建基础环境?能不能只关心我所需要的业务? 有这样的一个项目,基于ASP.NET MVC、EntityFramework、Memcached、Bootstrap的快速项目开发框架,只需3秒钟即可创建一个带有简单用户管理的...
bootstrap+html5框架搭建简易添加页面,适合初学者,,,
采用强大的Angular和Bootstrap框架搭建的web框架,不需要过多的配置就能搭建一个美观高拓展性的平台
轻量级的layui框架后台模板bootstrap,想使用的快来下载
•下拉选择框:jQuery Select2 •树结构控件:jQuery zTree、jQuery wdtree •页面布局:jquery.layout.js 1.4.4 •图表插件:echarts、highcharts •日期控件: My97DatePicker •2、后端技术 •核心...
最新metronic+bootstrap后台框架,绝对可用
基于bootstrap的前端框架集合,方便前端及设计人员快速搭建前端页面,包含系统管理,各种表格等。
这是一个基于 AngularStrap 和 Bootstrap 搭建的中、小型 AngularJS Demo,其中包括 ui-router路由、文件上传、表单验证、手机邮箱注册、时间日期、动画特效、模态框、警示、选项卡、加载动画的一些封装。
Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 Bootstrap是基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和...
推荐2款我试用的Bootstrap JavaScript插件 jqBootstrapValidation验证控件 http://reactiveraven.github.com/jqBootstrapValidation/ bootsnipp http://bootsnipp.com/ 推荐插件:...
基于python flask框架构建的前后端分离,房屋租赁系统全栈项目,采用RESTful风格,使用bootstrap响应式布局,可用于本科毕业设计,课程设计作业等 使用flask框架RESTful风格快速搭建。 一个互联网租房项目,前端使用...
使用BootStrap进行UI设计;使用JSTL标识库用于减少JSP文件的Java代码;使用Navicat软件进行可视化操作。 适用人群:大学生群体(课程作业)、自学项目 能学到的东西:Springboot和Mybatis后端框架的使用,Maven项目...
这是C# mvc 5框架快速搭建文档,包含bootstrap前端框架。
简洁的后台管理界面 , 利用了Bootstrap与jQuery2.2.4 ,文件解压导进自己的项目中,可以通过Index.html 查看界面效果
bootstrap介绍 Bootstrap是前端开发中应用非常广泛的一个框架,最早是Twitter 公司内部的一个...说了这么多,都是题外话,下面看看bootstrap搭建传送带的代码。 进度指示器 <div id=homepage-feature class=carousel>
这是一个基于bootstrap搭建的信息管理后台系统模板,内容丰富,可改性强,可以根据这个系统来定制属于自己的后台管理系统
软件架构说明 本项目后台使用SpringMVC架构,数据库使用MySQL+hibernate,前端使用bootstrap3搭建的响应式框架,结合layIM搭建聊天界面 安装教程 本项目下载即可启动使用,进入首页注册一个账号跳转到登录页面登录...
2、项目后端搭建: 使用NodeJs的express框架完成电影网站后端搭建; 使用mongodb完成数据存储,通过mongoose模块完成对mongodb数据的构建; 使用jade模板引擎完成页面创建渲染; 使用Moment.js格式化电影存储时间; 3...