#5_[spring boot] 부트스트랩(bootstrab) 시작하기(적용) :: 개발/일상_Mr.lee

#5_[spring boot] 부트스트랩(bootstrab) 시작하기(적용)

Posted by Mr.mandu.
2017. 11. 14. 11:55 개발/spring boot, gradle, mybatis Project

안녕하세요 ~!

현재 springboot 프로젝트를 진행중에 있습니다.

어디까지 진행될지는 모르겠지만 차근차근 진행중입니다.

개발자들은 디자인에 취약하기 때문에..

부트스트랩을 적용시켜보겠습니다.



저는 홈페이지에서 부트스트랩을 다운받아 사용했습니다.

부트스트랩 (http://bootstrapk.com/)



다운받아서 프로젝트에 적용한 모습입니다.

webapp 하위에 bootstrap폴더를 만들고 그안에 다운받은 폴더를 넣었습니다.

직접 다운받지 않고 CDN으로 하는 방법도 있습니다.


그리고 두번째 네모를 보시면 header.jsp가 있습니다.

각 페이지 상단에 부트스트랩 선언문을 적어주기 번거로워 header를 만들었습니다.


header.jsp

<link rel="stylesheet" href="/resources/bootstrap/css/bootstrap.css" >
<link rel="stylesheet" href="/resources/bootstrap/css/bootstrap-theme.css" >
<script src="/resources/bootstrap/js/bootstrap.min.js"></script>


경로를 보시면 이해가 가실거라고 생각합니다.

그리고 메인 페이지에 헤더를 적용시킨 모습입니다.


index.jsp 상단

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/include/header.jsp" %>

page의 한글처리를 위해 인코딩을 선언해주었고

2번째 줄이 header.jsp를 적용시킨 모습입니다.

그리고 부트스트랩 홈페이지에 있는 테마를 가져와서 

적용시켜 봤습니다.


상단 로고있는부분만 제가 변경한 모습입니다.

이제 부트스트랩을 이용하여 여러가지 게시판을 만들수 있게 되었습니다.

감사합니다.