ݺߣ

ݺߣShare a Scribd company logo
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
Thanks!!!

More Related Content

Bootstrap에 대해서 정기철

  • 1. Simplex Internet / 기술연구소 / 정기철
  • 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