Bootstrap 살펴보기

2012.01.03, colud UI, 현영배

TwitterBoot-strap

• What

• How Come

• Grid system

• Responsive design

• Base CSS

• UI Components & Jquery Plugin

• LESS

• Customize

• Summary

content

Bootstrap

• 트위터에서 오픈 소스로 공개한 웹 프론트엔드 개발 도구 (Toolkit)

• 트위터 UI 디자이너 Mark Otto 와 개발자 Jacob Thornton 개발

• 오픈소스기반의 HTML3,CSS3,JS 만든 UI 프레임워크

What

4

• 현시점에서 서비스를 수정한다면 ?

• 멀티브라우저 , 멀티 플렛폼 – 시간 , 비용 등 발생

How Come

5

Grid system

Grid system

기본 그리드 시스템

레이아웃

7

• 레이아웃 디자인 기본적 요소

• Div 태그와 css 를 이용하여 화면을 분할해 요소를 배치

• 12 열의 격자로 이루어져 있고 기본 버전과 유동 버전 등이 있음

• 그 외에도 다양항 CSS 프레임워크이 존재함

Grid system

8

Grid system

기본 그리드 시스템

레이아웃

9

Responsive design

Responsive design

반응형웹디자인

11

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

Responsive design

12

Base CSS

Base CSS

14

테이블

클래스 사용법 및 예제

양식

Base CSS

15

버튼 샘플 제공

• 초기엔 IE 를 지원하지 않았으나 현재 IE7 이상에서도 호환 (IE 호환이 아직

취약 )

• IE 에서 CSS 지원 정도에 따라 조금씩 달라 보일 수있으나 레이아웃과 색감 등은

유지

• 버튼의 경우 UI 의 아이콘 이미지는 Glyphicons 에서 제공한 아이콘셋을

이용하고 CSS Sprite 기법을 적용하여 성능향상

Base CSS

16

Glyphicons 아이콘 셋 아이콘 셋 적용된 UI 컨포넌트

UI Compo-nents & Jquery Plugin

UI Components & Jquery Plugin

18

컨포넌트

• UI 컴포넌트 - 패턴을 재사용하기 쉽게 마크업 ,CSS,JS 를 묶어서 제공하는 것

• 부스트랩에는 기본 CSS 가 적용 되어 있고 다양한 UI 컴포넌트가 존재

• 동적인 인터랙션 필요시 Jquery 플러그인 형태로 컨트롤 가능

UI Components & Jquery Plugin

19

CSS 사용 기본 컴포넌트 목록

http: / / twi t ter.g i thub.com/bootstrap/components.html 

Jquery 플러그인 인터랙션 컨포넌트

http: / / twi t ter.g i thub.com/bootstrap/ javascr ipt .html

LESS

• 탄생 배경 –일반 프로그래밍 언어와 달리 상속이나 변수 개념이 없어 CSS 작성과

관리가 번거롭기 때문에 CSS 전처리 도구들이 생김

• CSS 전처리 도구 – 자체적 정의 문법 .

변수 , 상속 , 연산 , 함수 등의 기능 가능하며 확장해 작성된 코드를 컴파일해

브라우저에

호환하는 최종 CSS 를 만들어 냄

• 다양한 CSS 전처리 도구중 부트스트랩은 LESS 를 도구로 사용

LESS

21

LESS

22

변수

연산자

LESS

23

중첩선택자

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

Customize

• 부트스트랩 홈페이지에서 LESS 에 적용된 변수 값을 변경하고 사용할

컴포넌트와 Jquery 플러그인을 선택하면 필요한 CSS 와 JS 만 골라서 다운

받을 수 있음

• 커스터마이징 페이지 이외에 다양한 부트스트랩용 테마 제공 사이트를 활용 할

수있음

Customize

25

• 개발자들이 디자인을 적용하기 어려워서 쉽게 UI 만들기 위해 만들어짐

• 크로스브라우징 , 반응형웹 , 멀티 플렛폼 대응

• 커스터마이징이 상대적으로 쉽고 다양한 예제 및 샘플제공 . 각종 테마 존재

• 대부분의 프레임워크가 그렇듯 전혀 다른 커스터마이징은 힘들다 . 개발자가

손쉽고 빠르게 디자인 이슈 없이 만들 때 사용하기 좋다 .

Summary

26

참고 문헌http: / / twi t ter.g i thub.com/bootstrap/ index.htmlhttp: / /www.s l ideshare.net/d ja lmaaraujo/bootstraptwitterhttp: / / rk jun.wordpress.com/2012/02/28/bootstrap-2-0- intro/http: / /news.ycombinator.com/ i tem?id=4588053http: / /www.al is tapart .com/art ic les/bui ld ing-twit ter-bootstrap/http: / /he l lowor ld.naver.com/hel lowor ld/67876https: / /g i thub.com/twi tter /bootstrap/ tree/eb81782cdbdc68aaebe4fa561b5fbb73ef866611

Thanks