Project requirements:
Introduce bootstrap resources and use css sample templates to create landing pages
If you need the source code, please add a WeChat account, enter the technical exchange group, send springboot106, and get the source code of this article for free.
Development steps:
1. Use Spring Assistant to create a project, select Web, thymeleaf module
2. Create Controller
package com.lulu.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class HelloController {
@RequestMapping("login")
public String goLogin() {
return "login";
}
}
3. Introduce resources
(1) https://v3.bootcss.com/getting-started/#downloadDownload the CSS package
(2) http://jquery.com/download/ download juery package
(2) https://getbootstrap.com/docs/4.3/examples/ download examples template
The bootstrap-4.3.1\bootstrap-4.3.1\site\docs\4.3\assets file is the resource file of the example
The bootstrap-4.3.1\site\docs\4.3\examples file is the example's html page and its own css file
(4) Integrate the assert file as follows
4. Write the login .html page
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Signin Template for Bootstrap</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/signin.css" rel="stylesheet">
<script src="assets/js/jquery-3.4.0.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</head>
<body class="text-center">
<form class="form-signin" method="post">
<!-- The value replaces the original default value-->
<img class="mb-4" src="assets/img/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label class="sr-only" >Username</label>
<input type="text" name="username" class="form-control" placeholder="Username"
required="" autofocus="">
<label class="sr-only" >Password</label>
<input type="password" name="password" class="form-control" placeholder="Password"
required="">
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"/> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit" >Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2019-2020</p>
</form>
</body>
</html>
5. Configuration Properties Page
server.servlet.context-path=/tiger
6. Run