Mais conteúdo relacionado
Semelhante a Bootstrap에 대해서 정기철 (20)
Bootstrap에 대해서 정기철
- 2. front-end framework
Apache License 2.0
Version 2.2.2(3?)
3.0.0… Still Working this out…
- 3. Mark Otto, Fat-kun
Github
LESS CSS
Responsive CSS
- 4. Bootstrap utilizes LESS CSS.
The dynamic stylesheet language.
Pre-compiling
Variables
Mixins
Nested Rules
Functions & Operation
- 5. Download
HTML 작성
js, css 만 연결하면 끝!
- 6. Scaffolding
Base CSS
Components
JavaScript
사이트 자체가 훌륭하고 직관적인
Reference
- 7. 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
- 8. 평범한 HTML 요소를 보기 좋게 꾸며줌
요소에 클래스는 지정해야 함
- 9. 웹서비스에서 많이 쓰는
네비게이션, 진행바, 뱃지등의
UI를 제공
- 10. jQuery Plugin형태의
인터렉션이 있는 UI컴포넌트를
제공.
모달창, 툴팁, 슬라이드쇼 등…
- 11. 많은 사이트에서 사용(안정성 검증)
쉽고, 직관적으로 작성되어 있는 문서
한 벌의 CSS로 PC, Mobile, Tablet브라우
저까지 지원하는 호환성
저가의 퀄리티 있는 테마가 많음
- 12. 국내에서는 많이 사용하지 않음.
기본적으로 제공하는 jQuery
Plugin(Javascript) 기능이 미흡
사이트의 독창성이 떨어질 수 있음
기본기능은 Mobile, Tablet을 지원하지만
테마를 쓸 경우는 지원되지 않는 경우도 있
음.
- 13. 인트라넷, 관리자 페이지
글로벌 사이트
Blog 사이트
개발자들이 Prototyping할때
- 14. 공식사이트
공식사이트 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