Main menu

Bootstrap 3 강좌 | 시작하기

Bootstrap을 사용하는 방법은 두 가지가 있습니다.

  • 서버에 업로드하여 사용하기
  • CDN 이용하기

서버에 업로드하여 사용하기

다운로드

다음 링크에서 Boostrap을 다운로드 받습니다.

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

세 개의 다운로드 링크가 있는데, Less나 Sass로 다시 컴파일할 게 아니라면 첫번째 다운로드 버튼으로 다운로드 받으면 됩니다.

업로드

다운로드 받은 파일의 구성은 다음과 같습니다.

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

css, js, fonts 폴더를 서버에 업로드합니다. (빨간색으로 표시하지 않은 파일은 업로드 하지 않아도 됩니다.)

Bootstrap 사용하기

HTML 문서에 몇 줄의 코드만 추가하면 Bootstrap을 사용할 수 있습니다.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

IE로 접속했을 때 IE 최신 표준 모드로 렌더링하라는 뜻입니다. 

<meta name="viewport" content="width=device-width, initial-scale=1">

반응형으로 디자인하기 위해 viewport 설정을 합니다.

<link rel="stylesheet" href="css/bootstrap.min.css">

bootstrap.css를 연결합니다. bootstrap.min.css는 bootstrap.css를 축소(minify)한 것입니다. 경로는 적절히 수정합니다.

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

IE 9 미만 버전으로 접속했을 때 HTML5와 Media Query 지원을 위해 스크립트를 연결합니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Bootstrap의 스크립트는 jQuery를 이용하므로 jQuery를 연결합니다. (1.11.3는 jQuery 버전입니다. 최신 버전으로 변경하세요.)

<script src="js/bootstrap.min.js"></script>

bootstrap.js를 연결합니다. bootstrap.min.js는 bootstrap.js를 축소(minify)한 것입니다. 경로는 적절히 수정합니다.

위 코드들을 포함한 HTML 문서 구조는 다음과 같습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap | Get Started</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

예제

다음은 제대로 Bootstrap이 적용되는지 확인할 수 있는 간단한 HTML 문서입니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap | Get Started</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <div class="jumbotron">
            <h1><span class="glyphicon glyphicon-thumbs-up"></span> Hello, world!</h1>
            <p>Lorem Ipsum Dolor</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Learn more</a></p>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
      $( function () {
        $( '[data-toggle="tooltip"]' ).tooltip();
      } );
    </script>
  </body>
</html>

다음과 같은 모양이 되어야 하며, Learn more에 마우스를 올렸을 때 Tooltip on bottom이라는 메시지가 나와야 합니다.

CDN 이용하기

Bootstrap을 다운로드 받고 업로드하는 게 번거롭거나, 트래픽을 절약하고 싶다면 CDN을 이용해서 Bootstrap을 사용할 수 있습니다.

bootstrap.min.css와 bootstrap.min.js의 경로만 바꿔주면 됩니다. (3.3.5는 Bootstrap 버전입니다. 최신 버전으로 변경하세요.)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

단, 이렇게 했을 경우 Respond.js가 제대로 작동하지 않아 IE 8 이하에서 문제가 발생할 수 있습니다. 이를 해결하는 방법은

https://github.com/scottjehl/Respond

의 CDN/X-Domain Setup에 있습니다.

Category

Created on 2015-10-15 | Updated on 2017-04-26

이 글을 공유하기

Kakao