今天我们就来说说有关于“如何使用bootstrap制作登录页面?”这个问题,以下是小编收集的相关内容,希望对大家的学习有所帮助。
在开始之前我们先来看下我们完成之后的一个效果图,如下所示:
一、修改样式
我们通过使用 background-color进行调整我们的背景颜色,代码如下所示:
#from { background-color: #96b97d; }
我们从代码中可以知道,我们调的时候只有给form加了背景色,我们也可以给整个页面添加背景颜色,代码如下所示:
body { background-color: #96b97d; }
也可以使用body设置背景照片,代码如下所示:
body {
background:url(../img/login_bg_0.jpg) #f8f6e9;
}
二、代码部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<title>用户登录</title>
<link rel="stylesheet" href="css/style.css" />
<script src="js/bootstrap.min.js"></script>
<link href="../css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>
<style>
#from
{
background-color: #96b97d;
}
.mycenter
{
margin-top: 100px;
margin-left: auto;
margin-right: auto;
height: 350px;
width: 500px;
padding: 5%;
padding-left: 5%;
padding-right: 5%;
}
.mycenter mysign
{
width: 440px;
}
.mycenter input, checkbox, button
{
margin-top: 2%;
margin-left: 10%;
margin-right: 10%;
}
.mycheckbox
{
margin-top: 10px;
margin-left: 40px;
margin-bottom: 10px;
height: 10px;
}
</style>
<script type="text/javascript">
$(function () {
$('#btn').click(function (e) {
window.location.href = "main.aspx";
});
});
</script>
</head>
<body>
<form id="from">
<div class="mycenter">
<div class="mysign">
<div class="col-lg-11 text-center text-info">
<h2>
请登录</h2>
</div>
<div class="col-lg-10">
<input type="text" class="form-control" name="username" placeholder="请输入账户名" required
autofocus />
</div>
<div class="col-lg-10">
</div>
<div class="col-lg-10">
<input type="password" class="form-control" name="password" placeholder="请输入密码" required
autofocus />
</div>
<div class="col-lg-10">
</div>
<div class="col-lg-10 mycheckbox checkbox">
<input type="checkbox" class="col-lg-1">记住密码</input>
</div>
<div class="col-lg-10">
</div>
<div class="col-lg-10">
<button type="button" id="btn" class="btn btn-success col-lg-12">
登录</button>
</div>
</div>
</div>
</form>
</body>
</html>
我们在完成这串代码输入就可以完成我们的一个登录页面了,有感兴趣的小伙伴们快来试试吧!
总结:
以上就是有关于“如何使用bootstrap制作登录页面?”这个问题的相关内容,有感兴趣的小伙伴们可以在W3cschool中进行学习和了解更多有关于bootstrap的相关内容,当然如果你对登录页面有其他的看法也可以和大家一同分享和了解。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。