使用Bootstrap设计登录界面-CSDN博客

本文链接：https://blog.csdn.net/mind_programmonkey/article/details/77009116

这里介绍一个网站，bootstrap的UI库，点击打开链接，设计一个简单的登录界面

这里给出源码：这里link的连接bootstrap.css和bootstrap.js都是下载bootstrap这个文件，然后解压到相关目录下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>管理员登录界面</title>
	<link rel="stylesheet" href="../theme/bootstrap/css/bootstrap.css">
	<script src="../theme/bootstrap/js/bootstrap.js"></script>

</head>
<body>
	<div class="container">
		<div class="row" style="margin-top:200px;">
			<div class="col-md-3"></div>
			
			<div class="col-md-6" ">
			 
			    <div class="panel panel-primary">
			  		<div class="panel-heading">管理员登录</div>
			  		<div class="panel-body">
			    		
			    		<form class="form-horizontal">
							<div class="form-group">
						    	<label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
						    <div class="col-sm-10">
						      	<input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
						    </div>
						    </div>

						    <div class="form-group">
						    	<label for="inputEmail3" class="col-sm-2 control-label">密码</label>
						    <div class="col-sm-10">
						      	<input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">
						    </div>
						    </div>

						    <div class="form-group">
						    <div class="col-sm-2"></div>
						    <div class="col-sm-10">
						      	<input type="submit" value="提交登录" class='btn-primary'>
						    </div>
						    </div>
			    		</form>
					
					</div>
			  		 <div class="panel-footer text-right">版权所有，盗版必究</div>
			    </div>
			
			</div>
			
			<div class="col-md-3"></div>
		</div>
	</div>
</body>
</html>