小编给大家分享一下怎么使用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">
<h3>
请登录</h3>
</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制作登录页面”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
