# 부트스트랩 적용하기
### 부트스트랩 자료 받아오기
먼저 부트스트랩을 다운받고 압축을 풉니다. ([부트스트랩 다운로드](http://getbootstrap.com))
![Imgur](https://i.imgur.com/jBrEbZq.png)
압축을 풀면 3개의 폴더(css, js, fonts)가 생성되는데, 이를 아래의 위치로 복사해 줍니다.
![Imgur](https://i.imgur.com/DOXicJc.png)
### 리소스 등록: sevlet-context.xml
부트스트랩 링크를 위해 `servlet-context.xml` 파일 아래와 같이 변경합니다.
**변경 전**
```xml
<resources mapping="/resources/**" location="/resources/" />
```
**변경 후**
```xml
<resources mapping="/**" location="/resources/" />
```
> xml 파일변경 시, 서버를 꼭 재시작 해주세요.
### 동작 확인
View 페이지에서 부트스트랩을 연결하여 동작을 확인해 봅니다. ([부트스트랩 템플릿](http://getbootstrap.com/getting-started/#template))
**views/home.jsp**
```
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page pageEncoding="utf-8" session="false"%>
<!doctype html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="<c:url value="/css/bootstrap.min.css" />" rel="stylesheet">
<title>Hello, world!</title>
<!-- JS -->
</head>
<body class="container">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>The time on the server is ${serverTime}.</p>
</div>
</body>
</html>
```
![Imgur](https://i.imgur.com/5eUmm5r.png)