Bootstrap에 대해서 정기철

1,493 views

Published on

Bootstrap research

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,493
On SlideShare
0
From Embeds
0
Number of Embeds
105
Actions
Shares
0
Downloads
17
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Bootstrap에 대해서 정기철

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

×