第三天 -- 美化登录界面

上一篇介绍了实现登录界面的功能，这一节介绍如何美化登录界面。

效果图展示

这一节：

是不是比上一节的登录界面看起来舒服多了，主要是用了Bootstrap（Bootstrap是Twitter推出的一个用于前端开发的开源工具包，目前最流行的WEB前端框架）。

下载Bootstrap

1. 下载网址：https://getbootstrap.com/

2. 下载需要的版本（目前我用的版本3.3.7）

3. 下载下来后解压，得到目录如下

美化登录界面

1. 将dist文件夹拷贝到你需要用到的开发目录下。LoginPagesrcmainwebapp esourcesootstrap3_3_7dist

2. 编辑login.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Login</title>
    <!-- 使用bootstrap框架，美化登录界面 -->
    <link href="${pageContext.request.contextPath}/resources/bootstrap3_3_7/dist/css/bootstrap.css" rel="stylesheet">
    
</head>
<body>
<!-- 参考 https://bootsnipp.com/snippets/VxmR#comments -->
    <div class="container">
        <div class="row vertical-offset-100">
            <div class="col-md-4 col-md-offset-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Please sign in</h3>
                    </div>
                    <div class="panel-body" style="font-size: 16px;">
                        <form role="form" action="index" method="post">
                            <fieldset>
                                <div class="form-group">
                                    <label for="name">Name: </label>
                                    <!-- placeholder是水印 -->
                                    <input class="form-control" placeholder="Enter your name" name="name" type="text" style="font-size: 16px;text-align:left;" maxlength="30">
                                </div>
                                <div class="form-group">
                                    <label for="password">Password: </label>
                                    <input class="form-control" placeholder="Enter your password" name="password" type="password" style="font-size: 16px;text-align:left;" maxlength="30">
                                </div>
                                                        
                                <div align="center" class="form-group">
                                    <button type="submit" class="btn btn-lg btn-success btn-default btn-block" name="Login">Login</button>
                                </div>
                                                         
                                <p style="font-size: 14px; line-height: 150%; font-family: consolas;">
                                    <font color="red">${Error}</font>
                                </p>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

View Code

3. 运行程序，即可实现效果图的效果。

4. 工程目录展示