简单 Web 管理界面 HTML 代码示例 - Bootstrap 框架实现 - 常规

以下是一个简单的 Web 管理界面的 HTML 代码，包括一个导航栏、一个主体区域和一个底部区域。这个界面使用了 Bootstrap 框架，可以根据需要进行修改和扩展。

<!DOCTYPE html>
<html>
<head>
	<title>Web 管理界面</title>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width, initial-scale=1'>
	<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
	<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
	<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
</head>
<body>

	<!-- 导航栏 -->
	<nav class='navbar navbar-default'>
		<div class='container-fluid'>
			<div class='navbar-header'>
				<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='#myNavbar'>
					<span class='icon-bar'></span>
					<span class='icon-bar'></span>
					<span class='icon-bar'></span>
				</button>
				<a class='navbar-brand' href='#'>Web 管理界面</a>
			</div>
			<div class='collapse navbar-collapse' id='myNavbar'>
				<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'>
					<li><a href='#'><span class='glyphicon glyphicon-user'></span> 注册</a></li>
					<li><a href='#'><span class='glyphicon glyphicon-log-in'></span> 登录</a></li>
				</ul>
			</div>
		</div>
	</nav>

	<!-- 主体区域 -->
	<div class='container'>
		<h3>欢迎来到 Web 管理界面</h3>
		<p>这是一个简单的 Web 管理界面，使用 Bootstrap 框架实现。</p>
	</div>

	<!-- 底部区域 -->
	<footer class='container-fluid text-center'>
		<p>版权所有 © 2021 Web 管理界面</p>
	</footer>

</body>
</html>