This document provides an overview of Bootstrap, an open-source front-end framework. It discusses what Bootstrap is, how it was created by Twitter, and how it can be used to create responsive and mobile-first websites using HTML, CSS, and jQuery. Links are included for downloading Bootstrap, exploring its grid system, documentation on styling tables and buttons, and examples of using Bootstrap's jQuery plugins.

1. Rails Girls Weekly
- week 3
Kuro Hsu
2016/06/28

2. about me
• Kuro Hsu
•
• kurotanshi [at] gmail.com
• http://kuro.tw

4. https://jsbin.com/
JS BIN

5. Bootstrap

6. Bootstrap ?
• Bootstrap
• Twitter
• RWD
• jQuery
•

7. Bootstrap

8. http://goo.gl/qSYNPq
class

15. CDN

16. Bootstrap
CSS, JS
Bootstrap
HTML

21. 12
http://goo.gl/kFdYGd

22. ?

24. ?

26. ? ? ?

30. .col-xs-*
.col-sm-*
.col-md-*
.col-lg-*

32. http://www.w3schools.com/bootstrap/bootstrap_theme_me.asp

33. http://goo.gl/SEdQqT

34. •
•
•
•
•
•
•
•
http://getbootstrap.com/css/

35. •
•
•
• Hover
•
•
•
http://getbootstrap.com/css/#tables

36. •
•
•
•
•
http://getbootstrap.com/css/#buttons

37. •
•
•
•

40. Boostrap jQuery

45. https://goo.gl/UlcqJV
http://goo.gl/k2KETo

46. http://www.w3schools.com/bootstrap/bootstrap_theme_me.asp

47. • Bootstrap
• Bootstrap HTML / CSS
• Bootstrap jQuery Plugins
• Bootstrap

49. http://getbootstrap.com/

50. https://kkbruce.tw/bs3

51. http://www.w3schools.com/bootstrap/default.asp

59. Thanks