Bootstrap 기본 튜토리얼

Bootstrap 플러그인

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.js、bootstrap.min.js 와 bootstrap.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 서비스를 사용할 수 있습니다:

국제 추천 사용:https://cdnjs.com/

Bootstrap CSS 소개 Bootstrap 입문