O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

網頁設計 - Bootstrap前端框架

1.580 visualizações

Publicada em

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

Publicada em: Educação
  • Seja o primeiro a comentar

網頁設計 - Bootstrap前端框架

  1. 1. ⼤大同⼤大學資研社 半學期學會PHP
  2. 2. 第⼆二周 前端框架 - Bootstrap的魅⼒力
  3. 3. Bootstrap組成 • CSS • Javascript • Icons
  4. 4. Bootstrap 使⽤用⽅方法
  5. 5. 其實,可以更簡單
  6. 6. Bootstrap CDN ⾃自動從網路下載Bootstrap
  7. 7. 在開始Bootstrap之前…
  8. 8. 先來點傳統 傳統網⾴頁前端設計
  9. 9. 三欄式設計 header body footer
  10. 10. Header LOGO Menu
  11. 11. Body 頂欄 左側欄 中 右側欄
  12. 12. ⺫⽬目前以三欄式排版為⼤大宗 不過也有例外
  13. 13. 接著,讓我們進⼊入正題
  14. 14. Grid System 網格排版系統 Grid System:Bootstrap的排版依據 ⼀一⾏行(1 row)有12個位置 可設定四種不同的解析度 .xs、sm、md、lg
  15. 15. Grid System 網格排版系統
  16. 16. Grid System 網格排版系統 程式碼:http://goo.gl/tdir0w
  17. 17. Grid System 網格排版系統 .混⽤用型 .offset .程式碼:http://goo.gl/eZ7Cdl
  18. 18. 歡樂的看⽂文件時間(?)
  19. 19. 增加Bootstrap效率的⽅方式
  20. 20. 增加Bootstrap效率的⽅方式
  21. 21. 增加Bootstrap相容性的⽅方式

×