大同大學資研社網頁設計初級班第二周投影片 前端框架Bootstrap

1. ⼤大同⼤大學資研社
半學期學會PHP

2. 第⼆二周
前端框架 - Bootstrap的魅⼒力

3. Bootstrap組成
• CSS
• Javascript
• Icons

4. Bootstrap 使⽤用⽅方法

5. 其實，可以更簡單

6. Bootstrap CDN
⾃自動從網路下載Bootstrap

7. 在開始Bootstrap之前…

8. 先來點傳統
傳統網⾴頁前端設計

9. 三欄式設計
header
body
footer

10. Header
LOGO Menu

11. Body
頂欄
左側欄
中
右側欄

12. ⺫⽬目前以三欄式排版為⼤大宗
不過也有例外

13. 接著，讓我們進⼊入正題

14. Grid System 網格排版系統
Grid System：Bootstrap的排版依據
⼀一⾏行（1 row）有12個位置
可設定四種不同的解析度
．xs、sm、md、lg

15. Grid System 網格排版系統

16. Grid System 網格排版系統
程式碼：http://goo.gl/tdir0w

17. Grid System 網格排版系統
．混⽤用型
．offset
．程式碼：http://goo.gl/eZ7Cdl

18. 歡樂的看⽂文件時間（？）

19. 增加Bootstrap效率的⽅方式

20. 增加Bootstrap效率的⽅方式

21. 增加Bootstrap相容性的⽅方式