页面的设计结构图
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>美团后台管理</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
<!-- 导航条 -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">美团后台管理系统</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">维护</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">功能 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">订餐</a></li>
<li><a href="#">投诉</a></li>
<li><a href="#">建议</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">管理链接</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">更多消息</a></li>
</ul>
</li>
<li><a href="javascript:;">帮助</a></li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="姓名">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="密码">
</div>
<button type="submit" class="btn btn-default top-right">登录</button>
</form>
</div>
</div>
</nav>
<!-- main主界面内容 -->
<div id="main" class="row" style="margin-top: 50px;">
<div id="left" class="col-md-3 col-sm-3 col-xs-3" >
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href="#">首页</a></li>
<li role="presentation"><a href="#">订单申报</a></li>
<li role="presentation"><a href="#">流水账单</a></li>
<li role="presentation"><a href="#">员工招聘</a></li>
<li role="presentation"><a href="#">业务审批</a></li>
<li role="presentation"><a href="#">员工投诉</a></li>
<li role="presentation"><a href="#">资料仓库</a></li>
</ul>
</div>
<div id="right" class="col-md-9 col-sm-9 col-xs-9" style="border-left: 2px solid darkgray;height: 1800px;">
<h1>管理控制后台</h1>
<div class="btn-toolbar" role="toolbar" >
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">审批</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">对账</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-success">汇款</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-info">发订单</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-warning">收款通知</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger">boss通道</button>
</div>
</div>
<div id="box" style="margin: 30px 0px;">
<div id="box1" class="col-md-6 col-sm-6 col-xs-12 panel panel-primary">
<div class="panel-heading">我的任务</div>
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>今日订单量
</li>
<li class="list-group-item">
<span class="badge">14</span>客户反馈回访
</li>
<li class="list-group-item">
<span class="badge">14</span>制定行程
</li>
<li class="list-group-item">
<span class="badge">14</span>星级评定
</li>
</ul>
</div>
<div id="box2" class="col-md-6 col-sm-6 col-xs-12 panel panel-primary">
<div class="panel-heading">最新提醒</div>
<ul class="list-group">
<li class="list-group-item">今日订单量</li>
<li class="list-group-item">客户反馈情况</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Morbi leo risus</li>
</ul>
</div>
<div id="box3" class="col-md-6 col-sm-6 col-xs-12 panel panel-primary">
<div class="panel-heading">最新订单</div>
<table class="table">
<tr><th>#</th><th>产品</th><th>数量</th><th>总金额</th><th>业务员</th></tr>
<tr><td>1</td><td>四驱车</td><td>8</td><td>1457</td><td>李雷</td></tr>
<tr><td>2</td><td>洗发露</td><td>14</td><td>5467</td><td>张三</td></tr>
<tr><td>3</td><td>脑白精</td><td>26</td><td>456</td><td>李四</td></tr>
</table>
<button type="button" class="btn btn-success">提交</button>
</div>
<div id="box4" class="col-md-6 col-sm-6 col-xs-12 panel panel-primary">
<div class="panel-heading">订单进度</div>
<span class="label label-info">Info</span>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
<span class="label label-danger">Info</span>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/bootstrap.min.js" charset="utf-8"></script>
</html>
运行结果：
一起学习，一起进步 -.- ，如有错误，可以发评论
