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.

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

8. http://twitter.github.com/bootstrap
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 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

14. Cross-Browsers
http://www.webdesignhot.com/wp-content/uploads/2010/06/IEChromeFirefoxSafariOperaLogoVector.jpg
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 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