溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下怎么使用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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
