CSS FrameworkS 




現代化行動網頁設計基礎入門班 DAY 6


講師:張凱迪(KD.Chang)







Copyright © 2013 All rights reserved





提醒您鍵盤左右鍵可以移動投影片

 Sorry,  PPT is not suitable for Hackers : ( 

Outline 

CSS Framework 簡介

Twitter Bootstrap 實戰

關於 CSS Framework 那些小事







 CSS Framework 簡介

CSS FRAMEWORK 是啥?


將常用的CSS整理歸納好(元件、排版布局),並在需要時直接載入所需要的設定,透過這個方法可以大幅提昇工作效率及節省在相似或相同設定上所花費的時間,讓開發者可以專注在應用開發上


有哪些 CSS FRAMEWORK?

常見有Twitter Bootstrap、Foundation、Gumby Framework
 
參考文件:CSS Frontend Frameworks







  Twitter Bootstrap 實戰

TWITTER BOOTSTRAP 3

 
參考文件:CSS Frontend Frameworks

網格系統(GRID SYSTEM)


網格系統(Grid System)


目前有4種Grids,為不同裝置而設:
 .col-xs-*:智慧型手機 ( <768px ) 
.col-sm-*:平板 ( ≥768px ) 
.col-md-*:桌上型電腦 ( ≥992px ) 
.col-lg-*:桌上型電腦 ( ≥1200px )

實戰練習

使用Twitter Bootstrap做出可跨瀏覽器瀏覽的Mobile Web

Twitter Bootstrap 與 CSS Framework簡介

By 張凱迪(KD Chang)

Twitter Bootstrap 與 CSS Framework簡介

隨著智慧型裝置的起飛,現在幾乎已是人手一支智慧型手機,根據統計今年全球智慧型手機出貨量已達10億支,由於大量的需求,開發Mobile Web也成為原生(Native App)外另一種較低成本的選擇。因此本課程將著重在網頁開發基礎介紹以及如何運用HTML5/CSS3/JavaScript(jQuery)來開發Mobile Web App。希望讓沒有基礎(或有基礎)的學員能在學習完課程後具備自學能力未來能持續進修,進而開發出搭配Facebook API、Google Map API的Mobile Web App。 課程網站:http://kdchang.cc/mobile-web-dev/

  • 2,205
Loading comments...

More from 張凱迪(KD Chang)