bootstrap简易登陆页

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>第一中学教师办公管理系统</title>
    
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
<meta http-equiv="description" content="This is my page"/>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type='text/javascript' src='dwr/engine.js'></script>
    <script type='text/javascript' src='dwr/interface/ajax.js'></script>
  </head>
  <style>
  .panel{
    width:500px;
    left:50%;
    top:50%;
    position: absolute;
    margin-left:-250px;
    margin-top:-150px;
  }
  </style>
  <body>
    <div class="panel panel-primary">
      <div class='panel-heading'>
        第一中学办公系统
      </div>
      <div class="panel-body" style="padding-left:50px;">
        <span id="tip" class="text-danger" style="display: none"><span class="glyphicon glyphicon-warning-sign"></span>账号或密码错误,请重新输入</span>
        <span class="text-info" id="welcome">欢迎使用第一中教师办公管理系统!</span>
        <span id="loading" style="display:none"><img src="img/loading.gif">正在登录</span>
      </div>
      <div class="panel-body">
        <form class="form-horizontal" role="form" onsubmit="return check()">
        <script type="text/javascript">
        function check(){
           $("#tip").hide();
           $("#welcome").hide();
           $("#loading").show();
           var id = $("input[name=id]").val();
           var pwd = $("input[name=pwd]").val();
           ajax.login(id,pwd,function(data){
              if (data=="ok") {
window.location.href="admin";
 }else{
   $("#welcome").hide();
   $("#loading").hide();
   $("#tip").fadeIn();
 }
           });
           return false;
         }
        </script>
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">账号</label>
            <div class="col-sm-10">
              <input type="number" name="id"  class="form-control" id="inputEmail3" style="width:300px" required>
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10">
              <input type="password" name='pwd' class="form-control" id="inputPassword3" style="width:300px" required>
            </div>
           </div> 
         <div class="form-group">
           <div class="col-sm-offset-2 col-sm-10">
             <button type="submit" class="btn btn-primary">登录</button>
           </div>
         </div>
        </form>
      </div>
      <div class="panel-footer text-center" >
        版权所有<span style="font-family:Arial, Helvetica, sans-serif;" >
©</span>2014 天津工业大学 All Rights Reserved.</div>
    </div>
  </body>
</html>

你可能感兴趣的:(bootstrap简易登陆页)