Twitter Bootstrap for web UI development
2 likes2,746 views
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.
Twitter Bootstrap for web UI development
- 1. SWT Tech share Twitter Bootstrap for web UI development @khasathan 17/10/2012
- 2. Web UI anatomy HTML CSS Java script 2
- 3. Problems Problem I'm Programmer 3
- 4. Problems 犖犖犖犢犖犖犢犖犖 犖犖迦! CSS layout 犖犖劇賢犖∇顕犖犖 I'm Programmer 犖犖橿顕犢犖犖犢犖犖÷犖犖÷犢犖犖朽権 犢犖о献犖 4
- 5. Problems 犢犖犖朽権犖犢犖犖犢犖犖犖÷犖÷犢犖犢犖 CSS Reuse code 犖∇顕犖 I'm Designer 犖犖橿顕犢犖犖犢犖犖÷犖犖÷犢犖犖朽権 犢犖о献犖 5
- 6. Problems Problem I'm Programmer 6
- 7. Problems I'm Programmer 7
- 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. But... still support Bootstrap :) 10
- 11. B Twitter Bootstrap Combine with HTML + Javascript for programmer CSS + Image + Icon for designer 11
- 12. Why we use Bootstrap? Easy and clean code Cross-Browsers Responsive 12
- 13. Easy and clean code 13
- 15. Responsive 犖犖伍犖犖犖犢犢犖犢犖迦犖謹 internet 犖犖ム顕犖犖犖ム顕犖∇犖謹犖 犖犖犖迦犖犖犢犖迦犖犢犖犖犖犖犖ム犢犖迦 犖犖園 15
- 16. Responsive 犖犖迦牽犖犖橿顕犢犖о犖犢犖犢犢犖犖犖犖犖ム犖犖÷顕犖萎肩犖÷犖園犖犖伍犖犖犖犢犖犢犖朽 犖犢犖 犖犖謹犢犖о犖 16
- 17. Full page 17
- 18. resized page 18
- 19. What's included Layout Base CSS Components Javascript plugins 19
- 20. How to use Bootstrap? Only 3 steps Customize and download Link in HTML file Coding 20
- 21. 1. Custom and download 21
- 22. 2. Link in HTML file 22
- 23. 3. Code what you want 23
- 24. Finished! 24
- 25. Power up! Bootstrap Font Awesome Jetstrap Jquery UI with Bootstrap theme Bootswatch Boottheme 25
- 26. Font Awesome Font-face icon based-on Bootstrap Available for modern browsers Support IE7 :) 26
- 27. Font Awesome features URL: http://fortawesome.github.com/Font-Awesome 27
- 28. Jetstrap WYSIWYG (What You See Is What You Get) Drag and Drop 100% web-based! Let's try http://jetstrap.com 28
- 29. JQuery UI with Bootstrap theme Integrate Jquery UI with Bootstrap 29
- 30. Bootswatch Free download custom theme for Bootstrap 30
- 31. Boottheme Customize, theme generator for Bootstrap 31
- 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. Q&A 33