English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap 환경 설정

Bootstrap 설치는 매우 쉽습니다. 이 장은 Bootstrap를 다운로드하고 설치하는 방법, Bootstrap 파일 구조를 논의하고, 예제를 통해 사용법을 설명합니다.

Bootstrap를 다운로드하세요

에서 Bootstrap를 다운로드할 수 있습니다。 https://getbootstrap.com/docs/3.4/ 에서 Bootstrap의 최신 버전을 다운로드할 수 있습니다. 이 링크를 클릭하면 다음과 같은 웹 페이지를 볼 수 있습니다:

"Download Bootstrap" 링크를 클릭하여 다음 페이지로 이동합니다:


두 가지 버튼을 볼 수 있습니다:

  • Download Bootstrap소스 코드 다운로드

  • Download Source소스 코드 다운로드

Bootstrap의 비컴파일된 소스 코드를 사용하는 경우, LESS 파일을 컴파일하여 재사용 가능한 CSS 파일을 생성해야 합니다. Bootstrap 공식 웹사이트에서 LESS 파일을 컴파일하는 데 지원하는 것은 다음과 같습니다: Recess,이는 Twitter의 less.js 의 CSS 튜토리얼을 참고하세요。

좋은 이해와 쉬운 사용을 위해, 이 튜토리얼에서는 Bootstrap의 예제로 컴파일된 버전을 사용하겠습니다。

파일이 컴파일되고 압축되었기 때문에, 독립적인 기능 개발에서는 항상 이 독립적인 파일을 포함할 필요가 없습니다。

이 튜토리얼을 작성할 때는 최신 버전(Bootstrap 3)。

파일 구조

예제로 컴파일된 Bootstrap

Bootstrap의 컴파일된 버전을 다운로드하고 압축을 풀면, 다음과 같은 파일을 볼 수 있습니다:/디렉토리 구조:

위 그림을 보면, 컴파일된 CSS와 JS(bootstrap.*)。 또한, 컴파일된 압축된 CSS와 JS(bootstrap.min.*)。 또한 Glyphicons 폰트도 포함되어 있으며, 이는 선택적인 Bootstrap 테마입니다。

Bootstrap 소스 코드

Bootstrap 소스 코드를 다운로드한 경우, 파일 구조는 다음과 같습니다:

  • less/js/fonts/ 하위 파일은 Bootstrap CSS, JS, 그리고 아이콘 폰트의 소스 코드입니다。

  • dist/ 폴더에는 위에 예제로 다운로드한 파일과 폴더가 포함되어 있습니다。

  • docs-assets/examples/ 그리고 모든 *.html 파일은 Bootstrap 문서입니다。

HTML 템플릿

Bootstrap를 사용한 기본적인 HTML 템플릿은 다음과 같습니다:

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 템플릿</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- Bootstrap를 포함 -->
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
      <!-- HTML5 Shiv와 Respond.js는 IE를 통해8 HTML5요소와 미디어 쿼리를 지원 -->
      <!-- 주의: file://  Respond.js 파일을 포함하지 않으면 효과가 없습니다 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <-->
   </<![endif]
   <head>
      <h1>Hello, world!</h1>
 
      <!-- <body> -->
      <script src="https://jQuery (Bootstrap의 JavaScript 플러그인을 포함해야 합니다)</code.jquery.com/script>
      <!-- 모든 컴파일된 플러그인을 포함 -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

여기서, 포함된 것을 볼 수 있습니다 jquery.jsbootstrap.min.jsbootstrap.min.css 파일, 일반 HTML 파일을 Bootstrap를 사용하는 템플릿으로 만들기 위해 사용됩니다.

위 코드 섹션에 있는 각 요소의 세부 사항은 Bootstrap CSS 개요 챕터 상세 설명。

온라인 예제

지금让我们尝试使用Bootstrap输出"Hello, world!":

 <h1>Hello, world!</h1>

Staticfile CDN 추천

국내에서는 Staticfile CDN에 있는 라이브러리를 추천합니다:

<!-- 최신 Bootstrap 핵심 CSS 파일 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
<!-- jQuery 파일. 반드시 bootstrap.min.js 이전에 포함해야 합니다 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 최신 Bootstrap 핵심 JavaScript 파일 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

또한, 다음 CDN 서비스를 사용할 수 있습니다: