登录界面设计css+JavaScript（基于bootStrap以及Jquery）

最新推荐文章于 2024-05-13 16:21:10 发布
最新推荐文章于 2024-05-13 16:21:10 发布
阅读量842 收藏 16
点赞数 1
分类专栏： 前端 文章标签： java-ee
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55946115/article/details/119539832
版权

环境搭建

导入bootStrap以及JQuery的文件并且引入资源。
在使用bootStrap时必须加入

	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

模板一（模态框弹出登录界面）

模板一效果图

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>关于css快速总结以及bootStrap使用简介</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/div/userLogin.js"></script>
</head>
<body>
    <!-- 按钮触发模态框 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalLogin">
        登录
    </button>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModalLogin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h3 class="modal-title" id="myModalLabel">
                       欢迎登录xx平台
                    </h3>
                </div>
                <div class="modal-body">
                    <form id="loginForm" class="form-horizontal" role="form" action="css.html">
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">账号</label>
                            <div class="col-sm-10">
                                <input required="required" id="username" name="username" type="text" class="form-control" id="firstname" placeholder="请输入账号...">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                                <input required="required" id="password" name="password" type="text" class="form-control" id="lastname" placeholder="请输入密码...">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <div class="checkbox">
                                    <label>
                                        <input name="flag" type="checkbox">请记住我
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button id="submit" type="submit" class="btn btn-primary col-sm-12">登录</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <a href="#">忘记密码</a>
                    <a href="#">其他方式登录</a>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</body>
</html>

js/div/userLogin.js目录下的js文件（添加ajax验证账号是否存在）

$(function () {
    //定义两个变量,布尔类型，为判断表单提交
    let flag1=false;
    let flag2=false;
    //验证账号
    $("#username").blur(function () {
        let reg=/^\w{9,12}$/;
        if (reg.test(this.value)){
        //ajax判断
            $.post("LoginServlet","username="+$(this).val(),function (data) {
                if (data.flag){
                    return true;
                }else {
                    $("#username").attr("style","border: 2px solid red");
                    $("#username").after("<span id='username_span' style='color: red;font-size: xx-small'>账号不存在...</span>");
                }
            },"json");
        }else{
            //添加账号不符合规范的信息
            $(this).attr("style","border: 2px solid red");
            $(this).after("<span id='username_span' style='color: red;font-size: xx-small'>账号应该为9-12个长度的字符串...</span>");
        }
    });
    //验证密码
    $("#password").blur(function () {
        let reg=/^\w{6,15}$/;
        if (reg.test(this.value)){
            flag2 = true;
        }else{
            $(this).attr("style","border: 2px solid red");
            $(this).after("<span id='password_span' style='color: red;font-size: xx-small'>密码应该为6-15个长度字符串...</span>");
        }
    });
    //聚焦时去掉错误提示信息格式
    $("#username").focus(function () {
        $(this).removeAttr("style");
        $("#username_span").remove();
    });

    $("#password").focus(function () {
        $(this).removeAttr("style");
        $("#password_span").remove();
    });
    //提交表单
    $("#loginForm").submit(function () {
        return flag1&&flag2;
    });

});

servlet的响应

package cn.supperbro.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

@WebServlet(name = "LoginServlet", value = "/LoginServlet")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        Map<String,Object> map = new HashMap<>();
        map.put("flag","180591106".equals(username));
        ObjectMapper mapper = new ObjectMapper();
        String s = mapper.writeValueAsString(map);
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(s);
    }
}

模板二（登陆，忘记密码，以及其他方式登录）

在这里插入图片描述

loginContext.html

<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
    <meta charset="UTF-8">
    <title>login...</title>
</head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>关于css快速总结以及bootStrap使用简介</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/div/loginContext.js"></script>
<body style="background-color: #e5e5e5">
    <div class="container-fluid" style="background-color: white">
        <div class="col-sm-12">
            <h1>&nbsp;&nbsp;<span class="glyphicon glyphicon-home" aria-hidden="true"></span> xx系统&nbsp;&nbsp;|&nbsp;&nbsp;<span class="text-success">Login</span></h1>
        </div>
    </div><br/>
    <div class="container" >
        <div class="col-sm-9" style="background-color: white;height: 15cm" >
            <h2 class="text-center" style="padding-top: 1cm">欢迎登录</h2>
            <hr style="border: 1px solid #ebccd1"/>
            <br/>
            <form id="loginForm" class="form-horizontal" role="form" action="#">
                <div class="form-group">
                    <label for="inputUsername" class="col-sm-2 control-label"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></label>
                    <div class="col-sm-9">
                        <input required="required" type="text" class="form-control" id="inputUsername" name="inputUsername"
                               placeholder="请输入账号...">
                    </div>
                </div><br/>
                <div class="form-group">
                    <label for="inputPassword" class="col-sm-2 control-label"><span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span></label>
                    <div class="col-sm-9">
                        <input required="required" type="password" class="form-control" id="inputPassword" name="inputPassword"
                               placeholder="请输入密码...">
                    </div>
                </div><br/>
                <div class="form-group">
                    <label for="userType" class="col-sm-2 control-label"><span class="glyphicon glyphicon-th-large" aria-hidden="true"></span></label>
                    <div class="col-sm-9">
                        <select id="userType" name="userType" class="form-control">
                            <option selected="selected">学生登录</option>
                            <option>职工登录</option>
                            <option>管理员登录</option>
                        </select>
                    </div>
                </div><br/>
                <div class="form-group">
                    <label for="inputPassword" class="col-sm-2 control-label"><span></span></label>
                    <div class="col-sm-9">
                        <input type="submit" class="form-control btn-primary" id="inputSubmit" style="height: 1.2cm" value="登录">
                    </div>
                </div>
                <div id="endPage" class="form-group">
                    <label for="inputPassword" class="col-sm-2 control-label"><span></span></label>
                    <div class="col-sm-9">
                        <input type="checkbox" checked="checked">&nbsp;十天免登录&nbsp;|&nbsp;<a href="findPassword.html">忘记密码</a>
                        &nbsp;|&nbsp;<a  style="cursor: pointer" title="提示"
                                         data-container="body" data-toggle="popover" data-placement="bottom"
                                         data-content="暂时不支持其他方式登录...">
                        其他方式登录</a>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-sm-3" style="background-color: #adadad;height: 15cm" >
            <h3 class="text-success text-center" style="margin-top: 50%">相关资讯...</h3>
        </div>
    </div>
</body>
</html>

loginContext.js

$(function () {
    $("[data-toggle='popover']").popover();
});

$(function () {
    //定义两个变量,布尔类型，为判断表单提交
    let flag1=false;
    let flag2=false;
    let flag3=false;
    //验证账号
    $("#inputUsername").blur(function () {
        let reg=/^\w{9,12}$/;
        if (reg.test(this.value)){
            $.post("LoginServlet","inputUsername="+$(this).val(),function (data) {
                if (data.flagUsername){
                    flag1 = true;
                }else {
                    $("#inputUsername").attr("style","border: 2px solid red");
                    $("#inputUsername").after("<span id='inputUsername_span' style='color: red;font-size: xx-small'>账号不存在...</span>");
                }
            },"json");
        }else{
            //添加账号不符合规范的信息
            $(this).attr("style","border: 2px solid red");
            $(this).after("<span id='inputUsername_span' style='color: red;font-size: xx-small'>账号应该为9-12个长度的字符串...</span>");
        }
    });
    //验证密码
    $("#inputPassword").blur(function () {
        let reg=/^\w{6,15}$/;
        if (reg.test(this.value)){
            flag2 = true;
        }else{
            $(this).attr("style","border: 2px solid red");
            $(this).after("<span id='inputPassword_span' style='color: red;font-size: xx-small'>密码应该为6-15个长度字符串...</span>");
        }
    });
    //聚焦时去掉错误提示信息格式
    $("#inputUsername").focus(function () {
        $(this).removeAttr("style");
        $("#inputUsername_span").remove();
    });

    $("#inputPassword").focus(function () {
        $(this).removeAttr("style");
        $("#inputPassword_span").remove();
    });
    //提交表单
    $("#loginForm").submit(function () {
        //点击提交按钮事件响应
        if (flag1&&flag2){
            $.post("LoginServlet",$("#loginForm").serialize(),function (data) {
                if (data.flagPassword){
                    alert('登录成功');
                    return true;
                }else {
                    $("#endPage").after("<div id=\"alertInfo\" class=\"alert alert-danger text-center col-sm-7 col-sm-offset-3\">密码错误,请重新输入...</div>");
                    setTimeout(function () {
                        $("#alertInfo").remove();
                    },3000);
                }
            },"json");
        }else {
            return flag3;
        }
    });

});

在这里插入图片描述
findPassword.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>findPassword...</title>
</head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>关于css快速总结以及bootStrap使用简介</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/div/findPassword.js"></script>
<body style="background-color: #e5e5e5">
<div class="container-fluid" style="background-color: white">
    <div class="col-sm-12">
        <h2>&nbsp;&nbsp;<span class="glyphicon glyphicon-home" aria-hidden="true"></span> xx系统&nbsp;&nbsp;|&nbsp;&nbsp;<span class="text-success">findPassword</span></h2>
    </div>
</div><br/>
<div class="container" >
    <div class="col-sm-10 col-sm-offset-1" style="background-color: white;height: 18cm" >
        <h2 class="text-center" style="padding-top: 1cm">找回密码</h2>
        <hr style="border: 1px solid #ebccd1"/>
        <br/>
        <form class="form-horizontal" role="form" id="findPasswordForm" action="#">
            <div class="form-group">
                <label for="inputUsername" class="col-sm-2 control-label"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></label>
                <div class="col-sm-7">
                    <input required="required" type="text" class="form-control" id="inputUsername" name="inputUsername"
                           placeholder="请输入账号...">
                </div>
            </div><br/>

            <div class="form-group">
                <label for="inputEmail" class="col-sm-2 control-label"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></label>
                <div class="col-sm-7">
                    <input required="required" type="text" class="form-control" id="inputEmail" name="inputEmail"
                           placeholder="请输入邮箱...">
                </div>
            </div><br/>

            <div class="form-group">
                <label for="inputPassword" class="col-sm-2 control-label"><span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span></label>
                <div class="col-sm-7">
                    <input required="required" type="password" class="form-control" id="inputPassword" name="inputPassword"
                           placeholder="请输入密码...">
                </div>
            </div><br/>

            <div class="form-group">
                <label for="inputPasswordAgain" class="col-sm-2 control-label"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span></label>
                <div class="col-sm-7">
                    <input required="required" type="password" class="form-control" id="inputPasswordAgain" name="inputPasswordAgain"
                           placeholder="再次输入密码...">
                </div>
            </div><br/>
            
            <div class="form-group">
                <label for="inputCode" class="col-sm-2 control-label"><span class="glyphicon glyphicon-globe" aria-hidden="true"></span></label>
                <div class="col-sm-5">
                    <input required="required" type="text" class="form-control" id="inputCode" name="code"
                           placeholder="请输入验证码...">
                </div>
                <div class="col-sm-2">
                    <input id="getCode" type="button"  class="form-control btn btn-info" value="验证码">
                </div>
            </div><br/>

            <div class="form-group">
                <label for="inputPassword" class="col-sm-2 control-label"><span></span></label>
                <div class="col-sm-7">
                    <input type="submit" class="form-control btn-primary" id="inputSubmit" style="height: 1.2cm" value="修改密码">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword" class="col-sm-2 control-label"><span></span></label>
                <div class="col-sm-7">
                    <a href="loginContext.html" target="_self">返回登录</a>
                    &nbsp;|&nbsp;<a  style="cursor: pointer" title="提示"
                                     data-container="body" data-toggle="popover" data-placement="bottom"
                                     data-content="暂时不支持其他方式登录...">
                    其他方式登录</a>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    $(function () {
        $("[data-toggle='popover']").popover();
    });
</script>
</body>
</html>

findPassword.js

$(function () {
    $("[data-toggle='popover']").popover();
});
//bootStrap弹出框

$(function () {
    //定义变量,布尔类型，为判断表单提交
    let flag1=false;
    let flag2=false;
    let flag3=false;
    let flag4=false;
    //验证账号
    $("#inputUsername").blur(function () {
        let reg=/^\w{9,12}$/;
        if (reg.test(this.value)){
            flag1 = true;
        }else{
            //添加账号不符合规范的信息
            $(this).attr("style","border: 2px solid red");
            $(this).after("<span id='inputUsername_span' style='color: red;font-size: xx-small'>账号应该为9-12个长度的字符串...</span>");
            flag1=false;
        }
    });
    //验证密码
    $("#inputPassword").blur(function () {
        let reg=/^\w{6,15}$/;
        if (reg.test(this.value)){
            flag2 = true;
        }else{
            $(this).attr("style","border: 2px solid red");
            $(this).after("<span id='inputPassword_span' style='color: red;font-size: xx-small'>密码应该为6-15个长度字符串...</span>");
            flag2=false;
        }
    });
    //验证第二次密码是否一致
    $("#inputPasswordAgain").blur(function () {
        let first = $("#inputPassword").val();
        let second = $("#inputPasswordAgain").val();
        if (first==second){
            flag3=true;
        }else {
            $(this).attr("style","border: 2px solid red");
            $(this).after("<span id='inputPasswordAgain_span' style='color: red;font-size: xx-small'>两次密码输入不一致...</span>");
            flag3=false;
        }
    });
    //验证邮箱格式是否正确
    $("#inputEmail").blur(function () {
        let reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
        flag4 = reg.test(this.value);
        if (flag4){}else {
            $(this).attr("style","border: 2px solid red");
            $(this).after("<span id='inputEmail_span' style='color: red;font-size: xx-small'>请输入正确的邮箱...</span>");
            flag4=false;
        }
    });
    //聚焦时去掉错误提示信息格式
    $("#inputUsername").focus(function () {
        $(this).removeAttr("style");
        $("#inputUsername_span").remove();
    });

    $("#inputPassword").focus(function () {
        $(this).removeAttr("style");
        $("#inputPassword_span").remove();
    });
    $("#inputPasswordAgain").focus(function () {
        $(this).removeAttr("style");
        $("#inputPasswordAgain_span").remove();
    });
    $("#inputEmail").focus(function () {
        $(this).removeAttr("style");
        $("#inputEmail_span").remove();
    });
    //获取验证码
    $("#getCode").click(function () {
        //使得验证码按钮失效60秒
        $(this).prop("disabled",true);
        let num = 61;
        let id =setInterval(function () {
            num--;
            $("#getCode").val("重新发送("+num+")");
            if (num<1){
                clear();
            }
        },1000);
        function clear() {
            clearInterval(id);
            $("#getCode").val("验证码");
            $("#getCode").prop("disabled",false);
        }
        $.get("FindPasswordServlet","flag=true",function (data) {

        },"json");
    });
    //提交表单
    $("#findPasswordForm").submit(function () {
        //点击提交按钮事件响应
        if (flag1&&flag2&&flag3&&flag4){
            let f1 = false;
            let f2 = false;
            $.post("LoginServlet",$("#loginForm").serialize(),function (data) {
                //验证验证码是否一致
                if (data.flagCode){
                    f1=true;
                }else {

                }
                //验证账号与邮箱是否对应
                if(data.flagUser){
                    f2=true;
                }
                else {
                    $("#endPage").after("<div id=\"alertInfo\" class=\"alert alert-danger text-center col-sm-7 col-sm-offset-3\">账号与邮箱不对应...</div>");
                    setTimeout(function () {
                        $("#alertInfo").remove();
                    },3000);
                }
            },"json");
            return f1&&f2;
        }else {
            return false;
        }
    });

});
SF_ONE
关注
  • 1
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
《Web前端开发技术(HTML+CSS+JavaScript)》题库附答案
m0_63394128的博客
03-14 1万+
什么是Web技术？ 答：Web即全球广域网（World Wide Web），也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。它是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超链接将Internet上的信息节点组织成一个互为关联a的网状结构。 什么是Web前端？ 答：Web前端是指基于Web（现在一般指动态页面技术）的客户端软件，也就是通常说的在浏览器端运行的网页程序...
nodejs+express+mongodb+bootstrap+jquery+ejs写的电影demo
12-06
标题中的“nodejs+express+mongodb+bootstrap+jquery+ejs写的电影demo”表明这是一个使用Node.js、Express框架、MongoDB数据库、Bootstrap前端框架、jQuery库以及EJS模板引擎开发的电影相关的应用程序示例。...
HTML+CSS+JS实现登入注册页面及其功能
m0_65762354的博客
05-17 734
直接上代码。
JavaScript实现页面登陆功能
java_de_road的博客
05-13 369
【代码】JavaScript实现页面登陆功能。
html好看的登录页面1（十三种风格登录页面源码）
xcLeigh
06-15 3万+
html好看的登录页面1（十三种风格登录源码），大气好看的网站登录页面html源码模板，页面源码，适用于各种项目，也可以用作学习，各种登录风格都有，高端大气上档次，直接嵌入使用，代码易懂，复用性高，你值得拥有。
HTML+CSS+jQuery实现登录界面（含用户验证）
apple_54470279的博客
05-28 5992
前言 本登录页面来自最近在做的一个学生作业管理项目。在系统设计时，学生和教师用户统一由该校的管理员导入，因此去除了用户注册的功能。 登录页面由 HTML+CSS+jQuery 实现，通过 $.ajax 获取 json 文件并读取其中保存的学校列表，动态的展示在选择学校的下拉列表中。 该页面实现了简单的登录验证功能。 不赘述 HTML 和 CSS 的实现原理！仅对 jQuery 部分进行详解，需要源代码的可以自行下载，内含详细注释。 源代码： CSDN： 百度网盘：https://pan.baidu.com/
SSM+Shiro+Bootstrap+Jquery项目实践之用户登陆
IT狂编师
11-12 579
早在一年前，我就想着自己要写一个完整的Web项目出来，然后开源，供所有的Web开发者探讨当下互联网企业流行的技术，可是由于种种原因未能付诸实践，所以在新的一年，我要坚持下去，从现在开始，利用休息时间建立这个系统。这个项目的目的不是为了盲目追求技术，而是能快速、优雅地解决现实中的实际需求，希望广大Web爱好者和我共同实现这个目标。  我没有写前端页面的基础，所以参考了一个比较成熟的框架AdminL...
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
06-04
本文将深入探讨这些技术，并基于"HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip"这个压缩包中的webdemo-master项目，分析它们在实际应用中的作用。 首先，HTML（HyperText Markup Language）...
基于前端Html+Css+JS+JQuery+bootstrap+后端Spring+SpringMVC等开发的SSM实时聊天系统
最新发布
05-14
基于前端Html+Css+JS+JQuery+bootstrap+后端Spring+SpringMVC等开发的SSM实时聊天系统，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于前端...
基于 HTML5 + CSS3 + JavaScript + jQuery + Bootstrap.zip
02-12
开发者可能使用HTML5的元素和特性来构建页面结构，用CSS3来美化和布局，JavaScript和jQuery负责交互逻辑，而Bootstrap则被用来快速构建响应式的用户界面。通过研究这个项目的源代码，你可以学习到如何将这些技术有效...
Bootstrap(首页整和&&实现登录、注册)
m0_68332494的博客
05-01 2738
首页整和以及实现登录、注册 案例1：首页轮播图实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例1：首页轮播图实现</title> <!-- 引入bootstrap样式 --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> .
基于Bootstrap的时尚登录界面设计.zip
07-04
这是一款基于bootstrap的时尚登录界面设计效果。该登录界面使用了bootstrap的表单元素，整个设计简洁时尚，值得推荐。 使用方法 在页面中引入bootstrap.min.css文件。
Bootstrap 登录页模板
06-20
Bootstrap 登录页模板 ：共计3种风格模板，可以自己修改作为系统的登录页，比较大气
Bootstrap+jquery实现页面跳转【小demo】
乔治大哥的博客
03-06 1917
引入jquery的库： <script type="text/javascript" src="../static/js/jquery.min.js" ></script> 在div的按钮上加onclick事件： <button type="button" class="btn btn-primary btn-lg" onclick="home()">...
可爱唯美且可用的后台登录界面，css，js，html，Bootstrap
Deng_Xian_Sheng的博客
07-05 893
话不多说，上图 可爱唯美且可用的后台登录界面，css，js，html，Bootstrap <input onclick="gtAlert('在公共电脑上请不要勾选记住密码！')"type="checkbox" class="custom-control-input" id="customSwitch1"> <label class="custom-control-label" for="customSwitch1">记住密码</label> </div> </div> <button
使用bootstrap框架实现简单登录页面
qq_49688914的博客
07-20 9336
登录注册
[前端]基于Bootstrap搭建登录页面，保姆级讲解，面面俱到~~~
qq_41604569的博客
04-05 2万+
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。在前端页面设计占有一定份额，今天手把手带你整除登录界面，最后的结果图如下： 页面要求 主要： 用户名 密码 同意单选框 登录按钮 修饰： 边框 阴影 开撸 1.新建一个login_demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>LoginDe
基于bootstrap的web登陆实例
Null
10-18 1万+
前情提要 之前已经搭好的springMVC+myBatis项目骨架,详情请看–>传送门。获取bootstrap方法一使用 Bootstrap 中文网提供的免费 CDN 加速服务（同时支持 http 和 https 协议） 将下面的代码copy到自己的JSP页面中即可。<!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn
Boostrap实现的登录界面
热门推荐
GoGoCoder
05-19 5万+
Boostrap是一个开源的web开发前端框架这几天我看了下Bootrap的官方文档。看到其中的Basic-form,突然想实现下登录界面。然后想了下实现的思路，就打开了桌面的H5 builder码起来。代码实现起来其实不难，但是碰到个问题，就是Bootstrap的布局控制好像用.col类难以实现居中显示，虽然可以用modal（模态框）实现弹出居中,但是我暂时不想用modal框。发现问题后，第一想法是
spring、spring mvc+hibernat+bootstrap+jquery
10-01
Bootstrap是一个开源的前端框架，它提供了一系列的CSS、JavaScript和HTML组件，使得开发人员可以快速构建美观且响应式的Web界面。Bootstrap具有灵活的网格系统，丰富的组件库和简单易用的API，可以用来快速搭建各种...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值