【it邦幫忙交流聚(1)】讓你的網站更潮-twitter boostrap入門
DESCRIPTION
從外觀、可使性等觀點,介紹Twitter Boostrap能為網站帶來的效益TRANSCRIPT
![Page 1: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/1.jpg)
讓你的網站更潮Twitter Boostrap ⼊入⾨門
iThome網站開發部經理 ⿈黃柏諺
![Page 2: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/2.jpg)
About Me
⿈黃柏諺iT邦幫忙產品經理iThome網站開發部經理前端開發
![Page 3: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/3.jpg)
潮 ?
![Page 4: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/4.jpg)
![Page 5: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/5.jpg)
![Page 6: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/6.jpg)
![Page 7: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/7.jpg)
![Page 8: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/8.jpg)
之為物潮
![Page 9: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/9.jpg)
好看
![Page 10: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/10.jpg)
好⽤用
![Page 11: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/11.jpg)
好厲害
![Page 12: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/12.jpg)
Twitter Bootstrap登場
![Page 13: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/13.jpg)
![Page 14: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/14.jpg)
動⼿手
![Page 15: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/15.jpg)
http://twitter.github.com/bootstrap/
下載
![Page 16: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/16.jpg)
![Page 17: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/17.jpg)
安裝
![Page 18: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/18.jpg)
![Page 19: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/19.jpg)
使⽤用
![Page 20: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/20.jpg)
關鍵概念HTML Tag組成結構
css class name控制樣式與⾏行為
![Page 21: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/21.jpg)
![Page 22: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/22.jpg)
網⾴頁⾻骨架
![Page 23: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/23.jpg)
設計是在混亂中
創造秩序
![Page 24: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/24.jpg)
看不⾒見的秩序
![Page 25: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/25.jpg)
![Page 26: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/26.jpg)
Grid System
![Page 27: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/27.jpg)
![Page 28: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/28.jpg)
Responsive Web Design
RWD
![Page 29: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/29.jpg)
Desktop
![Page 30: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/30.jpg)
Tablet
![Page 31: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/31.jpg)
Phone
![Page 32: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/32.jpg)
Fluid layout
![Page 33: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/33.jpg)
好⽤用⼯工具
![Page 34: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/34.jpg)
CSS基礎架構與美化
![Page 35: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/35.jpg)
元件基礎架構與美化
![Page 36: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/36.jpg)
[省⼒力][美觀]
[好上⼿手]
![Page 37: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/37.jpg)
JavaScript更強⼤大的輔助
![Page 38: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/38.jpg)
弄髒⼿手模式vs.
富貴⼿手模式
![Page 39: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/39.jpg)
客製化打造⾃自⼰己的樣式
![Page 40: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/40.jpg)
Ecosystem
![Page 41: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/41.jpg)
http://goo.gl/Qf5LT
![Page 43: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/43.jpg)
潮只在⼀一念之間
![Page 44: 【iT邦幫忙交流聚(1)】讓你的網站更潮-Twitter Boostrap入門](https://reader034.vdocuments.net/reader034/viewer/2022042515/556ac2f9d8b42acd348b49f2/html5/thumbnails/44.jpg)
Thanks