代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
<style>
body{
background-position:center;
background-color: #09F;
margin-top:18%;
margin-left:auto;
margin-right:auto;
width:300px;
}
</style>
</head>
<body>
<form>
<div class="form-group">
<div class="input-group">
<label class="input-group-addon">账号</label>
<input class="form-control input-lg" id="account" type="text" placeholder="请输入账号"/>
</div>
<br>
<div class="input-group">
<label class="input-group-addon">密码</label>
<input class="form-control input-lg" id="account" type="text" placeholder="请输入密码"/>
</div>
</div>
<div class="form-group">
<input type="button" class="btn btn-success" value="登入" style=" width:300px; font-weight:bold;"/>
</div>
</form>
</body>
</html>
说明：利用 input-group 下两个样式 label的 input-group-addon 和input的 form-control
结果
image.png
网友评论