Bootstrap에 대해서 정기철

Simplex Internet / 기술연구소 / 정기철

 front-end framework
 Apache License 2.0
 Version 2.2.2(3?)
 3.0.0… Still Working this out…

 Mark Otto, Fat-kun
 Github
 LESS CSS
 Responsive CSS

 Bootstrap utilizes LESS CSS.
 The dynamic stylesheet language.
 Pre-compiling
 Variables
 Mixins
 Nested Rules
 Functions & Operation

 Download
 HTML 작성
js, css 만 연결하면 끝!

 Scaffolding
 Base CSS
 Components
 JavaScript

사이트 자체가 훌륭하고 직관적인
Reference

 HTML5 doctype
 Typography and links – scaffolding.less
 Reset via Normalize
 Layout, Grid system(12 coloums)
.container > .row > .span* &offset*
.container-fluid > .row-fluid
 Nesting columns

 평범한 HTML 요소를 보기 좋게 꾸며줌
 요소에 클래스는 지정해야 함

 웹서비스에서 많이 쓰는
네비게이션, 진행바, 뱃지등의
UI를 제공

 jQuery Plugin형태의
인터렉션이 있는 UI컴포넌트를
제공.
 모달창, 툴팁, 슬라이드쇼 등…

 많은 사이트에서 사용(안정성 검증)
 쉽고, 직관적으로 작성되어 있는 문서
 한 벌의 CSS로 PC, Mobile, Tablet브라우
저까지 지원하는 호환성
 저가의 퀄리티 있는 테마가 많음

 국내에서는 많이 사용하지 않음.
 기본적으로 제공하는 jQuery
Plugin(Javascript) 기능이 미흡
 사이트의 독창성이 떨어질 수 있음
 기본기능은 Mobile, Tablet을 지원하지만
테마를 쓸 경우는 지원되지 않는 경우도 있
음.

 인트라넷, 관리자 페이지
 글로벌 사이트
 Blog 사이트
 개발자들이 Prototyping할때

공식사이트
 공식사이트 http://twitter.github.com/bootstrap/
 공식블로그 http://blog.getbootstrap.com/2012/10/29/bootstrap-2-2-0-released/
 공식 트위터 https://twitter.com/twbootstrap

Theme
 테마 쇼핑몰 https://wrapbootstrap.com/
 무료테마 http://bootswatch.com

Tool
 Snippets 제공(Form Builder도 포함) http://bootsnipp.com/
 Form Builder http://bootstrap-forms.heroku.com/
 인터페이스빌더 https://app.divshot.com/
 버튼 생성기 http://www.plugolabs.com/twitter-bootstrap-button-generator/

기타
 Bootstrap Tour Extension https://github.com/sorich87/bootstrap-tour
 jQuery UI Bootstrap Theme http://addyosmani.github.com/jquery-ui-bootstrap/
 Fbootstrapp(페이스북 UI) https://github.com/ckrack/fbootstrapp

Bootstrap에 대해서 정기철

More Related Content

What's hot (20)

Viewers also liked (9)

Similar to Bootstrap에 대해서 정기철 (20)

Bootstrap에 대해서 정기철