使用bootstrap的登陆页面_bootstrap登录glyphicons-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_31491923/article/details/82776512

这里使用的是使用比较流行的自举完成的登陆界面：

运行主要截图以及代码如下：

主要CSS代码：

@charset“UTF-8”;
.grad {
position：absolute;
宽度：100％;
高度：100％;
背景：-webkit线性梯度（90度，＃c0abde，＃98e2bf）;
背景：线性渐变（90度，＃c0abde，＃98e2bf）;
}
.logindiv {
   position：fixed;
左：50％;
最高：50％;
transform：translate（-50％， - 50％）;
宽度：25％;
}
.hint {
   width：100％;
身高：50px;
字体大小：15像素;
文本对齐：中心;
font-family：'Glyphicons Halflings';
}
.title {
   font-size：70px;
字母间距：10px;
保证金：0自动;
文本对齐：中心;
位置：相对;
底部：70像素;
字体样式：斜体;
FONT-FAMILY：格鲁吉亚，衬线;
text-shadow：2px 2px 0.1px＃1d0000;
左：50％;
最高：20％;
transform：translate（-50％， - 50％）;
-webkit-用户选择：无;
    -moz-用户选择：无;
    -MS-用户选择：无;
    用户选择：无;
}

主要页面代码：

<！DOCTYPE html>
<html>
   <head>
       <meta charset =“UTF-8”>
       <title> </ title>
       <link rel =“stylesheet”href =“login.css”>
       <link rel =“stylesheet” href =“bootstrap / css / bootstrap.css”>
       <script src =“bootstrap / js / bootstrap.min.js”> </ script>
   </ head>
   <body>
       <div class =“grad”>
           <div class =“title”>选课管理</ div>
           <div class =“logindiv”>
               <form class =“bs-example bs-example-form”role =“form”action =“login / check”method =“post” >
                   <div class =“input-group input-group-lg”>
                       <span class =“input-group-addon”> <span class =“glyphicon glyphicon-user”> </ span> </ span>
                       <input type =“text”class =“form-control”name =“username” placeholder =“用户名”>
                   </ div>
                   <br>
                   <div class =“input-group input-group-lg”>
                       <span class =“input-group-addon”> <span class =“glyphicon glyphicon-lock “> </ span> </ span>
                       <input type =”password“class =”form-control“name =”password“placeholder =”请输入密码“>
                   </ div>
                   <br>
                   <div class =”hint “id =”hint“>
                           用户名或密码错误。
                   </ div>
                   <div class =“input-group input-group-lg”style =“margin：0 auto; width：100％;“>
                       <button type =”submit“class =”buttonlarg btn btn-primary btn-lg“style =”width：100％;“>登陆</ button>
                   </ div>
               </ form>
           < / div>
       </ div>
       <script>
           $（“[name ='username']，[name ='password']”）。focus（function（）{
               $（“＃hint”）。empty（）;
           }）
       </ script>
   </ body>
</ html>

文件下载地址：https：//download.youkuaiyun.com/download/qq_31491923/10704577

访问：
1.免费下载程序网站: http://47.107.130.183
2.老人管理程序网站: http://47.107.130.183:8088/ root:admin,pwd:admin
2.车辆管理程序网站: http://47.107.130.183:8081 root:admin,pwd:admin