www.fisc.com.tw ■　39

響應式網頁開發－以 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　無線上網行為趨勢分析－歷年使用行動上網比例

40　■ 財金資訊季刊 / No.88 / 2017.03

資訊分享〡響應式網頁開發－以 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

而言，網頁內容及程式碼僅有一種版本，當以

不同的瀏覽裝置進行檢視時，則透過預先設計

及定義之樣式表，呈現不同尺寸的瀏覽版面。

www.fisc.com.tw ■　41

響應式網頁開發－以 Bootstrap為例〡資訊分享

圖 2　響應式網頁於不同裝置瀏覽示意圖(資料來源：碁科網頁設計 )

(一 ) RWD設計理念

RWD的設計理念是基於流動布局、彈性

圖片、媒體查詢等技術組合，呈現非固定尺寸

的網頁狀態，茲就各該技術分述如下：

1. 流動布局 ( Fluid Grid )：將網頁元素以比

例設定方式，讓頁面元素相對於視域尺寸

予以縮放，使其能依瀏覽器大小呈現適當

樣式，其參考公式為：比例 = 目標物寬度

/ 環境寬度。

2. 彈性圖片 ( Fluid/Flexible Images )：同樣

使用比例設定方式呈現圖片，所使用技巧

包含縮放、剪裁、依條件載入⋯等。

3. 媒體查詢 ( Media Query )：媒體查詢是

RWD設計理念中最重要的核心技術，屬

CSS3 ( Cascading Style Sheets Level 3 )

技術，主要是在特定環境下藉由所查得之

設備屬性 (例如：設備類型、解析度、螢

幕尺寸、色彩等 )，決定呈現的樣式內容。

(二 ) CSS3 Media Query

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

42　■ 財金資訊季刊 / No.88 / 2017.03

資訊分享〡響應式網頁開發－以 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套件以建立模組、下拉選

單、頁籤、提示等。

• 擁有大量開發者社群支持，並為它持續建

立新的套件。

www.fisc.com.tw ■　43

響應式網頁開發－以 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

框架是個好選項。

44　■ 財金資訊季刊 / No.88 / 2017.03

資訊分享〡響應式網頁開發－以 Bootstrap為例

表 2　常見的 RWD前端框架比較表

RWD前端框架 Bootstrap Foundation Pure Skeleton UIKit

作者Mark Otto,

Jacob ThorntonZURB 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 GlyphiconsFoundation Icon Fonts

Font Awesome

NoneFont

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

www.fisc.com.tw ■　45

響應式網頁開發－以 Bootstrap為例〡資訊分享

預設的 Bootstrap 網格系統為 12 列，

可做出一個 940px寬的容器，如加入響應式

CSS檔案，網格系統即自動依可視視窗的寬

度於 724px至 1170px間進行動態調整。若可

如選擇於桌上型環境以水平方式排列內

容，而手機與平板的環境則以堆疊方式排列

內容時，使用「col-md-」開頭的類別再配合

Column的數字即可。例如：col-md-6的 6代

表 6個 Column寬度，col-md-3的 3則是代

表 3個 Column寬度。

視視窗低於 767px寬度，「列」即變成流動

且垂直堆疊，其分割示意如圖 4「網格系統分

割示意圖」。

圖 4　網格系統分割示意圖

以圖 5為例，原始碼設定搭配不同的顯示

環境，即可看出網格系統的設定效果。

在桌上型的環境，其執行結果為每 Row

排 3欄；一個 div類別使用 4個Column寬度，

亦即占該 Row三分之一 (如圖 6)。

表 3　Bootstrap斷點及網格系統對應表

(資料來源：http://blogs.uuu.com.tw/Articles/category/Bootstrap.aspx)

System就可輕易完成。開發人員只須將原本

的網頁內容放到 Column內，再選擇適當的

Column類別即可。在不同裝置上的 Column

定義，請參考表 3「Bootstrap斷點及網格系

統對應表」。

46　■ 財金資訊季刊 / No.88 / 2017.03

資訊分享〡響應式網頁開發－以 Bootstrap為例

在平板的環境，其執行結果是每 Row排

2欄；一個 div類別使用 6個 Column寬度，

亦即占該 Row二分之一 (如圖 7)。

圖 7　網格系統範例結果－平板環境

手機的環境則是以堆疊方式呈現 (如圖 8)。

圖 5　網格系統範例原始碼

圖 6　網格系統範例結果－桌上型環境

圖 8　網格系統範例結果－手機環境

www.fisc.com.tw ■　47

響應式網頁開發－以 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樣式表、字

48　■ 財金資訊季刊 / No.88 / 2017.03

資訊分享〡響應式網頁開發－以 Bootstrap為例

圖 10 Bootstrap樣式表、Web Font字型檔、Bootstrap JavaScript檔案結構

樣 式 表、Web Font 字 型 檔、Bootstrap

JavaScript檔之檔案結構 (如圖 10所示 )，同

時建立套用 Bootstrap版型的 Default.aspx網

頁範本 (如圖 11所示 )，可檢視樣板效果 (如

圖 12所示 )。

網站建立後僅須套用樣式，即可將原本簡

單的網頁變成美化過的頁面。比較未套用樣式

及套用 Bootstrap樣式之網頁 (如圖 13及 14

所示 )，可以看出兩者僅「樣式設定」行有差

異；再檢視瀏覽器顯示結果，可看到兩者之超

連結從簡單的文字樣式變成帶有圓弧角度的簡

潔按鈕 (如圖 15及 16所示 )。

型檔及 JavaScrip檔案置於網站檔案結構下，

在 HTML原始檔中引用 Bootstrap CSS樣式

檔案及相關 script檔案，再套用對應的樣式

(class)設定，即可呈現出美化的網頁效果，以

下利用 Visual Studio開發工具進行 ASP.NET

程式開發結合Bootstrap程式原始碼範例介紹。

微 軟 Visual Studio 開 發 工 具 已 內 建

Bootstrap 3.0 功 能， 若 使 用 Visual Studio

2013 以其範本建立 Web 站台或 ASP.NET

Web應用程式，Bootstrap相關檔案即已預設

於專案中。建立一個 ASP.NET Web Form網

站 (如圖 9所示 )，預設即自動建立 Bootstrap

圖 9　建立 ASP.NET Web Form網站

www.fisc.com.tw ■　49

響應式網頁開發－以 Bootstrap為例〡資訊分享

圖 11　Default.aspx範本檔原始碼

圖 12　瀏覽器檢視 Default.aspx範本檔效果

圖 13　未套用 Bootstrap樣式

50　■ 財金資訊季刊 / No.88 / 2017.03

資訊分享〡響應式網頁開發－以 Bootstrap為例

圖 14　套用 Bootstrap樣式

圖 15　未套用 Bootstrap樣式，超連結以原樣貌呈現

圖 16　套用 Bootstrap樣式，超連結呈現帶有圓弧角度的簡潔按鈕

www.fisc.com.tw ■　51

響應式網頁開發－以 Bootstrap為例〡資訊分享

許多課題待深入探討，但其前端框架應用卻是

目前可快速學習套用的技術。僅以此文與讀者

分享前端框架的演進與技術，期協助讀者瞭解

前端技術概念，進而尋獲適合所需之快速開發

模板工具。

※參考文獻 /資料來源：1. 「2015 年台灣寬頻網路使用調查報告」及「2015 年台灣無線網路使用狀況調查報告」，財團法人台灣網路資訊中心。

2. C S S 3 M e d i a Q u e r y ( h t t p s : / /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)。

Bootstrap框架對 ASP.NET程式開發而

言，須下功夫之處在於如何將程式自動送出

(Render )的網頁正確地套上選妥之樣板，以

展現原本預期的樣貌。

六、 結語

行動裝置推陳出新，網站技術日新月異，

響應式設計之優勢與趨勢，雖已被認可且普

及，惟仍有許多難題有待突破。不同裝置之使

用習慣不盡相同，例如桌上型電腦瀏覽器「在

彈出式網頁填寫資訊後，再回到主頁面呈現」

的操作習慣，運用至手機上即覺操作不順手；

類似此種不同裝置的網頁操作及瀏覽動線規

劃，仍有賴設計人員投入相當心力思索，如何

「求同存異」，讓各種體驗均能最佳化，實須

持續深入探究。

至於性能考量，亦為響應式開發無法避免

之課題，由於不論依條件載入，或隱藏、顯示

內容，均較單一條件判斷的程式碼結構來得繁

瑣，且於不同裝置上或多或少影響其效能。舉

例言之，無論在何種尺寸的裝置上瀏覽網頁，

HTML網頁都會被瀏覽器全數載入再決定是否

呈現，當頁面資訊複雜且功能多時，即可能發

生手機在瀏覽網站之等待時間太長，甚至出現

斷斷續續不穩定的狀況 (手機硬體效能與桌機

相比的差異造成 )。如擬避免此情形，勢須於

規劃設計階段，即考量單一網頁的功能性勿太

複雜；換言之，亦即選取可於所有裝置操作之

功能最大值；至於如何取捨，則須考驗開發團

隊的智慧。

在網站開發及設計上，響應式設計雖仍有