Bootstrap 4 / 사용하는 방법
필요한 파일
Bootstrap을 사용하기 위해 필요한 파일은 bootstrap.css, jquery.js, popper.js, bootstrap.js입니다.
- bootstrap.css : Bootstrap의 CSS 파일입니다.
- jquery.js, popper.js : bootstrap.js를 사용하기 위해 필요합니다.
- bootstrap.js : Bootstrap의 JS 파일입니다.
이 파일들을 CDN에서 불러올 수도 있고, 다운로드 받아 사용할 수도 있습니다.
CDN 이용하기
다음은 CDN을 이용한 HTML 문서입니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Bootstrap 4</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> </head> <body> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> </body> </html>
- viewport는 반응형 웹디자인을 위한 코드입니다. 이 코드가 없으면 모바일기기로 접속할 때 문제가 발생합니다.(참고 : 모바일 화면을 위해 Viewport 사용하기)
- 4.1.1 같은 숫자는 해당 파일의 버전입니다. 원하는 버전으로 바꿔서 사용하세요.
- 파일 이름에 있는 min은 축소했다는 뜻입니다.
- link와 script 요소의 integrity, crossorigin은 보안을 위한 속성입니다. 속성을 삭제해도 작동합니다.
다음은 Bootstrap이 제대로 적용되었는지 확인할 수 있는 HTML 문서입니다. Lorem, Ipsum, Dolor 세 개의 단어가 가로로 나와야 하고, Dolor에 마우스를 올리거나 탭하면 툴팁이 나와야 합니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Bootstrap 4</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <div class="col-4"> <h1>Lorem</h1> </div> <div class="col-4"> <h1>Ipsum</h1> </div> <div class="col-4"> <h1 data-toggle="tooltip" data-placement="bottom" title="Tooltip">Dolor</h1> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> <script> $( function () { $('[data-toggle="tooltip"]').tooltip() } ); </script> </body> </html>
다운로드해서 사용하기
여기에서 Bootstrap을 다운로드하고 압축을 푼 후, css와 js 폴더를 서버에 업로드합니다. Compiled CSS and JS를 다운로드했다면 두 폴더가 바로 보일 것이고, Source files를 다운로드했다면 dist 폴더 안에 있습니다.
그리고 HTML 문서에서 CSS와 JS를 연결시킵니다. 만약 서버에 다음과 같은 구조로 폴더와 파일이 있다면
/css /js a.html
a.html은 다음과 같이 만듭니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Bootstrap 4</title> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-4"> <h1>Lorem</h1> </div> <div class="col-4"> <h1>Ipsum</h1> </div> <div class="col-4"> <h1 data-toggle="tooltip" data-placement="bottom" title="Tooltip">Dolor</h1> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="js/bootstrap.min.js"></script> <script> $( function () { $('[data-toggle="tooltip"]').tooltip() } ); </script> </body> </html>
주의할 점
CDN을 이용하는 게 다운로드하여 사용하는 것보다 여러모로 편하지만, CDN에 문제 발생했을 때 사이트에도 영향을 미친다는 단점이 있습니다. 또한 서버의 속도보다 CDN 속도가 느릴 수도 있습니다.