Twitter Bootstrap for web UI development

3,561 views

Published on

I introduce to Twitter Bootstrap (Web UI framework) and many tools they are integrated with Bootstrap. This presentation I present for my office's team but I think other person can get benefits with this. I just uploaded.

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,561
On SlideShare
0
From Embeds
0
Number of Embeds
279
Actions
Shares
0
Downloads
73
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Twitter Bootstrap for web UI development

  1. 1. SWT Tech shareTwitter Bootstrap for web UI development @khasathan 17/10/2012
  2. 2. Web UI anatomy HTML CSS Java script 2
  3. 3. Problems Problem Im Programmer 3
  4. 4. Problems● ออกแบบเอง กาก!● CSS layout คือยาขม Im Programmer● ทำาเองใหม่หมดเสีย เวลา 4
  5. 5. Problems● เขียนโปรแกรมไม่เป็น● CSS Reuse code ยาก Im Designer● ทำาเองใหม่หมดเสีย เวลา 5
  6. 6. Problems Problem Im Programmer 6
  7. 7. Problems Im Programmer 7
  8. 8. http://twitter.github.com/bootstrap 8
  9. 9. B Twitter Bootstrap● Open source! Developed by @mdo, @fat used for Twitter Inc.● Update (29 Sep, 2012) @mdo, @fat leaving Twitter Inc. 9
  10. 10. But... still support Bootstrap :) 10
  11. 11. B Twitter Bootstrap● Combine with HTML + Javascript → for programmer CSS + Image + Icon → for designer 11
  12. 12. Why we use Bootstrap?● Easy and clean code● Cross-Browsers● Responsive 12
  13. 13. Easy and clean code 13
  14. 14. Cross-Browsers http://www.webdesignhot.com/wp-content/uploads/2010/06/IEChromeFirefoxSafariOperaLogoVector.jpg 14
  15. 15. Responsive ● อุปกรณ์เข้าถึง internet หลากหลายขึ้น ● ขนาดหน้าจอแสดงผลต่าง กัน 15
  16. 16. Responsive● การทำาเว็บให้แสดงผลเหมาะสมกับอุปกรณ์ทเี่ ข้า ถึงเว็บ 16
  17. 17. Full page 17
  18. 18. resized page 18
  19. 19. Whats included● Layout● Base CSS● Components● Javascript plugins 19
  20. 20. How to use Bootstrap?● Only 3 steps ● Customize and download ● Link in HTML file ● Coding 20
  21. 21. 1. Custom and download 21
  22. 22. 2. Link in HTML file 22
  23. 23. 3. Code what you want 23
  24. 24. Finished! 24
  25. 25. Power up! Bootstrap● Font Awesome● Jetstrap● Jquery UI with Bootstrap theme● Bootswatch● Boottheme 25
  26. 26. Font Awesome● Font-face icon based-on Bootstrap● Available for modern browsers● Support IE7 :) 26
  27. 27. Font Awesome features URL: http://fortawesome.github.com/Font-Awesome 27
  28. 28. Jetstrap● WYSIWYG (What You See Is What You Get)● Drag and Drop● 100% web-based!● Lets try http://jetstrap.com 28
  29. 29. JQuery UI with Bootstrap theme● Integrate Jquery UI with Bootstrap 29
  30. 30. Bootswatch● Free download custom theme for Bootstrap 30
  31. 31. Boottheme● Customize, theme generator for Bootstrap 31
  32. 32. Resources● Jetstrap - http://jetstrap.com● Twitter Bootstrap - http://twitter.github.com/bootstrap● JQuery UI Bootstrap- http://addyosmani.github.com/jquery-ui-bootstrap● W3School - http://www.w3resource.com/twitter-bootstrap/tutorial.php● Bootsnipp - http://bootsnipp.com ← Cool!● Bootswatch - http://bootswatch.com● Boottheme - http://www.boottheme.com 32
  33. 33. Q&A 33

×