Bootstrap Bootstrap / / 2007 iphone 2008 2009 iphone2g iphone3g iphone3gs ipad Android 2008 T-MobileG1 ios Android Sony SAMSUNG HTC Acer ASUS (Taiwan Network Information Center TWNIC) 2015 12 2014 12 2015 6 68.8% 56.3% (22.4%) (17.0%) 2015 99 ( 1) (80.6%) (74.1%) (53.6%) ( 1) 1 www.fisc.com.tw 39
Bootstrap 1 % 104 10 103 10 (WWW) 53.6 47.0 74.1 53.5 80.6 50.1 20.6 12.9 18.6 16.3 103 10 104 10 APP ios Android AppStore GooglePlay APP RWD ( Responsive Web Design ) RWD RWD Ethan Marcotte 2010 RWD ( ) ( 2) RWD Server 40 / No.88 / 2017.03
Bootstrap 2 ( ) ( ) RWD ( ) CSS3 Media Query RWD 1. ( Fluid Grid ) = / 2. ( Fluid/Flexible Images ) 3. ( Media Query ) RWD CSS3 ( Cascading Style Sheets Level 3 ) ( ) CSS ( ) W3C ( World Wide Web Consortium ) HTML ( Hyper Text Markup Language ) CSS CSS HTML Media Query CSS3 CSS3 Media Query CSS Breaks ( ) 320px (iphone) 768px www.fisc.com.tw 41
Bootstrap (ipad) 960px 1024px ( PC) Padphone Fonepad ( 3) 3 ( CSS3 Media Query) ( ) RWD 1. Bootstrap Bootstrap CSS JavaScript Bootstrap ( Foundation Pure Skeleton UIKit ) Bootstrap Mobile First 12 jquery 42 / No.88 / 2017.03
Bootstrap 2. Foundation Foundation Bootstrap CLI wrappers Sublime Text Libsass ( GPU acceleration ) fastclick.js Add-on ( icon fonts ) (responsive tables) Foundation Bootstrap Foundation Foundation Foundation Bootstrap 3. Pure.CSS Pure.CSS Yahoo 2013 CSS Bootstrap Foundation RWD Pure.CSS 1.1KB Grid 0.8KB ( Forms ) ( Buttons ) 1.5KB 0.8KB Pure.CSS Bootstrap 4. Skeleton Skeleton UI Dave Gamache CSS 2012 Skeleton Skeleton 400 5. UIKit UIKit Pure.CSS Bootstrap Sublime Text UIKit WordPress Joomla UIKit www.fisc.com.tw 43
Bootstrap 2 RWD RWD Bootstrap Foundation Pure Skeleton UIKit Mark Otto, Jacob Thornton ZURB Yahoo Dave Gamache YOOtheme 2011 2011 2013 2012 2013 Github Stars 82,342 20,313 11,635 8,898 5,102 3.2 MB 81.3 KB 36.6 KB 8.11 KB 765 KB Yes Yes Yes Yes Yes Yes Yes Yes No Yes Icons Glyphicons Foundation Icon Fonts Font Awesome None Font Awesome CSS LESS, Sass Sass None None LESS, Sass IE IE8+ IE9+ IE7+ IE9+ IE9+ MIT MIT Yahoo BSD MIT MIT ( http://www.csshero.org/css-frameworks-use-comparing-5-popular-css-frameworks/) MIT (Massachusetts Institute of Technology) / Bootstrap Bootstrap Twitter Mark Otto Jacob Thornton 2011 8 Twitter Bootstrap Bootstrap LESS.js CSS Twitter Bootstrap Release Notes Bootstrap Bootstrap ( Grid System ) Grid System Row ( ) Column ( ) Row 12 Column Bootstrap Media Query Grid 44 / No.88 / 2017.03
Bootstrap System Column Column Column 3 Bootstrap 3 Bootstrap ( http://blogs.uuu.com.tw/articles/category/bootstrap.aspx) Bootstrap 12 940px CSS 724px 1170px 767px 4 4 col-md- Column col-md-6 6 6 Column col-md-3 3 3 Column 5 Row 3 div 4 Column Row ( 6) www.fisc.com.tw 45
資訊分享〡響應式網頁開發 以 Bootstrap 為例 圖 5 網格系統範例原始碼 圖 6 網格系統範例結果 桌上型環境 在平板的環境 其執行結果是每 Row 排 2 欄 一個 div 類別使用 6 個 Column 寬度 亦即占該 Row 二分之一 ( 如圖 7) 圖 7 網格系統範例結果 平板環境 手機的環境則是以堆疊方式呈現 ( 如圖 8) 圖 8 網格系統範例結果 手機環境 46 財金資訊季刊 / No.88 / 2017.03
Bootstrap Bootstrap Bootstrap Bootstrap Bootstrap RWD ( ) Bootstrap ( ) 2 1. WrapBootstrap Bootstrap 2. ThemeForest 2 6 Web Bootstrap 2 ( ) Bootstrap ( Open Source ) 1. AdminLTE IE9 FireFox Safari Chrome Opera MIT ( Massachusetts Institute of Technology ) 2. Gentelella Bootstrap Admin Template Gentelella Admin Bootstrap Bootstrap3 jquery / MIT Colorlib 3. HTML5 Admin Template HTML5 + CSS3 jquery Google API / IE7/8/9 FireFox Chrome Opera MediaLoot MediaLoot Bootstrap Bootstrap Bootstrap www.fisc.com.tw 47
資訊分享〡響應式網頁開發 以 Bootstrap 為例 型檔及 JavaScrip 檔案置於網站檔案結構下 微 軟 Visual Studio 開 發 工 具 已 內 建 在 HTML 原 始 檔 中 引 用 Bootstrap CSS 樣 式 Bootstrap 3.0 功 能 若 使 用 Visual Studio 檔 案 及 相 關 script 檔案 再套用對應的樣 式 2013 以 其 範 本 建 立 Web 站 台 或 ASP.NET (class) 設定 即可呈現出美化的網頁效果 以 Web 應用程式 Bootstrap 相關檔案即已預設 下利用 Visual Studio 開發工具進行 ASP.NET 於專案中 建立一個 ASP.NET Web Form 網 程式開發結合 Bootstrap 程式原始碼範例介紹 站 ( 如圖 9 所示 ) 預設即自動建立 Bootstrap 圖 9 建立 ASP.NET Web Form 網站 樣 式 表 Web Font 字 型 檔 Bootstrap JavaScript 檔之檔案結構 ( 如圖 10 所示 ) 同 時建立套用 Bootstrap 版型的 Default.aspx 網 頁範本 ( 如圖 11 所示 ) 可檢視樣板效果 ( 如 圖 12 所示 ) 網站建立後僅須套用樣式 即可將原本簡 單的網頁變成美化過的頁面 比較未套用樣式 及套用 Bootstrap 樣式之網頁 ( 如圖 13 及 14 所示 ) 可以看出兩者僅 樣式設定 行有差 異 再檢視瀏覽器顯示結果 可看到兩者之超 連結從簡單的文字樣式變成帶有圓弧角度的簡 圖 10 Bootstrap 樣式表 Web Font 字型檔 Bootstrap JavaScript 檔案結構 48 財金資訊季刊 / No.88 / 2017.03 潔按鈕 ( 如圖 15 及 16 所示 )
響應式網頁開發 以 Bootstrap 為例〡資訊分享 圖 11 Default.aspx 範本檔原始碼 圖 12 瀏覽器檢視 Default.aspx 範本檔效果 圖 13 未套用 Bootstrap 樣式 www.fisc.com.tw 49
資訊分享〡響應式網頁開發 以 Bootstrap 為例 圖 14 套用 Bootstrap 樣式 圖 15 未套用 Bootstrap 樣式 超連結以原樣貌呈現 圖 16 套用 Bootstrap 樣式 超連結呈現帶有圓弧角度的簡潔按鈕 50 財金資訊季刊 / No.88 / 2017.03
Bootstrap Bootstrap ASP.NET (Render ) HTML ( ) / 1. 2015 2015 2. CSS3 Media Query (https:// responsivedesign.is/) 3. CSS (http://www.csshero. org/css-frameworks-use-comparing-5- popular-css-frameworks/) 4. Bootstrap3 (https://kkbruce. tw/bs3) 5. Bootstrap 3 Grid System NET Magazine (http://blogs.uuu.com.tw/articles/ category/bootstrap.aspx) 6. Demo (2014) ASP.net MVC5 7. (2016) (RWD) Bootstrap 8. MIT (https:// zh.wikipedia.org/wiki/mit%e8% A8%B1%E5%8F%AF%E8%AD %89) www.fisc.com.tw 51