今天我們就來說說有關(guān)于“如何使用bootstrap制作登錄頁面?”這個(gè)問題,以下是小編收集的相關(guān)內(nèi)容,希望對大家的學(xué)習(xí)有所幫助。
在開始之前我們先來看下我們完成之后的一個(gè)效果圖,如下所示:
一、修改樣式
我們通過使用 background-color進(jìn)行調(diào)整我們的背景顏色,代碼如下所示:
#from { background-color: #96b97d; }
我們從代碼中可以知道,我們調(diào)的時(shí)候只有給form加了背景色,我們也可以給整個(gè)頁面添加背景顏色,代碼如下所示:
body { background-color: #96b97d; }
也可以使用body設(shè)置背景照片,代碼如下所示:
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>
我們在完成這串代碼輸入就可以完成我們的一個(gè)登錄頁面了,有感興趣的小伙伴們快來試試吧!
總結(jié):
以上就是有關(guān)于“如何使用bootstrap制作登錄頁面?”這個(gè)問題的相關(guān)內(nèi)容,有感興趣的小伙伴們可以在W3cschool中進(jìn)行學(xué)習(xí)和了解更多有關(guān)于bootstrap的相關(guān)內(nèi)容,當(dāng)然如果你對登錄頁面有其他的看法也可以和大家一同分享和了解。