사랑해 마니마니

Bootstrap WebJar 사용하기 본문

spring boot in action

Bootstrap WebJar 사용하기

분리불안증후군 2018. 1. 14. 22:19

1. Bootstrap, JQuery Webjar 찾기

IntelliJ를 업데이트 했더니 갑자기 SDK 세팅값이 사라져 버렸다. T.T

 

https://www.webjars.org/에서 Bootstrap, jquery webjar찾기 (gradle 용으로)

compile 'org.webjars:jquery:3.2.1'

compile 'org.webjars:bootstrap:4.0.0-beta.3'


2. Bootstrap starter template에서 소스 copy하기

https://getbootstrap.com/docs/4.0/getting-started/introduction/


popper.js는 Popular WebJars없으니 찾아보자

[Add a WebJar] 옆의 search에서 검색하기

 1.3.0 version: compile 'org.webjars.npm:popper.js:1.13.0'


3. Thymeleaf로 src로 변경하기

  1) thymeleaf 네임스페이스 지정하기

<!doctype html>

<html lang="en">  -->  <html xmlns:th="http://www.thymeleaf.org" lang="en">

  <head>

  2) boot, jquery webjar로 변경하기

<link rel="stylesheet" th:href="@{/webjars/bootstrap/4.0.0-beta.3/css/bootstrap.min.css}">

<script th:src="@{/webjars/jquery/3.2.1/jquery.min.js}"></script>

<script th:src="@{/webjars/popper.js/1.13.0/dist/popper.min.js}"></script>

<script th:src="@{/webjars/bootstrap/4.0.0-beta.3/js/bootstrap.min.js}"></script>


4. Thymeleaf cache 설정하기

src/main/resources 디렉토리에 application.properties 파일을 만들고

spring.thymeleaf.cache=false 로 설정



5. 스프링 부트 시작해서 해당 html 접근하기

chrome > More Tools > Devloper Tools

  * Console 메뉴와 Sources 메뉴에서 WebJar 소스 JS 파일 위치가 오류가 있는지 확인하기

저작자표시

'spring boot in action' 카테고리의 다른 글

3Tier 로 고치기  (0) 2018.04.21
Microservice @spring boot  (0) 2018.04.21
for each문 lambda 식으로 간편하게 쓰기  (1) 2017.12.24
intellij Lombok 설정하기  (0) 2017.12.24
Spring boot 최신 버전 build.gradle  (0) 2017.12.24
'spring boot in action' Related Articles more
Comments