부트스트랩 : 소개와 다운로드

bootstrap : Page 0-1 부트스트랩 0-1번째

부트스트랩은 웹디자인을 쉽게하기 위해 미리 몇가지의 CSS의 클래스 선택자와 정의된 스타일시트, 자바스크립트 플러그인을 모은 강력한 프론트엔드 프레임워크입니다. html로 웹페이지의 뼈대를 만들고 스타일시트에서 레이아웃을 만들기 위한 CSS의 속성과 값을 입력하는 대신 미리 정의된 클래스 선택자를 html 코드에 삽입만 하면 레이아웃과 각종 요소가 만들어질수 있게 미리 모든 요소에 대해서 정의를 해놓았기 때문에 손쉽게 웹사이트를 만들 수 있는 플랫폼으로 큰 인기를 얻고 있습니다.

---

참고로 이블로그 게시물은 한글부트스트랩3을 참고로 만들어 졌으며 제 블로그 공부용으로 작성한 것입니다.

---

 

 

응답형 웹의 모바일 최초의 프로젝트 개발을 위한 가장 인기있는 프런트 엔드 프레임 워크입니다. 라는 발 변역으로 해석이 되겠네요. 이 처럼 조금 오래되고 많은 사용자와 개발자들이 아직도 개발중으로 많은 버전업을 이루어 지고 있는 오픈 프로젝트로 누구나 쉽게 다운로드 할수 있고 웹페이지도 쉽게 만들수 있게 되어 있습니다. 물론 이 블로그 역시 이 '부트스트랩'을 주 뼈대로 만들어 졌습니다.

 

시작하기

부트스트랩을 빠르게 시작하는 몇가지 방법이 있습니다. 그중 몇가지 방법이 있지만 제가 해온 또는 저처럼 초보도 쉽게 구현하는 방법으로 하겠습니다.

 

 최소화한 소스

최소화한 소스는 CSS, 자바 스크립트, 글꼴외에 문서나 원본 소스파일은 포함되지 않았습니다.

 

v3.1.1

GitHub 에서다운 받기

v3.1.1 Minified

 GitHub 란?

오픈소스 코드 저장소입니다. 개발자가 아니라면 그냥 지나치셔도 좋습니다.

 

파일 구조

최소화된 부트스트랩 Compiled and minified Bootstrap

최소화한 소스 다운로드하고, 압축을 해제하면 다음과 같은 부트스트랩 구조를 볼 수 있습니다.

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

이것은 부트스트랩이 어느 웹프로젝트에도 쉽게 적용하기 위한 가장 기본적인 형태입니다. 만약 사이트에서 최소로 사용한다면 위 파일중에서 *.min.css 와 *.min.js 만 로드하고 font를 로드하면 됩니다.

 

전체 부트 스트랩 소스 Bootstrap source

부트 스트랩 소스 코드 다운로드에는 미리 컴파일 된 CSS, 자바 스크립트, 글꼴, 소스등, 자바 스크립트와 함께 설명서가 포함되어 있습니다. 보다 구체적으로는 다음과 같습니다.

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

위의 소스는 less/, js/, font/소스외에 CSS,JS, 아이콘 폰트등의 소스들이 있습니다.docs/촐더 안에는 미리 컴파일된 소스들이 있어 예제를 보면서 연습 할수도 있습니다.

 jQuery 가 필요합니다.

부트스트랩 소스는 CSS, 자바 스크립트, 글꼴외에 문서나 원본 소스파일은 먼저 jQuery를 실행 되어야 합니다. 최신의 jQuery버전 중 최소 버전이 어느정도인지 알기 위하여 bower.json를 참조하십시오.

 

부트스트랩 CDN Bootstrap CDN

NetDNA에서 부트스트랩의 CSS 와 자바스크립트를 CDN 으로 지원합니다. 이를 사용하려면, 아래의 부트스트랩 CDN 링크들을 사용하세요.

 

<!-- 합쳐지고 최소화된 최신 CSS -->  
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">    

<!-- 합쳐지고 최소화된 옵션 테마 -->  
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">    

<!-- 합쳐지고 최소화된 최신 자바스크립트 --> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Bootstrap CDN에서는 링크도 제공하지만 웹폰트인 Font Awesome, 테마인 Bootswatch, 이전 버젼인 Legacy 도 있습니다.

 

또한 부트스트랩은 less를 지원합니다. 부트트스랩에서 다운로드 받으면 각각의 모듈마다 less 파일이 나뉘어져 있습니다. 그 사용법은 less 홈페이지를 통해 볼수있습니다.

 

Thanks to

• 부트스트랩3 한글 번역페이지
• Bootstrap

• 기본 템플릿과 부가 사항 →