Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
⼤大同⼤大學資研社 
半學期學會PHP
第⼆二周 
前端框架 - Bootstrap的魅⼒力
Bootstrap組成 
• CSS 
• Javascript 
• Icons
Bootstrap 使⽤用⽅方法
其實,可以更簡單
Bootstrap CDN 
⾃自動從網路下載Bootstrap
在開始Bootstrap之前…
先來點傳統 
傳統網⾴頁前端設計
三欄式設計 
header 
body 
footer
Header 
LOGO Menu
Body 
頂欄 
左側欄 
中 
右側欄
⺫⽬目前以三欄式排版為⼤大宗 
不過也有例外
接著,讓我們進⼊入正題
Grid System 網格排版系統 
Grid System:Bootstrap的排版依據 
⼀一⾏行(1 row)有12個位置 
可設定四種不同的解析度 
.xs、sm、md、lg
Grid System 網格排版系統
Grid System 網格排版系統 
程式碼:http://goo.gl/tdir0w
Grid System 網格排版系統 
.混⽤用型 
.offset 
.程式碼:http://goo.gl/eZ7Cdl
歡樂的看⽂文件時間(?)
增加Bootstrap效率的⽅方式
增加Bootstrap效率的⽅方式
增加Bootstrap相容性的⽅方式
Prochain SlideShare
Chargement dans…5
×

網頁設計 - Bootstrap前端框架

1 573 vues

Publié le

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

Publié dans : Formation
  • Soyez le premier à commenter

網頁設計 - 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相容性的⽅方式

×