bootstrap+angularjs页面布局小Demo

<div>
<ol id="funcPath" class="breadcrumb">
<li><a href="#"><span class="icon-home"></span>交易管理</a></li>
<li class="active" style="font-size:16px;color:#ff0101;font-weight:bold;">买卖管理</li>
</ol>
<div class="panel panel-where">
<div class="panel-heading">
<h3 class="panel-title">
查询条件
</h3>
</div>
<form class="form-horizontal" name="myForm">
<div class="panel-body" datetime-picker>
<div class="row">
<div class="form-group col-sm-5 col-md-5">
<label class="col-sm-4 control-label">部门/店组:</label>
<div class="col-sm-7">
<input type="text" class="form-control"/>
</div>
</div>
<div class="form-group col-sm-3 col-md-3">
<div class="col-sm-6 col-md-6">
<div class="checkbox">
<label>
<input type="checkbox"> 成交部门
</label>
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="checkbox">
<label>
<input type="checkbox"> 参与部门
</label>
</div>
</div>
</div>
<div class="form-group col-sm-4 col-md-4">
<label class="col-sm-5 control-label">合同编号:</label>
<div class="col-sm-7">
<input id="contract_search" ng-model="exchange.contractno" type="text" data-provide="typeahead" class="form-control" placeholder="合同编号"/>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6 col-md-6">
<label class="col-sm-3 control-label">录入时间:</label>
<div class="col-md-9 col-sm-9 form-inline">
<div class="input-group date form_datetime to_time">
<input class="form-control" ng-model="exchange.ipdate" type="text" size=18 readonly/>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
-
<div class="input-group date form_datetime to_time">
<input class="form-control" ng-model="exchange.ipdates" type="text" size=18 readonly/>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
</div>
</div>
<div class="form-group col-sm-6 col-md-6">
<label class="col-sm-3 control-label">签单日期:</label>
<div class="col-md-9 col-sm-9 form-inline">
<div class="input-group date form_datetime to_date">
<input class="form-control" ng-model="exchange.dealdate" type="text" size=10 readonly/>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
-
<div class="input-group date form_datetime to_date">
<input class="form-control" ng-model="exchange.dealdates" type="text" size=10 readonly/>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-8 col-md-8">
<label class="col-sm-3 control-label">物业地址:</label>
<div class="col-sm-9">
<input type="text" ng-model="exchange.address" class="form-control"/>
</div>
</div>
<div class="form-group col-sm-4 col-md-4">
<label class="col-sm-4 control-label">楼盘:</label>
<div class="col-sm-7">
<input type="text" class="form-control"/>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-4 col-md-4">
<label class="col-sm-5 control-label">房源编号:</label>
<div class="col-sm-7">
<input id="house_search" type="text"class="form-control" ng-model="exchange.housesid" placeholder="房源编号" data-provide="typeahead" required/>
</div>
</div>
<div class="form-group col-sm-4 col-md-4">
<label class="col-sm-5 control-label">客源编号:</label>
<div class="col-sm-7">
<input id="customer_search" type="text" class="form-control" ng-model="exchange.customerid" placeholder="客源编号" data-provide="typeahead" required/>
</div>
</div>
<div class="form-group col-sm-4 col-md-4">

</div>
</div>
<div class="row">
<div class="form-group col-sm-4 col-md-4">
<label class="col-sm-4 control-label">业主姓名:</label>
<div class="col-sm-7">
<input type="text" class="form-control"/>
</div>
</div>
<div class="form-group col-sm-4 col-md-4">
<label class="col-sm-4 control-label">业主电话:</label>
<div class="col-sm-7">
<input type="text" ng-model="exchange.buyercontacts" class="form-control" name="phoneHost" required ng-trim="true" ng-pattern=" /^1[0-9]{10}$/"/>
<span ng-show="myForm.phoneHost.$error.required">必填项</span>
<span style="color:red" ng-show="myForm.phoneHost.$invalid&&!myForm.phoneHost.$error.required">非法的号码</span>
</div>
</div>
<div class="form-group col-sm-4 col-md-4">
<label class="col-sm-4 control-label">是否连环单:</label>
<div class="col-sm-7">
<select class="form-control" ng-model="exchange.ischainsheet">
<option selected value="">--请选择--</option>
<option value="0">是</option>
<option value="1">否</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-4 col-md-4">
<label class="col-sm-4 control-label">客户姓名:</label>
<div class="col-sm-7">
<input type="text" class="form-control"/>
</div>
</div>
<div class="form-group col-sm-4 col-md-4">
<label class="col-sm-4 control-label">客户电话:</label>
<div class="col-sm-7">
<input type="text" ng-model="exchange.sellercontacts" class="form-control" name="phoneCustomer" required ng-trim="true" ng-pattern=" /^1[0-9]{10}$/"/>
<span ng-show="myForm.phoneCustomer.$error.required">必填项</span>
<span style="color:red" ng-show="myForm.phoneCustomer.$invalid&&!myForm.phoneCustomer.$error.required">非法的号码</span>
</div>
</div>
<div class="form-group col-sm-4 col-md-4">
<label class="col-sm-4 control-label">是否退单:</label>
<div class="col-sm-7">
<select class="form-control" ng-model="exchange.isdel">
<option selected value="">--请选择--</option>
<option value="0">是</option>
<option value="1">否</option>
</select>
</div>
</div>
</div>
<div class="row









</div>
<div class="row">
<label class="col-sm-4 control-label">本页金额统计:</label>
<div class="col-sm-2">
<select class="form-control" id="statistic">
<option selected value="0">合同价</option>
<option value="1">网签价</option>
<option value="2">应收总收入</option>
<option value="3">实收总收入</option>
<option value="4">面积</option>
</select>
</div>
<div class="col-sm-4">
<label class="control-label">合计:</label>      
<label id="P1" class="control-label">{{contractPrice}}元</label>
<label id="P2" class="control-label">{{contractNet}}元</label>
<label id="P3" class="control-label">{{contractArea}}m2</label>
<label id="P4" class="control-label">{{gross}}元</label>
<label id="P5" class="control-label">{{net}}元</label>      
<label class="control-label">平均:</label>      
<label id="A1" class="control-label">{{contractAvg}}元</label>
<label id="A2" class="control-label">{{netAvg}}元</label>
<label id="A3" class="control-label">{{areaAvg}}m2</label>
<label id="A4" class="control-label">{{grossAvg}}元</label>
<label id="A5" class="control-label">{{netsAvg}}元</label>
</div>
</div>
</div>
<div class="panel-footer">
<button type="button" class="btn btn-primary" ng-click="query();">查询</button>
<button type="button" class="btn btn-warning" onclick="reset();">重置</button>
</div>
</form>
</div>
<div class="panel panel-info">
<div class=" panel-body">
<div class="panel-option">
<div class="row">
<div class="col-sm-12 col-md-12 text-left">
<div class="btn-group">

<button type="button" class="btn btn-primary" ng-click="appendix()" ng-disabled="isRadios">
<span class="glyphicon glyphicon-plus" style="color: #ffffff;font-size: 17px;" ui-sref="list.appendix">创建附属合同</span>
</button>
<button type="button" class="btn btn-primary" ng-click="revoked()" ng-disabled="isRadio">
<span class="glyphicon glyphicon-trash" style="color: #ffffff;font-size: 17px;" ui-sref="list.revoked">作废</span>
</button>
<button type="button" class="btn btn-primary dropdown">
<span class="glyphicon glyphicon-th-list" style="color: #ffffff;font-size: 17px;" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">合同下推</span>
<ul class="dropdown-menu">
<li><a href="/finance/receiptreport/view/receiptReport.html?index=12">收款</a></li>
<li><a href="/finance/payPlanMoney/view/payPlanMoney.html?index=23">付款</a></li>
</ul>
</button>
<button type="button" class="btn btn-primary" ng-click="receipt()" ng-disabled="isRadio">
<span class="glyphicon glyphicon-edit" style="color: #ffffff;font-size: 17px;" ui-sref="list.receipt">换收据</span>
</button>
<button type="button" class="btn btn-primary" ng-click="invoice()" ng-disabled="isRadio">
<span class="glyphicon glyphicon-edit" style="color: #ffffff;font-size: 17px;" ui-sref="list.invoice">换发票</span>
</button>

</div>
</div>
</div>
<div class="table-responsive">
<table id="clearerTable" class="table table-hover table-bordered ">
<thead class="table-heading">
<tr>
<th class="text-center firstline">
选择
</th>
<th class="text-center">买卖合同号</th>
<th class="text-center">签单日期</th>
<th class="text-center">录入时间</th>
<th class="text-center">审核时间</th>
<th class="text-center">房源编号</th>
<th class="text-center">房源录入日期</th>
<th class="text-center">客源编号</th>
<th class="text-center">客源录入日期</th>
<th class="text-center">物业地址</th>
<th class="text-center">成交价</th>

<th class="text-center">卖方性质</th>
<th class="text-center">买方性质</th>
<th class="text-center">店组</th>
<th class="text-center">经纪人</th>
<th class="text-center">收房区域</th>
<th class="text-center">权证内勤</th>
<th class="text-center">状态</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="result in resultList" style="cursor: pointer;">
<td class="text-center">
<input type="radio" name="checkbox" ng-click="checkResult(result)">
</td>
<td>
<a nref="#/list" ui-sref="menu.detail({id:result.ID})">
<span ng-bind="result.CONTRACTNO" ng-click="gotoDetail(result)"></span>
</a>
</td>
<td ng-bind="result.DEALDATE|date:'yyyy-MM-dd'"></td>
<td ng-bind="result.IPDATE|date:'yyyy-MM-dd HH:mm:ss'"></td>
<td ng-bind="result.APPROVEDATE"></td>
<td ng-bind="result.HOUSESID"></td>
<td ng-bind="result.HOUSETIME|date:'yyyy-MM-dd'"></td>
<td ng-bind="result.CREID"></td>
<td ng-bind="result.CUSTOMERTIME|date:'yyyy-MM-dd'"></td>
<td ng-bind="result.ADDRESS"></td>
<td ng-bind="result.PRICE"></td>

<td ng-bind="result.BUYER_NATURE|natureFliter"></td>
<td ng-bind="result.SELLER_NATURE|natureFliter"></td>
<td></td>
<td></td>
<td ng-bind="result.REGION"></td>
<td ng-bind="result.BACK_OFFICE"></td>
<td ng-bind="result.STT||'签约'"></td>
</tr>
</tbody>
</table>
</div>
<div class="row" style="margin-top: 1%;">
<div class="col-sm-6 col-md-5">
当前为第<span class="text-yellow" ng-bind="page||1"></span>页共<span class="text-yellow" ng-bind="total||0"></span>条记录每页<span class="text-yellow" ng-bind="size||0"></span>条
</div>
<div class="col-sm-6 col-md-7 text-right">
<pagination num-pages="pages" curr-page="page" on-select-page="selectPage(page)"></pagination>
</div>
</div>
</div>
<div class="modal fade" id="popModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<ui-view></ui-view>
</div>
</div> 
</div>
</div>