以下是两个HTML
后台管理主页的例子：
1. 单页版
后台管理模板
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
后台管理主页</title>
<link rel="stylesheet" href="https://cdn.boot
css.com/bootstrap/3.3.7/
css/bootstrap.min.
css">
<link rel="stylesheet" href="https://cdn.boot
css.com/font-awesome/4.7.0/
css/font-awesome.min.
css">
<link rel="stylesheet" href="
css/style.
css">
</head>
<body>
<div
class="wrapper">
<nav id="sidebar">
<div
class="sidebar-header">
<h3>
后台管理</h3>
</div>
<ul
class="list-unstyled components">
<li
class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">首页</a>
<ul
class="collapse list-unstyled" id="homeSubmenu">
<li><a href="#">子页面1</a></li>
<li><a href="#">子页面2</a></li>
<li><a href="#">子页面3</a></li>
</ul>
</li>
<li>
<a href="#">页面1</a>
</li>
<li>
<a href="#">页面2</a>
</li>
<li>
<a href="#">页面3</a>
</li>
</ul>
</nav>
<div id="content">
<nav
class="navbar navbar-default">
<div
class="container-fluid">
<div
class="navbar-header">
<
button type="
button" id="sidebarCollapse"
class="navbar-btn">
<span></span>
<span></span>
<span></span>
</
button>
</div>
</div>
</nav>
<h2>欢迎来到
后台管理系统</h2>
<p>这是一个单页版
后台管理模板，基于Bootstrap实现的完全响应式
后台管理模板页面，同时支持web和移动端，界面扁平化大气炫酷。</p>
</div>
</div>
<script src="https://cdn.boot
css.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.boot
css.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
```
2. iframe
后台管理模板
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
后台管理主页</title>
<link rel="stylesheet" href="https://cdn.boot
css.com/bootstrap/3.3.7/
css/bootstrap.min.
css">
<link rel="stylesheet" href="https://cdn.boot
css.com/font-awesome/4.7.0/
css/font-awesome.min.
css">
<link rel="stylesheet" href="
css/style.
css">
</head>
<body>
<div
class="wrapper">
<nav id="sidebar">
<div
class="sidebar-header">
<h3>
后台管理</h3>
</div>
<ul
class="list-unstyled components">
<li
class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">首页</a>
<ul
class="collapse list-unstyled" id="homeSubmenu">
<li><a href="#">子页面1</a></li>
<li><a href="#">子页面2</a></li>
<li><a href="#">子页面3</a></li>
</ul>
</li>
<li>
<a href="#">页面1</a>
</li>
<li>
<a href="#">页面2</a>
</li>
<li>
<a href="#">页面3</a>
</li>
</ul>
</nav>
<div id="content">
<nav
class="navbar navbar-default">
<div
class="container-fluid">
<div
class="navbar-header">
<
button type="
button" id="sidebarCollapse"
class="navbar-btn">
<span></span>
<span></span>
<span></span>
</
button>
</div>
</div>
</nav>
<h2>欢迎来到
后台管理系统</h2>
<p>这是一个iframe
后台管理模板，基于Bootstrap实现的完全响应式
后台管理模板页面，同时支持web和移动端，界面扁平化大气炫酷。</p>
<iframe src="http://www.baidu.com" frameborder="0" width="100%" height="500"></iframe>
</div>
</div>
<script src="https://cdn.boot
css.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.boot
css.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
```
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
