Bootstrap 3.3.7 | Bootstrap 기본 | CDN 사용 및 Compile, Bower


이제 기본적인 코드는 알았다. 로컬 환경에 파일을 두지 않고, CDN을 이용하는 방법을 설명한다.

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

아래에 CDN 이용의 경우 기본 코드를 올려 두었다. 또한, 여기에서는 Bootstrap 3.3.7 기반에서 사용하는 경우를 전제로 설명하고 있다. 최신 버전이 있다면 변경하면 된다.

<!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</title>
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    crossorigin="anonymous">
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
    crossorigin="anonymous">
 
</head>
<body >
     
<div class="container">
     
    <h1>Hello, world!</h1>
    <p>This is Bootstrap sample page!</p>
 
</div>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
    crossorigin="anonymous"></script-->
     
</body>
</html>

CDN은 여기에서 두 가지 서비스를 이용하고 있다. 아래에 같이 정리된다.

bootstrapcdn.com
이것은 Bootstrap가 제공하는 CDN이다. 2개의 스타일 시트와 Bootstrap 본체는 여기에서 로드 하도록 되어 있다.

Google Ajax API
jQuery 만은 ajax.googleapis.com라는 서버를 사용하고 있지만, 여기서는 Google이 제공하는 CDN 서비스를 이용하고 있다. jQuery에 게제된 CDN도 좋지만, Google Ajax API 라이브러리는 매우 안정적으로 사용할 수 있으므로 편리하다. Bootstrap의 샘플에서도 이를 사용하고 있기 때문에, 거기에 맞게 되어 있다.

기본적으로 <link>와 <script> 파일의 접근하는 곳이 바뀌어 있을 뿐, 그 이외는 동일하다. CDN 사용은 만일 CDN 서버에 문제가 있거나 하면 페이지 액세스가 매우 늦어지거나 하지만, 파일 관리 및 유지 보수가 쉬워진다. 버전 업도 링크 버전 번호를 갱신만하면 되기 때문이다.

그밖에

Compile하여 사용하기

Less, Javascript, Font 들이 묶인 파일을 다운 받습니다. Less를 위해서는 Less 컴파일러와 몇 가지 설정이 필요하다.

https://github.com/twbs/bootstrap/archive/v3.3.7.zip

Bower를 통해서 Bootstrap을 설치

$ bower install bootstrap

 

Bootstrap은 설치를 위한 다양한 방법을 제공하고 있으면 각 방법들은 난이도와 용도의 차이가 있고, 모두 장단 점이 있다. 자신이 원하는 형태에 따라 설치하면 된다. 특정 방법으로 하지 않으면 문제가 생기거나 하는 것은 없다.