Bootstrap 다운 및 스프링 프로젝트에 적용

1. http://bootstrapk.com/getting-started/#download 에 접속후 사진과 같이 부트스트랩 다운로드

2. 압축을 풀고, 아래 사진과 같이 resources 폴더 하위에 css폴더와, fonts폴더, js폴더를 저장한다.

3. servlet-context.xml 중 일부, resourcess가 맵핑될 수 있도록 맵핑 코드 추가

<resources mapping="/css/**" location="/resources/css/" /> 
<resources mapping="/images/**" location="/resources/images/" /> 
<resources mapping="/js/**" location="/resources/js/" /> 
<resources mapping="/resources/**" location="/resources/" /> 

4. 마지막으로 사용할 때는 jsp 파일에 css파일의 링크를 걸고 사용할 디자인들을 <style> 태그 안에 넣어서 사용하면 된다.

<link rel = "stylesheet" href = "/css/bootstrap.css">
 
  <style>
    #container {
      width: 70%;
      margin: 0 auto;     /* 가로로 중앙에 배치 */
      padding-top: 10%;   /* 테두리와 내용 사이의 패딩 여백 */
    }
     
    #list {
      text-align: center;
    }
   
    #write {
      text-align: right;
    }
     
    /* Bootstrap 수정 */
    .table > thead {
      background-color: #b3c6ff;
    }
    .table > thead > tr > th {
      text-align: center;
    }
    .table-hover > tbody > tr:hover {
      background-color: #e6ecff;
    }
    .table > tbody > tr > td {
      text-align: center;
    }
    .table > tbody > tr > #title {
      text-align: left;
    }
     
    div > #paging {
      text-align: center;
    }
     
    .hit {
      animation-name: blink;
      animation-duration: 1.5s;
      animation-timing-function: ease;
      animation-iteration-count: infinite;
      /* 위 속성들을 한 줄로 표기하기 */
      /* -webkit-animation: blink 1.5s ease infinite; */
    }
     
    /* 애니메이션 지점 설정하기 */
    /* 익스플로러 10 이상, 최신 모던 브라우저에서 지원 */
    @keyframes blink {
      from {color: white;}
      30% {color: yellow;}
      to {color: red; font-weight: bold;}
      /* 0% {color:white;}
      30% {color: yellow;}
      100% {color:red; font-weight: bold;} */
    }
  </style>