Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
59
Rails Girls Weekly ڡ矐獮ᒒ翕殷ದ蔩 - week 3 Kuro Hsu 2016/06/28
Transcript of Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
![Page 1: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/1.jpg)
Rails Girls Weekly - week 3
Kuro Hsu 2016/06/28
![Page 3: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/3.jpg)
![Page 5: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/5.jpg)
Bootstrap
![Page 6: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/6.jpg)
Bootstrap ?
• Bootstrap
• RWD
• jQuery
•
![Page 7: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/7.jpg)
Bootstrap
![Page 9: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/9.jpg)
![Page 10: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/10.jpg)
![Page 11: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/11.jpg)
![Page 12: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/12.jpg)
![Page 13: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/13.jpg)
![Page 14: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/14.jpg)
![Page 15: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/15.jpg)
CDN
![Page 16: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/16.jpg)
Bootstrap CSS, JS
Bootstrap
HTML
![Page 17: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/17.jpg)
![Page 18: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/18.jpg)
![Page 19: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/19.jpg)
![Page 20: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/20.jpg)
![Page 22: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/22.jpg)
?
![Page 23: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/23.jpg)
![Page 24: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/24.jpg)
?
![Page 25: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/25.jpg)
![Page 26: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/26.jpg)
? ? ?
![Page 27: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/27.jpg)
![Page 28: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/28.jpg)
![Page 29: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/29.jpg)
![Page 30: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/30.jpg)
.col-xs-*
.col-sm-*
.col-md-*
.col-lg-*
![Page 31: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/31.jpg)
![Page 32: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/32.jpg)
http://www.w3schools.com/bootstrap/bootstrap_theme_me.asp
![Page 34: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/34.jpg)
•
•
•
•
•
•
•
•
http://getbootstrap.com/css/
![Page 37: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/37.jpg)
•
•
•
•
![Page 38: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/38.jpg)
![Page 39: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/39.jpg)
![Page 40: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/40.jpg)
Boostrap jQuery
![Page 41: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/41.jpg)
![Page 42: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/42.jpg)
![Page 43: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/43.jpg)
![Page 44: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/44.jpg)
![Page 46: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/46.jpg)
http://www.w3schools.com/bootstrap/bootstrap_theme_me.asp
![Page 47: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/47.jpg)
• Bootstrap
• Bootstrap HTML / CSS
• Bootstrap jQuery Plugins
• Bootstrap
![Page 48: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/48.jpg)
![Page 49: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/49.jpg)
http://getbootstrap.com/
![Page 52: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/52.jpg)
![Page 53: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/53.jpg)
![Page 54: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/54.jpg)
![Page 55: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/55.jpg)
![Page 56: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/56.jpg)
![Page 57: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/57.jpg)
![Page 58: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/58.jpg)
![Page 59: Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3](https://reader034.fdocuments.us/reader034/viewer/2022042611/586fda501a28ab18428b5ccb/html5/thumbnails/59.jpg)
Thanks