스프링 부트 스트랩 적용

www.getbootstrap.com  다운로드

다운로드를 하면 css폴더와 js폴더가 있는데 둘다 복붙하여 스프링 파일 resources/static 하위에 붙여넣어준다.

resources를 syncronize(디스크에서 다시 로드)해주고 프로젝트 빌드(망치 아이콘)를 다시 해주고 실행시키면 적용이 된다.

 

근데 이렇게 하면 스타일이 좀 구식으로 느껴질 수 있다.

 

static/css 폴더 하위에 jumbotron-narrow.css를 하나 생성하고 다음을 붙여 넣자.

/* Space out content a bit */
body {
 padding-top: 20px;
 padding-bottom: 20px;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
 padding-left: 15px;
 padding-right: 15px;
}
/* Custom page header */
.header {
 border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
 margin-top: 0;
 margin-bottom: 0;
 line-height: 40px;
 padding-bottom: 19px;
}
/* Custom page footer */
.footer {
 padding-top: 19px;
 color: #777;
 border-top: 1px solid #e5e5e5;
}
/* Customize container */
@media (min-width: 768px) {
 .container {
 max-width: 730px;
 }
}
.container-narrow > hr {
 margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
 text-align: center;
 border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
 font-size: 21px;
 padding: 14px 24px;
}
/* Supporting marketing content */
.marketing {
 margin: 40px 0;
}
.marketing p + h4 {
 margin-top: 28px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
 /* Remove the padding we set earlier */
 .header,
 .marketing,
 .footer {
 padding-left: 0;
 padding-right: 0;
 }
 /* Space out the masthead */
 .header {
 margin-bottom: 30px;
 }
 /* Remove the bottom border on the jumbotron for visual effect */
 .jumbotron {
 border-bottom: 0;
 }
}

 

 

 

 

++) 혹은 css, js 전부 붙여넣기 할 필요 없음. jumbotron도 필요없음

압축을 출고 bootstrap.min.css 를 복사해서 다음 폴더에 추가하자

      resources/static/css/bootstrap.min.css