시작

프로젝트의 개괄, 내용, 그리고 간단한 템플릿으로 시작하는 방법.

내려받기 전에, 코드 에디터를 꼭 준비하세요 (Sublime Text 2를 추천 합니다). 그리고 HTML과 CSS에 대한 지식이 있어야 합니다. 소스 파일에 대해서는 여기서 다루지 않습니다. 하지만 내려받기가 가능합니다. 컴파일 된 부트스트랩 파일로 시작하는 것에 촛점이 맞춰져 있습니다.

컴파일된 파일 내려받기

시작하는 가장 빠른 방법: CSS, JS, 이미지의 컴파일되고 축소된 버전으로 시작합니다. 문서나 오리지널 소스 파일은 제외됐습니다.

부트스트랩 내려받기

소스 내려받기

모든 CSS와 자바스크립트 오리지널 파일로 시작합니다. GitHub에서 바로 최신 버전을 내려받으면 도움말 문서가 포함됩니다.

부트스트랩 소스 내려받기

내려받으면 다음의 구조와 내용을 찾을 수 있습니다. 공통된 자료는 논리적으로 그룹화 됐고 컴파일된 것과, 축소된 버전이 동시에 제공됩니다.

내려받은 후 압축파일을 풀고 (컴파일된) 부트스트랩의 구조를 확인하세요. 다음과 같은 것을 알 수 있습니다:

  bootstrap/
  ├── css/
  │   ├── bootstrap.css
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.js
  │   ├── bootstrap.min.js
  ├── img/
  │   ├── glyphicons-halflings.png
  │   ├── glyphicons-halflings-white.png
  └── README.md

이것은 부트스트랩의 가장 기본적인 형태입니다: 거의 어떤 웹 프로젝트라도 빠르게 설치하고 사용할 수 있는 컴파일된 파일입니다. 컴파일된 CSS와 JS가 제공됩니다. (bootstrap.*), 컴파일되고 축소된 CSS와 JS 파일도 포함됩니다. (bootstrap.min.*). 이미지 파일은 ImageOptim를 사용하여 압축됐습니다. 맥 앱(Mac App)은 압축 PNGs를 사용합니다.

부트스트랩은 모든 종류의 디자인을 위해 HTML, CSS, JS가 내장돼 있습니다. 부트스트랩 문서의 상단에 몇개의 카테고리로 요약돼 있은 것을 볼 수 있습니다.

문서 섹션(Docs sections)

구조

형태와 배경을 리셋하기 위한 body의 전체 스타일, 링크 스타일, 그리드 시스템, 그리고 두개의 간단한 레이아웃.

기본 CSS

글자, 코드, 테이블, 폼, 버튼과 같은 공통 HTML 요소에 대한 스타일. 훌륭한 아이콘 세트인 글리피콘(Glyphicons)을 포함합니다.

구성 요소

탭, 필(pills), 냅바(navbar), 경고 메시지(alerts), 페이지 헤더와 같은 공통 인터페이스 구성요소의 기본 스타일, 그리고 더 많은 것이 있습니다.

자바스크립트 플러그인

구성요소와 비슷하지만 이 자바스트립트 플러그인은 툴팁, 팝오버(popovers), 모달(modals)과 같은 상호 작용하는 구성요소가 있으며, 다른 여러가지가 있습니다.

구성요소 목록

또한, 구성요소자바스트립트 플러그인 은 다음의 인터페이스 요소를 제공합니다:

  • 버튼 그룹
  • 버튼 드랍다운
  • 내비게이션 탭, 필(pills), 목록
  • 냅바(Navbar)
  • 레이블(Labels)
  • 뱃지(Badges)
  • 페이지 헤더,히어로 유닛(hero unit)
  • 썸네일
  • 경고 메시지(Alerts)
  • 프로그레스 바(Progress bars)
  • 모달(Modals)
  • 드랍다운
  • 툴팁
  • 팝오버(Popovers)
  • 어코디언(Accordion)
  • 캐러젤(Carousel)
  • 타입헤드(Typeahead)

나중 가이드에서 이들 각 구성 요소에 대해서 개별적으로 상세히 다루겠습니다. 그 전에 각 문서에서 사용하는 방법과 사용자 정의 하는 방법에 대한 정보를 둘러보세요.

With a brief intro into the contents out of the way, we can focus putting Bootstrap to use. 그러기 위해서, 파일구조에서 이야기한 모든 것을 포함하는 기본 HTML 템플릿을 이용할 것입니다.

자 여기 전형적인 HTML 파일을 보세요:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  </body>
</html>

이것을 부트스트랩 템플릿으로 만들려면, 적절한 CSS와 JS파일을 포함 시키기만 하면 됩니다:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

자 이제 됐습니다! 두개의 파일을 추가하고, 당신은 이제 부트스트랩으로 어떤 사이트나 애플리캐이션 개발을 시작할 수 있습니다.

기본 템플릿을 벗어나 몇 개의 예제 레이아웃을 보겠습니다. We encourage folks to iterate on these examples and not simply use them as an end result.

  • 기본 마케팅 사이트

    주요 메시지와 세개의 지원 요소가 있는 히어로 유닛을 특징적으로 사용합니다.

  • 유동 레이아웃

    흠없는 유동 레이아웃을 만들기 위해 유동 그리드 시스템인 새로운 반응형 디자인을 사용합니다.

  • 시작용 템플릿

    모든 부트스트랩 CSS와 자바스크립트가 포함된 기본 구조 HTML 문서입니다.

정보, 예제, 코드 스니핏이 있는 문서로 갑니다. 또는 단계를 뛰어넘어 부트스트랩을 어떤 후보 프로젝트에 적용하기 위해 사용자 정의하러 갑니다.

부트스트랩 문서 방문하기 부트스트랩 사용자 정의하기