이 글은 부트스트랩을 개인 프로젝트에 적용하기 위해 준비하면서 알게된 내용을 정리하고 저처럼 영어 못하는 분들에게 조금이나마 도움이 되고자 작성한 글입니다.
영어실력이 미천하여 정확하게 번역하지는 못하고 제가 이해한데로 해석하고 번역한 부분이 있습니다. 잘못된 번역으로 오히려 이해에 방해되는 부분이 있을거 같은 부분은 그대로 두었습니다.
잘못된 표현이 있으면 욕하지말고 댓글을 달아주시면 정정하도록 하겠습니다.
출처 : Bootstrap Getting Started
1. 다운로드
: css, js 와 이미지의 컴파일된 미니 버전 다운로드 (문서나 원본 소스는 제외)
문서나 소스를 다운로드 받으시려면 Github project에 방문하세요.
2. 파일 구조
: 다운로드 받은 파일의 압축을 해제하면, 아래의 그림과 같은 파일 구조와 컨텐츠를 확인할 수 있습니다.
위 파일 구조는 부트스트랩의 가장 기본적인 형태입니다.
- bootstrap.* : 컴파일된 css와 js를 제공
- bootstrap.min.* : 컴파일된 최소화한 css와 js를 제공
- 이미지 파일 : ImageOptim(Mac App)를 이용하여 png 파일을 최적화하여 제공
※ 유의사항 : 모든 자바스크립트 플러그인은 jQuery가 포함되야 합니다.
3. 어떤 것들이 포함되어있나
: 부트스트랩은 모든 종류의 것을 위해 HTML, CSS와 JS를 포함하고 있지만, 부트스트랩 홈페이지에 메뉴로 표현되어있는 다음과 같은 카테고리로 요약할 수 있습니다.
문서 섹션
Scaffolding 전체 스타일 설정, 기본 그리드 시스템과 유동적인 그리드 시스템, 레이아웃, 장비(Phone, Tablet, Desktop)의 해상도에 따라 반응하는 디자인
Basic CSS 타이포그라피, 코드, 테이블, 폼과 버튼 같은 일반적인 HTML 엘리먼트에 대한 스타일. 또한 Glyphicons(훌륭한 작은 아이콘 세트)
Components 탭, pills, 메뉴바, 알림, 페이지 헤더, 기타 등등 일반적인 인터페이스 컴포넌트들에 대한 기본 스타일
JavaScript Plugins 컴포너트들과 마찬가지로, 자바스크립트 플러그인 툴팁, popovers, 모달, 기타 등등 에 대한 대화형 컴포넌트들
컴포넌트 목록
컴포넌트와 자바스크립트 플러그인 섹션들은 다음과 같은 인터페이스 엘리먼트들을 제공합니다.
- Button groups
- Button dropdowns
- Navigational tabs, pills, and lists
- Navbar
- Labels
- Badges
- Page headers and hero unit
- Thumbnails
- Alerts
- Progress bars
- Modals
- Dropdowns
- Tooltips
- Popovers
- Accordion
- Carousel
- Typeahead
4. 기본 HTML 템플릿
다음은 일반적인 HTML 소스입니다.
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html><html> <head> <title>Bootstrap 101 Template</title> </head> <body> <h1>Hello, world!</h1> </body></html> |
부트스트랩 템플릿이다. css, js 단 두개의 파일만 적당한 위치에 넣기만 하면 끝. 참 쉬죠잉~~~
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html><html> <head> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <h1>Hello, world!</h1> <script src="js/bootstrap.min.js"></script> </body></html> |
5. 샘플
몇개의 레이아웃 기본 탬플릿들입니다.
| Starter template | Basic marketing site |
| A barebones HTML document with all the Bootstrap CSS and JavaScript included. : 부트스트랩 CSS와 JavaScript를 모두 포함한 가장 기본적인 탬플릿 | Featuring a hero unit for a primary message and three supporting elements. : 간단한 마케팅 또는 정보 웹 사이트 탬플릿으로 기본 메시지를 위한 hero unit과 세개의 지원 엘리먼트로 구성. |
 |  |
| Fluid layout | Narrow marketing |
| Uses our new responsive, fluid grid system to create a seamless liquid layout. : Basic marketing site을 기본으로 유동적으로 레이아웃을 구성하는 탬플릿 | Slim, lightweight marketing template for small projects or teams. : 작은 프로젝트나 팀을 위한 슬림하고 가벼운 마케팅 탬플릿 |
 |  |
| Sign in | Sticky footer |
| Barebones sign in form with custom, larger form controls and a flexible layout. : 대형 폼 컨트롤과 유연한 레이아웃의 사용자 정의 로그인 폼 탬플릿 | Pin a fixed-height footer to the bottom of the user’s viewport. : 하단에 고정된 높이의 footer 탬플릿 |
 |  |
| Carousel jumbotron | |
| A more interactive riff on the basic marketing site featuring a prominent carousel. : 탁월한 카운셀링 기능의 대화형 마케팅 사이트 탬플릿 | |
 |
'개발' 카테고리의 다른 글
| Maven 설치 와 이클립스(Indigo) 플러그인 설치 (0) | 2013.08.07 |
|---|---|
| Bootstrap(부트스트랩) 이란... (0) | 2012.11.18 |
| 내 컴퓨터의 os bit 확인하기 (0) | 2012.11.07 |
