📌[BootStrap] 이클립스에서 부트스트랩(템플릿) 적용하기

✔ 이클립스에서 부트스트랩(템플릿)을 적용해 보자!

 

---

1. 다양한 부트스트랩 사이트에서 원하는 템플릿 다운로드하기

 

---

2.  다운로드한 부트스트랩 폴더 내의 index.html 실행시킨다

---

3. index.html에서 페이지소스보기 후 전체 소스 복사하여,

적용하고 싶은 파일의 home.jsp에 붙여 넣기 한다.

---

4. 다운로드한 부트스트랩의 압축을 모두 푼 후 하단 위치(resources)로 붙여 넣기 해준다.

---

5. home.jsp에 끝이. css로 끝나는 css파일 링크들의 형식을 하단과 같이 바꿔준다.

 

수정전 코드

    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/templatemo.css">
    <link rel="stylesheet" href="assets/css/custom.css">

 

수정 후 코드

    <link rel="stylesheet" type = "text/css" href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css">
    <link rel="stylesheet" type = "text/css" href="${pageContext.request.contextPath}/resources/css/templatemo.css">
    <link rel="stylesheet" type = "text/css" href="${pageContext.request.contextPath}/resources/css/custom.css">

적용 코드

<link rel="stylesheet" type = "text/css" href="${pageContext.request.contextPath}/본인부트스트랩경로">

---

6. 끝이. js로 끝나는 코드도 하단과 같이 바꿔준다.

 

수정 전 코드

    <!-- Start Script -->
    <script src="assets/js/jquery-1.11.0.min.js"></script>
    <script src="assets/js/jquery-migrate-1.2.1.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/templatemo.js"></script>
    <script src="assets/js/custom.js"></script>
    <!-- End Script -->

수정 후 코드

    <!-- Start Script -->
    <script src="<c:url value = "/resources/js/jquery-1.11.0.min.js" />"></script>
    <script src="<c:url value = "/resources/js/jquery-migrate-1.2.1.min.js" />"></script>
    <script src="<c:url value = "/resources/js/bootstrap.bundle.min.js" />"></script>
    <script src="<c:url value = "/resources/js/templatemo.js" />"></script>
    <script src="<c:url value = "/resources/js/custom.js" />"></script>
    <!-- End Script -->

 

적용 코드

<script src="<c:url value = "본인 부트스트랩 경로" />"></script>

---

7. 이미지형식이 존재한다면 하단과 같이 바꿔준다. 

 

수정 전 코드

<link rel="apple-touch-icon" href="assets/img/apple-icon.png">
<link rel="shortcut icon" type = "image/x-icon" href="assets/img/favicon_02.ico">

수정 후 코드

<link rel="apple-touch-icon" type = "image/png" href="${pageContext.request.contextPath}/resources/img/apple-icon.png">
<link rel="shortcut icon" type = "image/x-icon" href="${pageContext.request.contextPath}/resources/img/favicon_02.ico">

 

적용 코드

<link rel="stylesheet" type = "image/확장자" href="${pageContext.request.contextPath}/본인 부트스트랩 경로">

---

톰캣 실행 후 다운로드한 부트스트랩과 동일하게 나온다면 성공 😊