Bootstrap面板
文彭祖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/todc-bootstrap/3.3.7-3.3.13/css/todc-bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/todc-bootstrap/3.3.7-3.3.13/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/bootstrap3-dialog/1.35.4/js/bootstrap-dialog.min.js"></script>
<style type="text/css">
.container{
margin-top: 10px;
}
.input-group{
margin:2px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{
padding-right:0px;
padding-left: 0px;
}
</style>
</head>
<body>
<div class="container" id="container1" >
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">
<h3>归类管理</h3>
</div>
</div>
<div class="panel-body">
<fieldset>
<legend>分类管理</legend>
<form role="form">
<div class="row">
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">英文编码</span>
<input type="text" class="form-control" />
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">名称</span>
<input type="text" class="form-control" />
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">所属大类</span>
<input type="text" class="form-control" />
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">描述信息</span>
<input type="text" class="form-control" />
</div>
</div>
</div> <br />
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary">查看明细</button>
<button class="btn btn-primary">全选</button>
</div>
</div><br />
<div class="row">
<div class="col-md-12">
<table class="table table-hover">
<tr class="">
<td>订单编号</td>
<td>订单时间</td>
<td>支付状态</td>
<td>商户名称</td>
<td>支付方式 </td>
</tr>
<tr>
<td>20170102102523</td>
<td>2017-01-01 12:33:45</td>
<td>已支付</td>
<td>垒头商户有限公司</td>
<td>支付宝</td>
</tr>
<tr>
<td>20170102102523</td>
<td>2017-01-01 12:33:45</td>
<td>已支付</td>
<td>垒头商户有限公司</td>
<td>支付宝</td>
</tr>
<tr>
<td>20170102102523</td>
<td>2017-01-01 12:33:45</td>
<td>已支付</td>
<td>垒头商户有限公司</td>
<td>支付宝</td>
</tr>
</table>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>
</form>
</fieldset>
</div>
<div class="panel-footer">
Copyright@2017 Alibaba Group all
</div>
</div>
</div>
</body>
</html>
类似资料：