얻기 · 부트스트랩 한국어로

다운로드하기 전에 코드 편집기( Sublime Text 2 권장 )와 HTML 및 CSS에 대한 작업 지식이 있어야 합니다. 여기에서 소스 파일을 살펴보진 않겠지만 다운로드할 수 있습니다. 컴파일된 부트스트랩 파일을 시작하는 데 중점을 둘 것입니다.

컴파일된 다운로드

시작하는 가장 빠른 방법: CSS, JS 및 이미지의 컴파일 및 축소 버전을 가져옵니다. 문서 또는 원본 소스 파일이 없습니다.

부트스트랩 다운로드

소스 다운로드

GitHub에서 직접 최신 버전을 다운로드하여 문서의 로컬 사본과 함께 모든 CSS 및 JavaScript에 대한 원본 파일을 가져옵니다.

부트스트랩 소스 다운로드

다운로드 내에서 공통 자산을 논리적으로 그룹화하고 컴파일된 변형과 축소된 변형을 모두 제공하는 다음 파일 구조와 내용을 찾을 수 있습니다.

다운로드가 완료되면 압축된 폴더의 압축을 풀어 (컴파일된) 부트스트랩의 구조를 확인합니다. 다음과 같은 내용이 표시됩니다.

  부트스트랩 / ├── CSS / │ ├── 부트스트랩 . CSS
   │ ├── 부트스트랩 . 분 _ CSS
   ├── js / │ ├── 부트스트랩 . js
   │ ├── 부트스트랩 . 분 _ js
   └── img / ├── 글리프 콘 - 하플링 . png
       └── 글리프 콘 - 하플링 - 흰색 . png

이것은 부트스트랩의 가장 기본적인 형태입니다. 거의 모든 웹 프로젝트에서 빠르게 사용할 수 있도록 컴파일된 파일입니다. 우리는 컴파일된 CSS 및 JS( bootstrap.*)뿐만 아니라 컴파일 및 축소된 CSS 및 JS( bootstrap.min.*)를 제공합니다. 이미지 파일은 PNG 압축을 위한 Mac 앱인 ImageOptim 을 사용하여 압축됩니다.

모든 JavaScript 플러그인에는 jQuery가 포함되어야 합니다.

Bootstrap에는 모든 종류의 HTML, CSS 및 JS가 포함되어 있지만 Bootstrap 설명서 상단에 보이는 몇 가지 범주로 요약할 수 있습니다 .

문서 섹션

발판

유형 및 배경, 링크 스타일, 그리드 시스템 및 두 가지 단순 레이아웃을 재설정하기 위한 본문의 전역 스타일.

기본 CSS

타이포그래피, 코드, 테이블, 양식 및 버튼과 같은 일반적인 HTML 요소에 대한 스타일입니다. 작은 아이콘 세트인 Glyphicons 도 포함되어 있습니다.

구성품

탭 및 알약, 탐색 모음, 경고, 페이지 헤더 등과 같은 일반적인 인터페이스 구성 요소에 대한 기본 스타일입니다.

자바스크립트 플러그인

구성 요소와 유사하게 이러한 JavaScript 플러그인은 도구 설명, 팝오버, 모달 등과 같은 것에 대한 대화형 구성 요소입니다.

구성 요소 목록

구성 요소 및 JavaScript 플러그인 섹션은 함께 다음 인터페이스 요소를 제공합니다.

버튼 그룹
버튼 드롭다운
탐색 탭, 알약 및 목록
나브바
라벨
배지
페이지 헤더 및 영웅 단위
썸네일
경고
진행률 표시줄
모달
드롭다운
툴팁
팝오버
아코디언
회전 목마
자동 완성

향후 가이드에서 이러한 구성 요소를 개별적으로 더 자세히 살펴볼 수 있습니다. 그 때까지 설명서에서 이러한 각 항목을 활용하고 사용자 지정하는 방법에 대한 정보를 찾으십시오.

내용에 대한 간략한 소개와 함께 우리는 Bootstrap을 사용하는 데 집중할 수 있습니다. 그렇게 하기 위해 우리는 파일 구조 에서 언급한 모든 것을 포함하는 기본 HTML 템플릿을 사용할 것 입니다.

이제 일반적인 HTML 파일 을 살펴보겠습니다 .

<!DOCTYPE HTML>
<html>
  <머리>
    <title> 부트스트랩 101 템플릿 </title>
  </head>
  <본체>
    <h1> 안녕하세요, 여러분! </h1>
    <script src = "https://code.jquery.com/jquery-latest.js" ></script> 
  </바디>
</html>

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

<!DOCTYPE HTML>
<html>
  <머리>
    <title> 부트스트랩 101 템플릿 </title>
    <!-- 부트스트랩 -->
    <link href = "css/bootstrap.min.css" rel = "스타일시트" 미디어 = "화면" >   
  </head>
  <본체>
    <h1> 안녕하세요, 여러분! </h1>
    <script src = "https://code.jquery.com/jquery-latest.js" ></script> 
    <스크립트 src = "js/bootstrap.min.js" ></script> 
  </바디>
</html>