English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
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의 컴파일된 버전을 다운로드하고 압축을 풀면, 다음과 같은 파일을 볼 수 있습니다:/디렉토리 구조:
위 그림을 보면, 컴파일된 CSS와 JS(bootstrap.*)。 또한, 컴파일된 압축된 CSS와 JS(bootstrap.min.*)。 또한 Glyphicons 폰트도 포함되어 있으며, 이는 선택적인 Bootstrap 테마입니다。
Bootstrap 소스 코드를 다운로드한 경우, 파일 구조는 다음과 같습니다:
less/、js/ 와 fonts/ 하위 파일은 Bootstrap CSS, JS, 그리고 아이콘 폰트의 소스 코드입니다。
dist/ 폴더에는 위에 예제로 다운로드한 파일과 폴더가 포함되어 있습니다。
docs-assets/、examples/ 그리고 모든 *.html 파일은 Bootstrap 문서입니다。
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에 있는 라이브러리를 추천합니다:
<!-- 최신 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/