1. Twitter
Bootstrap
2012.01.03, colud UI, 현영배

2. content
• What
• How Come
• Grid system
• Responsive design
• Base CSS
• UI Components & Jquery Plugin
• LESS
• Customize
• Summary

3. Bootstrap

4. What
• 트위터에서 오픈 소스로 공개한 웹 프론트엔드 개발 도구(Toolkit)
• 트위터 UI디자이너 Mark Otto와 개발자 Jacob Thornton 개발
• 오픈소스기반의 HTML3,CSS3,JS 만든 UI프레임워크
3

5. How Come
• 현시점에서 서비스를 수정한다면?
• 멀티브라우저, 멀티 플렛폼 – 시간, 비용 등 발생
4

6. Grid system

7. Grid system
기본 그리드 시스템
레이아웃
6

8. Grid system
• 레이아웃 디자인 기본적 요소
• Div태그와 css를 이용하여 화면을 분할해 요소를 배치
• 12열의 격자 로 이루어져 있고 기본 버전과 유동 버전 등이 있음
• 그 외에도 다양항 CSS 프레임워크이 존재함
7

9. Grid system
기본 그리드 시스템
레이아웃
8

10. Responsive
design

11. Responsive design
반응형웹디자인
10

12. Responsive design
• PC, 태블릿, 스마트폰 등 다양한 해상도에 반응
11

13. Base CSS

14. Base CSS
테이블
클래스 사용법 및 예제
양식
13

15. Base CSS
버튼 샘플 제공
14

16. Base CSS
• 초기엔 IE를 지원하지 않았으나 현재 IE7 이상에서도 호환(IE호환이 아직 취약)
• IE에서 CSS지원 정도에 따라 조금씩 달라 보일 수있으나 레이아웃과 색감 등은 유
지
• 버튼의 경우 UI의 아이콘 이미지는 Glyphicons에서 제공한 아이콘셋을 이용하고
CSS Sprite 기법을 적용하여 성능향상
Glyphicons 아이콘 셋 아이콘 셋 적용된 UI컨포넌트
15

17. UI Components
& Jquery Plugin

18. UI Components & Jquery Plugin
컨포넌트
17

19. UI Components & Jquery Plugin
• UI 컴포넌트 - 패턴을 재사용하기 쉽게 마크업,CSS,JS를 묶어서 제공하는 것
• 부스트랩에는 기본 CSS가 적용 되어 있고 다양한 UI컴포넌트가 존재
• 동적인 인터랙션 필요시 Jquery 플러그인 형태로 컨트롤 가능
 CSS 사용 기본 컴포넌트 목록
 http://twitter.github.com/bootstrap/components.html
 Jquery 플러그인 인터랙션 컨포넌트
 http://twitter.github.com/bootstrap/javascript.html
18

20. LESS

21. LESS
• 탄생 배경 –일반 프로그래밍 언어와 달리 상속이나 변수 개념이 없어 CSS작성과
관리가 번거롭기 때문에 CSS 전처리 도구들이 생김
• CSS 전처리 도구 – 자체적 정의 문법.
변수,상속,연산,함수 등의 기능 가능하며 확장해 작성된 코드를 컴파일해 브라우저
에
호환하는 최종 CSS를 만들어 냄
• 다양한 CSS전처리 도구중 부트스트랩은 LESS를 도구로 사용
20

22. LESS
변수
연산자
21

23. LESS
중첩선택자
중첩선택자 컴파일 결과(클라이언트방식과 서버방식 존재)
22

24. Customize

25. Customize
• 부트스트랩 홈페이지에서 LESS에 적용된 변수 값을 변경하고 사용할 컴포넌트와
Jquery 플러그인을 선택하면 필요한 CSS와 JS만 골라서 다운 받을 수 있음
• 커스터마이징 페이지 이외에 다양한 부트스트랩용 테마 제공 사이트를 활용 할 수
있음
24

26. Summary
• 개발자들이 디자인을 적용하기 어려워서 쉽게 UI만들기 위해 만들어짐
• 크로스브라우징, 반응형웹, 멀티 플렛폼 대응
• 커스터마이징이 상대적으로 쉽고 다양한 예제 및 샘플제공. 각종 테마 존재
• 대부분의 프레임워크가 그렇듯 전혀 다른 커스터마이징은 힘들다. 개발자가 손쉽고
빠르게 디자인 이슈 없이 만들 때 사용하기 좋다.
참고 문헌
http://twitter.github.com/bootstrap/index.html
http://www.slideshare.net/djalmaaraujo/bootstraptwitter
http://rkjun.wordpress.com/2012/02/28/bootstrap -2-0-intro/
http://news.ycombinator.com/item?id=4588053
http://www.alistapart.com/articles/building -twitter-bootstrap/
http://helloworld.naver.com/helloworld/67876
https://github.com/twitter/bootstrap/tree/eb81782cdbdc68aaebe4fa561b5fbb73ef866611
25

27. Thanks