使用bootstrap搭建查询框（2）

上午接着折腾，总算做出个能看的了，实际效果如下：



先说一下需求：
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是可以适配所有设备的，这也就是所谓的响应式布局。