App下載

如何使用bootstrap制作登錄頁面？登錄頁面制作方法分享！

猿友 2021-07-05 16:16:42 瀏覽數(shù) (8431)
反饋

今天我們就來說說有關(guān)于“如何使用bootstrap制作登錄頁面？”這個問題，以下是小編收集的相關(guān)內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

在開始之前我們先來看下我們完成之后的一個效果圖，如下所示：

登錄頁面效果圖

一、修改樣式

我們通過使用 background-color進(jìn)行調(diào)整我們的背景顏色，代碼如下所示：

#from
        {
            background-color: #96b97d;
        }

我們從代碼中可以知道，我們調(diào)的時候只有給form加了背景色，我們也可以給整個頁面添加背景顏色，代碼如下所示：

  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>

我們在完成這串代碼輸入就可以完成我們的一個登錄頁面了，有感興趣的小伙伴們快來試試吧！

總結(jié)：

以上就是有關(guān)于“如何使用bootstrap制作登錄頁面？”這個問題的相關(guān)內(nèi)容，有感興趣的小伙伴們可以在W3cschool中進(jìn)行學(xué)習(xí)和了解更多有關(guān)于bootstrap的相關(guān)內(nèi)容，當(dāng)然如果你對登錄頁面有其他的看法也可以和大家一同分享和了解。


Bootstrap

0 人點贊