Bootstrap 導入分享

Sleek, intuitive, and powerful front-end framework for
faster and easier web development.
tony

行動裝置 web 開發
 Responsive design
 手機專用網頁 OR APP
 判斷裝置

Responsive design 優點
 開發成本較低
 設計師可以針對既有的網頁 & CSS 做一些調整，很快就
可以有一個 mobile 的版本。當然若要調整到有很好的
體驗，還是要花一些功夫，不過比起兩種網頁 OR APP
的開發成本而言，responsive web design 算是相對成本
較低的。

 維護成本較低
 雖然看到的介面不同，但在不同裝置上看到的網頁跟一
般 PC 上所看到的網頁，其實都是同一份 HTML。因為
只有一份 HTML，所以在維護上會比有二份 HTML 的
獨立網頁，或是使用特定語言 ( Object-C、Java) 的 app
相對容易一些。

 可同時針對不同尺寸的裝置做處理
 responsive 透過使用 CSS3 media ，可以針對不同尺寸
的裝置做調整，不管是超寬的螢幕、 tablet、smart
phone 都可以。

Responsive design 缺點
 效能
 因為用的是同一份 HTML，所以若是在 mobile 的情境，
還是會 download 一些不需要的 resource (HTML、
Image，etc) ，這對於原本網路速度就不快的 mobile 而
言是一個多餘的開銷。

Responsive design 缺點
 未針對 mobile device 需要的流程做最佳化
 responsive web design 可以同時針對不同尺寸的裝置，
但“可以”不代表是“最好”的策略，因為在 mobile
裝置需要的內容與流程可能會跟 desktop device 有所不
同。

Responsive design 概念
 Fluid grid
 fluid grid 的概念主要是在 CSS 裡使用百分比去做設定
( e.g. width : 60% )，而不使用絕對的像素 ( e.g. width :
600px )。
 下面這一小段節自 twitter bootstrap 的 css

 Flexible image
 使用了 fluid grid 之後，頁面已經不會有固定的大小，
但網頁上使用的圖片若是太大，還是有可能會讓整個頁
面爆掉。
 flexible image 的概念是在 image 外面再包一層 div ，這
個 div 本身是使用百分比去控制大小，並規定 image 的
寬度最多不能超過 parent div

 Stop auto scaling
 通常在 mobile 的瀏覽器，為了讓 user 可看網頁全貌，
瀏覽器假裝自己螢幕比實際上寬 ( e.g. iPhone 假裝自己
寬度 980px )，並自動幫網頁做縮放到螢幕的寬度。但
若網頁原本就有幫 mobile 做調整，那就需在 meta 加個
設定，告訴手機不需要做自動縮放。
相關設定可參考：iPhone 對 viewport 的說明或Android 對 webview 的說明

 Media query
 media query 算是 responsive web design 裡面的重頭戲。
在有支援 media query 的瀏覽器中，可以考慮裝置或可
視範圍來載入不一樣的 CSS。
 下頁即為現在架構

 國外有一個網站專門蒐集各式各樣的 Media Queries
效果 http://mediaqueri.es/

HTML5 & CSS3 patch
 因 IE 與 CSS3 & HTML5 相容性不足，可參考以下的
patch。
 Html5shiv
 舊版 IE 不認識 HTML5 元素，則以 javascript 來創造元
素

HTML5 & CSS3 patch
 Selectivizr
 Selectivizr 是一個 JS 文件，需先載入 jQuery … 的 JS 框
架，再載入 selectivizr，就可讓 IE6/7/8 支援 CSS3。
 下頁為支援列表

HTML5 & CSS3 patch
 CSS3PIE
 CSS3 新增了一些特效，如：圓角、陰影、漸層等…，但
舊版 IE 無法支援，只需載入這套件即可達成。

Bootstrap 簡介
 完整 CSS Framework
 Responsive design

Bootstrap 實作
 官網：
 http://twitter.github.com/bootstrap/index.html
 中文版 ( 版本較舊 )：
 http://wrongwaycn.github.com/bootstrap/docs/index.h
tml

Bootstrap 開發技巧、想法
 手機板先做
 考慮最嚴謹的畫面，再來增加會比較容易
 手機因輸入不便，輸入方式要謹慎考慮
 Media Query 不能解決所有問題
 圖片尺寸、速度
 字體大小
 不必要載入
 Media Query 與偵測裝置合用，刪去不必要的元素。

Bootstrap 開發技巧、想法
 Responsive design 網上有人提出“較適合用在 Tablet
的 Portrait / Landscape 的用途上”， Responsive
design 的想法是為了讓 Desktop / Mobile 擠在同一個
版面上，用同一份 code，再視需要去覆蓋或移除，要
是持續的置換 view ，因考慮的不只是 view 也需審視
載入的物件，會非常的辛苦。

測試工具
 目前只找到這可排除掉 scroll bar 寬度
 http://responsivepx.com/

測試工具
 Google 推出的 GoMo 服務可以協助你，讓你了解自己
的網站或部落格對於行動裝置用戶是否夠友善。
 http://www.howtogomo.com/tw/d/

測試工具
 Mobitest 可以線上檢測你的網站在行動裝置上載入速
度，支援的裝置有 iPhone、iPad、iPad 2、Motorola
XOOM、Galaxy S、Nexus S，作業系統則有最常見的
iOS 和 Android。
 http://mobitest.akamai.com/m/index.cgi

參考資料
 HTML5shiv
 http://code.google.com/p/html5shiv/
 Selectivizr
 http://selectivizr.com/
 Css3pie
 http://css3pie.com/

Bootstrap 導入分享

More Related Content

Similar to Bootstrap 導入分享

Bootstrap 導入分享