Download as PDF, PPTX
Uploaded byInfinity Levels Studio
Twitter Bootstrap for web UI development
The document discusses the use of Twitter Bootstrap for web UI development, highlighting its open-source nature and the ease of creating responsive and clean web pages. It outlines common problems faced by programmers and designers, and provides a simple three-step process for integrating Bootstrap into projects. Additional resources and tools to enhance Bootstrap functionality are also mentioned.
More Related Content
Similar to Twitter Bootstrap for web UI development
![Bootstrap [part 1]](https://cdn.slidesharecdn.com/ss_thumbnails/bootstrappart-11-170208154053-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Twitter Bootstrap for web UI development
- 1. SWT Tech share TwitterBootstrap 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
- 8.
- 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 supportBootstrap :) 10
- 11. B Twitter Bootstrap ● Combine with HTML + Javascript → for programmer CSS + Image + Icon → for designer 11
- 12. Why we useBootstrap? ● Easy and clean code ● Cross-Browsers ● Responsive 12
- 13. Easy and cleancode 13
- 14.
- 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 useBootstrap? ● Only 3 steps ● Customize and download ● Link in HTML file ● Coding 20
- 21. 1. Custom anddownload 21
- 22. 2. Link inHTML file 22
- 23. 3. Code whatyou 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 withBootstrap theme ● Integrate Jquery UI with Bootstrap 29
- 30. Bootswatch ● Free downloadcustom theme for Bootstrap 30
- 31. Boottheme ● Customize, themegenerator 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