使用bootstrap3写一个后台管理模板
时间: 2023-07-20 13:39:29 浏览: 188
好的,以下是一个简单的后台管理模板,使用 Bootstrap 3:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>后台管理</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css" rel="stylesheet">
<style>
/* Custom styles for this template */
/* Override some defaults */
body {
padding-top: 50px;
}
.navbar {
margin-bottom: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {
height: 550px
}
/* Set gray background color and 100% height */
.sidenav {
background-color: #f1f1f1;
height: 100%;
}
/* On small screens, set height to 'auto' for the grid */
@media screen and (max-width: 767px) {
.row.content {
height: auto;
}
}
</style>
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<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>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">设置</a></li>
<li><a href="#">帮助</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">退出</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>菜单</h4>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">设置</a></li>
<li><a href="#">帮助</a></li>
</ul>
</div>
<div class="col-sm-9">
<h2>欢迎来到后台管理</h2>
<p>这里是后台管理的首页。</p>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>
```
这是一个基本的后台管理模板,包括导航栏、侧边栏和内容部分。你可以根据自己的需求进行修改和扩展。
阅读全文