bootstrap div模組組成的登陸介面

阿新 • • 發佈：2019-01-20

公司logo是圖片形式，方便更換，

下面的自動化巡檢BOX是文字形式，自帶陰影效果，便於更換，

使用者登入框子也是div模組，格式不變。

bootstrap框架和jquery的使用，結合了大小屏的各種情況，併兼用了ie，火狐，谷歌瀏覽器。

最終效果圖如下：

jsp頁面原始碼：

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
           <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
        <link href="css/bootstrap.min.css" rel="stylesheet">
            <script type="text/javascript">
                window.onload = function(){
                        changeSize();
                }
                   window.onresize = function(){
                    changeSize();
                   }
                   function changeSize(){
                       var ttingo = $(window).height()-117;
                       $("#imageheight").css("height",ttingo);
                   }
               $().ready(function () {
                    $('#login').click(function () {
                            $.ajax({    
                                type: "POST",
                                url: "login.action",
                                data: "sysUser.loginName=" + escape($('#username').val()) + "&sysUser.password=" + escape($('#password').val()),
                                success: function (msg) {
                                    if (msg == "success") {
                                        parent.document.location.href = "mainPage.action"; //如果登入成功則跳到管理介面
                                    }
                                    if (msg == "failure") {
                                        alert('使用者名稱或密碼錯誤！');
                                        $('#username').val("");
                                        $('#password').val("");
                                    }
                                },
                                error: function (XMLHttpRequest, textStatus, thrownError) {
                                    alert('模組載入異常！');
                                }
                            });
                    });
                });
                 $().ready(function () {
                         $('#reset').click(function(){
                             $('#username').val("");
                           $('#password').val("");
                         });
                 });
            $().ready(function () {
             $("body").keydown(function(e) {
                  e = e||event; <span><span class="comment">//這邊是火狐和ie，使用的標準不同，所以新增一個e引數，相容ie和火狐!
                if (e.keyCode == "13") {//keyCode=13是回車鍵
                    $('#login').click();
                }
                });  
         });
              </script>
    </head>
    <body>
        <div class="container-fluid" id="imageheight" style="background-image:url('image/background.png');background-repeat: no-repeat;min-width: 600px;min-height:589px;">
            <div class="row" style="margin-top: 1%;">
                <div class="col-md-12" align="center">
                     <img src="image/a_03.png" align="center"/>
                </div>
            </div>
            <div class="row" style="margin-top: 1%;">
                <!--<div class="col-md-12" align="center">
                     <img src="image/a_07.png" align="center"/>
                </div>-->
                <div class="col-md-12" align="center" style="background-color: #0389DE;font-family:黑體;font-size:45px;color:white;text-shadow: 0 8px 9px black, 0px -2px 1px #fff;">
                    自動化巡檢BOX
                </div>
            </div>
            <div class="row" style="margin-top: 2%;">
                <div class="col-md-8 col-sm-5 col-xs-5"></div>
                <div class="col-md-4 col-sm-7 col-xs-7" style="background-image:url(image/aaaa.png);background-repeat: no-repeat;height: 339px;width: 344px;">
                    <form action="" method="post" id="loginform">
                        <div class="row" style="margin-top: 80px;">
                            <div class="col-md-12" style="width: 325px; margin-left: 10px;">
                                 <div class="input-group">
                                    <span class="input-group-addon"><img src="image/ren16.png"/></span>
                                    <input type="text" class="form-control" aria-describedby="sizing-addon2" id="username"  value="" placeholder="請輸入賬號">
                                 </div>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 15px;">
                            <div class="col-md-12" style="width: 325px; margin-left: 10px;">
                                 <div class="input-group">
                                    <span class="input-group-addon"><img src="image/suo16.png"/></span>
                                    <input type="password" class="form-control" aria-describedby="sizing-addon2" id="password"  value="" placeholder="請輸入密碼">
                                 </div>
                            </div>
                        </div>
                    </form>
                        <div class="row" style="margin-top: 30px;">
                             <div class="col-md-12" align="center" style="padding-left: 25px; padding-right: 25px;">
                                 <input type="button" value="登入" id="login" class="btn-info" style="width: 100%;border: 1px solid #55bafb;height: 41px;"/>
                             </div>    
                        </div>
                        <div class="row" style="margin-top: 15px;">
                             <div class="col-md-12" align="center" style="padding-left: 25px; padding-right: 25px;">
                                 <input type="button" value="取消" id="reset" class="btn-infohui" style="width: 100%;border: 1px solid #999999;height: 41px;"/>
                             </div>    
                        </div>
                </div>
            </div>
        </div>
        <div class="container-fluid" style="min-width: 600px;">
                <div class="row" >
                    <div class="col-md-12" align="center" style="background-color: #0389DE;height: 117px;line-height: 117px;font-family:黑體;font-size:15px;color:white;">
                     
                    </div>
                </div>
        </div>
    </body>
</html>

bootstrap div模組組成的登陸介面

bootstrap div 固定

brush div css highlight bar clas boot 樣式 bootstra div固定在頂部樣式： .navbar-fixed-top div固定在底部樣式 .navbar-fixed-bottom 　　bootstrap div 固定

bootstrap 一個簡單的登陸頁面

window tran 修改 min tle mar text ace rap 效果如圖：用bootstrap 寫的一個簡單的登陸一、修改樣式樣式可以自己調整，例如換個背景色之類的，修改 background-color屬性就可以 #from

cas+shiro+springboot+pac4j 自定義登陸介面以及驗證碼等

首先我把主要參考的文章貼出來： https://blog.csdn.net/weixin_39819191/article/details/80361301 https://blog.csdn.net/u010588262/article/category/7548325

c# Winform登陸介面設計，登陸使用者不同許可權設定

要求：登陸介面，使用者只有管理員和普通使用者管理員可以進行資料庫的增、刪、改、查；

一步一步實現web程式資訊管理系統之一----登陸介面實現

一步一步實現web程式資訊管理系統在web程式中特別是資訊管理系統，登陸功能必須有而且特別重要。每一個學習程式開發或以後工作中，都會遇到實現登陸功能的需求。而登陸功能最終提供給客戶或展現給客戶的最基本的就是2個文字框一個按鈕使用者名稱與密碼，外加一個登陸按鈕。本篇記錄一下登陸功能的前端介面的實現。 1.

python_01作業（編寫登陸介面）

import linecache error=0 for j in range(0,3,1): name = input("賬戶：") error_name= linecache.getline("D:\\work1error.txt", 1) if int

簡單的登陸介面

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Login</title></head><body> <h2&

QML與C++互動登陸介面設計

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

如何實現WPF登陸介面的記住賬號密碼功能（）

剛開始學程式設計。學了三個月了，學的C#和.net（貌似有點坑），公司應該是讓做b/s，socket和資料庫比較難，暫時不怎麼會，對WPF花的時間比較多一些（畢竟視覺化效果看起來比價有成就感）（WPF的課程案例貌似不多，加油）新手菜鳥，大神勿噴。我覺得幾個有趣的地方，左上角的【HIM是畫

易班登陸介面接入例項

接入流程：一，準備工作： 1，去易班開放平臺申請成為易班開發者並建立一個web應用。 2，獲取到APPID和APPSECRET，這兩個東西是這個應用的唯一憑證； 3，上面的首頁地址和回撥地址先寫成你的網站首頁地址二，具體操作：去易班開放平臺下載好SDK：https:

登陸介面測試

1，前提是你得有安裝好了的jmeter。這裡具體安裝教程自己百度學著弄吧。2，點選安裝了的jmeter檔案，bin路徑下找到jmeter.bat，以管理員方式執行開啟。3，這樣我們就來到了主介面。4，建立執行緒。5，我們以建立三個執行緒，跑一次為例子。6，在我們的指令碼中建立一個http請求。這裡的第一個請求

java swing 製作一個登陸介面，親測有效

一、介紹 Swing 是一個為Java設計的GUI工具包。 Swing是JAVA基礎類的一部分。 Swing包括了圖形使用者介面（GUI）器件如：文字框，按鈕，分隔窗格和表。 Swing提供許多比AWT更好的螢幕顯示元素。它們用純Java寫成，所以同Java本身一樣可以跨平臺執行，這一點不像AWT。它

CAS4.0.3服務的搭建實戰二【自定義登陸介面、登陸驗證、返回使用者資訊】

一切技術框架都會有一個使用者自定義的入口檔案，cas中自定義配置檔案在deployerConfigContext.xml中。一、自定義登陸驗證 Tips：本專案使用mysql資料庫，因此已經在pom中匯入mysql的驅動。開啟deployerConfigCo

老男孩作業之編寫登陸介面

編寫登陸介面輸入使用者名稱,密碼認證成功顯示歡迎資訊輸入錯誤三次後鎖定使用者 import getpass #讀取檔案中的使用者名稱 def read_to_file(name): with open("wrong.txt","r") as f:

【python tkinter】登陸介面

密碼輸入錯誤會彈出messagebox，輸入正確後可調轉到MainPage（下一節編寫） from tkinter import * from tkinter.messagebox import * class LoginPage(Frame): def __init__(se

自制登陸介面

初次製作還請見諒！！！！ <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://sc

用H5表單屬性製作簡易的登陸介面

今天學了H5新增的表單屬性，知道如何用新增的那些屬性（如form、placeholder）製作一個建議的登陸介面。首先，在form中用input寫一個文字框。關鍵程式碼如下： <form method="post"> 使用者名稱：<input typ

伺服器重啟登陸介面死迴圈

重灌顯示卡驅動賬戶下的.run檔案作為nvidia驅動 sudo sh NVIDIA.390.87.run -no-x-check -no-nouveau-check -no-opengl-files (因為如果不加run後面的那些，x-server可能顯示未關閉

session超時，登陸介面巢狀

在session超時，跳往登陸介面時，會出現頁面巢狀問題，如下圖：解決辦法，在登陸介面加以下js程式碼： <script> $(function(){ if(top.location != self.location){ top.locat

bootstrap div模組 組成的登陸介面

相關推薦

bootstrap div模組組成的登陸介面