반응형

안녕들 하시죠!

이번시간에는 Bootstrap 사용법에 대해 알아보겠습니다.

 

1. Bootstrap 라이브러리 다운

 

Bootstrap 공식 홈페이지에 가면 다운받을 수 있습니다.

http://bootstrapk.com/getting-started/

아래에 파일을 첨부했고, 저는 3.3.2 버전을 사용했습니다.

bootstrap-3.3.2-dist.zip
0.25MB
bootstrap-4.3.1-dist.zip
0.68MB

2. eclipse에 Bootstrap 라이브러리 폴더 만들기

 

WebContent 밑에 resources라는 폴더를 만들고 라이브러리를 압축 풀어 드래그해 넣었습니다.

3. Bootstrap 샘플 얻기

 

여러 사이트가 있지만 저는 https://www.bootdey.com/ 에서 샘플을 찾아보았습니다.

원하는 샘플을 찾아 클릭해 들어갑니다.

저는 개인프로필 샘플을 찾아들어갔습니다.

https://www.bootdey.com/snippets/view/gray-profile

 

 

 

4. HTML code 복사

 

원하는 .jsp나 .html 파일에 HTML code를 복사해 <body>태그 안에 붙여넣기 합니다.

 

5. CSS 파일 만들기

CSS code 부분 복사 -> 아까 만들어 둔 eclipse의 resources 폴더의 css 폴더에 .css 파일을 하나 만들기 -> 붙여넣기.

 

6. Bootstrap CDN 추가

 

HTML code를 복사 붙여넣기 했던 페이지에 CDN 코드 추가.

<link rel="stylesheet" href="resources/css/bootstrap.css">
<!-- CSS code를 복사해 붙여넣은 PersonInfo, 본인 파일명과 root를 작성해주세요 --!>
<link rel="stylesheet" href="resources/css/PersonInfo.css"> 
<script src="resources/js/bootstrap.js"></script>

7. 결과화면

 

 

오늘은 여기까지입니다.

궁금한점 있으시면 댓글이나 쪽지 부탁드려요 감사합니다.

+ Recent posts