console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Bootstrap
</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body >
<header class="manager">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
<a class="navbar-brand" href="#">
我的电脑
</a>
</div>
<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>
<a href="#">
软件测试
</a>
</li>
<li>
<a href="#">
娱乐游戏
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-xs">
<li>
<a href="#">
Link
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">
菜单
<span class="caret">
</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
我的信息
</a>
</li>
<li>
<a href="#">
修改密码
</a>
</li>
<li>
<a href="#">
退出系统
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid-full">
<nav class="navbar-default navbar-side" role="navigation">
<div id="sideNav" href="" class="">
<i class="fa fa-caret-right">
</i>
</div>
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<input type="text" class="form-control" placeholder="......" />
</li>
<li>
<a class="active" href="#">
<i class="fa fa-dashboard">
</i>
昨天文档不可追
</a>
</li>
<li>
<a href="#">
<i class="fa fa-sitemap">
</i>
今天文档
<span class="fa arrow">
</span>
</a>
<ul class="nav nav-second-level collapse">
<li>
<a href="#">
Second Level Link
</a>
</li>
<li>
<a href="#">
Second Level Link
</a>
</li>
<li>
<a href="#">
Second Level Link
<span class="fa arrow">
</span>
</a>
<ul class="nav nav-third-level collapse">
<li>
<a href="#">
Third Level Link
</a>
</li>
<li>
<a href="#">
Third Level Link
</a>
</li>
<li>
<a href="#">
Third Level Link
</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-fw fa-file">
</i>
天天文档
</a>
</li>
</ul>
</div>
</nav>
<div class="content_wrap">
<div class="content">
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js">
</script>
</body>
</html>
.manager .navbar {
color: #fff;
margin-bottom:0;
position: fixed;
z-index: 99;
width:100%;
border:none;
}
.manager .navbar .navbar-brand {
width: 170px;
text-align: center;
background: #1e8fc6;
color: #fff;
}
.manager .navbar .navbar-brand:hover {
background: #1e8fc6;
color: #fff;
}
.manager .navbar-default .navbar-collapse {
background: #36a9e1;
}
.manager .navbar-default .navbar-nav>li>a {
color: #fff;
margin-right: 2px;
}
.manager .navbar-default .navbar-nav>li>a:hover {
color: #fff;
background-color: #3ebaf7;
}
.manager .navbar-default .navbar-nav>.active>a,
.manager .navbar-default .navbar-nav>.active>a:focus,
.manager .navbar-default .navbar-nav>.active>a:hover {
color: #fff;
background-color: #3ebaf7;
}
.container-fluid-full {overflow:hidden;width：100%; padding-top: 50px;}
.navbar-side.navbar-default{position:fixed;width:170px;top:50px;height:100%; background: #383e4b;
padding-top: 0px;}
.navbar-side .nav li:first-child{padding:10px;}
.navbar-side .nav li:first-child input{background:#2d323d;border:none;}
.navbar-side .nav a{color:#fff;margin-bottom:0px;}
.navbar-side .nav a.active{background:#2d323d;}
.navbar-side .nav a:hover{background:#2d323d;}
.content_wrap{min-height:800px;margin: 0 0 0 170px; width：86%; padding:20px; }
.content{width:100%;
margin: 0;
background-color: transparent;
padding: 10px 6px;
min-height: 1200px;}