34- Add CSS and JS files to thymeleaf template
Add CSS and JS files to thymeleaf template
thymeleaf-springboot-tutorial --> src/main/resources --> static --> css --> main.css
h2{
font-family:sans-serif;
font-size:1.5rem;
text-transform:uppercase;
}
strong{
font-weight:700;
background-color:yellow;
}
p{
font-family:sans-serif;
}
thymeleaf-springboot-tutorial --> src/main/resources --> static --> js --> action.js
function demo(){
alert("You are learning combining CSS ,JS and Thymeleaf together ")
}
thymeleaf-springboot-tutorial --> src/main/resources --> templates --> add-css-js-demo.html
<!DOCTYPE html>
<html xmlns:th="//www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>CSS,JS and Template together</title>
<link th:href="@{/css/main.css}" rel="stylesheet">
<script type="text/javascript" th:src="@{/js/action.js}"></script>
</head>
<body>
<h2>Heading in Sans Serif Style</h2>
<p>This is a text on which <strong>strong CSS is applied</strong> and para css.</p>
<button type="button"th:onclick="demo()">Show Alert</button>
</body>
</html>
thymeleaf-springboot-tutorial --> src/main/java -->net.javaguides.springboot -->HelloWorldContoller.java
package net.javaguides.springboot;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HelloWorldController {
@GetMapping("/hello")
public String hello(Model model){
model.addAttribute("message"," Hello World ");
return "helloworld";
}
@GetMapping("/css")
public String addCSS(){
return "add-css-js-demo";
}
Comments
Post a Comment