bootstrap登录页组件实例
2020-08-07 本文已影响0人
勇者与王者
最近在看bootstrap， 感觉界面比原始的好看多了。打算把一些组件记录下来，以后可以直接拿来用
核心：
核心是登录的表单 以及将body的背景图片，然后设置透明度：
<body style="background:url(imgs/34.jpg) no-repeat center; background-position: center 0; background-size: cover; margin: 0px;">
这句设置 背景图不重复 充满整个屏幕 无边距
然后是form表单
登录框：
<div class="col-md-4 col-lg-4 col-lg-offset-4 col-md-offset-4 col-center-block" style="background-color: white; opacity: 0.7; padding: 50px; border-radius: 10px">
col-md col-lg 还有col-lg-offset设置登录框的位置和宽度
border-radius 设置登录框的圆角
col-center-block是网上找到将登录框 垂直居中的方法：
.col-center-block {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
然后 bgcolor 设置登录框背景色 opactiy 设置透明度
其中遇到这个style的设置 范围要尽可能的具体到子元素，因为bootstrap自带的一写风格可能覆盖掉在父元素的属性
bootstrap自带的登录表单组件：
<div class="form-group input-group input-group-lg" >
每一行的组件group由span的文字和 后面的输入框组成
<span class="input-group-addon" id="sizing-addon1" >Username</span>
<input type="text" name="username" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
span的文字元素 class input-group-addon 表示这是附加在当前input-group组里面的
下面的 输入框 元素 class form-control 自带的类 aria-describedby 看官网没解释这个，但是我猜是匹配前面的span的id的 所以设置成一样的
最后的按钮：
<button type="submit" class="btn btn-default">登录</button>
效果：
login.png
完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>登录</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- 引入jQuery核心js文件 -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- 引入BootStrap核心js文件 -->
<script src="js/bootstrap.min.js"></script>
<style>
/*#sizing-addon1{*/
/* width: 112px;*/
/*}*/
/*#sizing-addon2{*/
/* width: 112px;*/
/*}*/
.col-center-block {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
</style>
</head>
<body style="background:url(imgs/34.jpg) no-repeat center; background-position: center 0; background-size: cover; margin: 0px;">
<h1>Welcome!</h1>
<div>
<form action="/StartWebApp/login" method="post" >
<div class="col-md-4 col-lg-4 col-lg-offset-4 col-md-offset-4 col-center-block" style="background-color: white; opacity: 0.7; padding: 50px; border-radius: 10px">
<div class="form-group input-group input-group-lg" >
<span class="input-group-addon" id="sizing-addon1" >Username</span>
<input type="text" name="username" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="form-group input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon2" >Password </span>
<input type="text" name="password" class="form-control" placeholder="Password" aria-describedby="sizing-addon2">
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">登录</button>
</div>
<!-- <div class="form-group">-->
<!-- <label for="" class="control-label">Paycheck</label>-->
<!-- <div class="input-group input-group-lg">-->
<!-- <span class="input-group-addon">$</span>-->
<!-- <input type="text" class="form-control" id="">-->
<!-- </div>-->
<!-- </div>-->
</div>
</form>
</div>
</body>
</html>
