<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>bootstrap</title>
|
<script src="./js/jquery.js"></script>
|
<script src="./js/bootstrap/bootstrap.js"></script>
|
<link rel="stylesheet" href="/css/bootstrap/bootstrap.css">
|
</head>
|
<style type="text/css">
|
|
#box{
|
min-width:50px;
|
min-height: 50px;
|
width:100%;
|
height:100%;
|
margin:10px 10px 0px 0px;
|
background-color:red;
|
display: flex;
|
flex-flow: row nowrap;
|
align-items: flex-start;
|
justify-content: space-between ;
|
}
|
.left{
|
width:30%;
|
height:100%;
|
margin:0px 10px 0px 0px;
|
background-color:blue;
|
display: flex;
|
align-items: flex-start;
|
}
|
|
|
.right{
|
width:70%;
|
height:100%;
|
background-color:yellow;
|
display: flex;
|
align-items: flex-start;
|
}
|
|
#top{
|
width:100%;
|
height:75px;
|
font-family:"黑体";
|
font-size:32px;
|
display: flex;
|
flex-flow: row nowrap;
|
align-items: flex-end;
|
justify-content: space-between ;
|
}
|
|
#header_left{
|
width:100%;
|
height:50px;
|
display: flex;
|
flex-flow: row nowrap;
|
justify-content: flex-start ;
|
|
}
|
#header_left span{
|
width:100%;
|
height:50px;
|
display: flex;
|
line-height: 50px;
|
text-align: center;
|
|
}
|
#header_left img{
|
width:50px;
|
height:50px;
|
}
|
#header_right{
|
width:100%;
|
height:50px;
|
display: flex;
|
flex-flow: row nowrap;
|
align-items: flex-end;
|
justify-content: flex-end ;
|
}
|
#header_right span{
|
width:100px;
|
height:50px;
|
display: flex;
|
line-height: 50px;
|
text-align: center;
|
}
|
|
|
</style>
|
<body>
|
<div id="top">
|
<div id="header_left">
|
<img src="/image/log.jpeg" >
|
<span>泰瑞配置中心</span>
|
</div>
|
<div id="header_right">
|
<span class="username">张波</span>
|
<span class="logout">注销</span>
|
|
</div>
|
</div>
|
|
<div id="box">
|
|
<div class="left">
|
<div class="row">
|
<div class="col-3">
|
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
|
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
|
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
|
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
|
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
|
</div>
|
</div>
|
<div class="col-9">
|
<div class="tab-content" id="v-pills-tabContent">
|
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
|
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
|
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
|
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
<div ></div>
|
<div class="right">
|
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
<li class="nav-item" role="presentation">
|
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
|
</li>
|
<li class="nav-item" role="presentation">
|
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
|
</li>
|
<li class="nav-item" role="presentation">
|
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
|
</li>
|
</ul>
|
<div class="tab-content" id="myTabContent">
|
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
|
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
|
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
|
</div>
|
|
</div>
|
<div class="tab"></div>
|
</div>
|
</body>
|
</html>
|
