请使用BootStrap搭建一个漂亮的后台管理系统,要求有左侧为导航栏,右侧为主体内容展示界面
时间: 2024-02-01 11:13:11 浏览: 153
基于SpringBoot+FreeMarker+MyBatis+ExtJs实现的一个通用后台管理系统,界面美观,.zip
好的,以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后台管理系统</title>
<!-- 引入 Bootstrap 样式文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- 左侧导航栏 -->
<div class="col-md-3 bg-light">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">用户管理</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">订单管理</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">商品管理</a>
</li>
</ul>
</div>
<!-- 右侧主体内容展示界面 -->
<div class="col-md-9">
<h1>欢迎使用后台管理系统</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod aliquam elit, eget facilisis lacus volutpat ac. Mauris vel velit in magna finibus sagittis. Proin nec enim ut mi bibendum pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vel velit ultricies, placerat metus et, feugiat massa. Duis malesuada odio sed dolor ultricies, eu porta dolor imperdiet. Integer dignissim, magna eu egestas porta, eros lacus congue orci, ut sagittis lectus nisl a augue. Sed faucibus nulla eu neque bibendum, in sodales elit bibendum. Fusce tempus auctor ex, eget tincidunt odio interdum a. Fusce eget dignissim odio. Nam ac ante faucibus, mattis dolor eu, pretium sem.</p>
</div>
</div>
</div>
<!-- 引入 Bootstrap JS 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
</body>
</html>
```
这是一个基于 Bootstrap 的后台管理系统模板,左侧为导航栏,右侧为主体内容展示界面。你可以根据自己的需求进行修改和扩展。
阅读全文