響應式建站框架研究

鄭秀琴

摘 要：本文主要闡述了響應式設計概念和響應式布局與static靜態布局、fluid流式布局、自適應布局的異同，以及各種響應式設計前端框架比較研究。著重研究了Bootstrap框架。運用Bootstrap框架進行響應式建站，其靈活性和可擴展性加速了響應式網站項目開發的進程，推動了響應式技術的發展。

關鍵詞：響應式；Bootstrap；前端框架

基金項目：本文為衢州市科技計劃項目“全網營銷背景下企業響應式網站設計研究（項目編號：2017G15）”的研究成果。

1 前言

近些年以來，由于手機、平板等移動端設備的廣泛應用，移動端的流量在不斷地增大，為了提高用戶使用不同設備瀏覽網頁時的體驗，響應式網頁設計越來越來盛行。

2 響應式設計綜述

2.1 響應式設計概念

目前，隨著信息技術的發展和人們物質生活水平的提高，瀏覽網頁獲取信息的方式不僅僅局限于使用PC端的瀏覽器。對于大多數網站而言，沒有資金或努力為每個新的分辨率移動設備產品設計合適的移動網站版本。對于用戶來說，用戶只關心信息獲取的體驗，并不會考慮到開發的繁瑣。首先，響應式網站使用一個統一的URL，無論是在手機、平板電腦還是PC桌面或筆記本電腦上。其次，響應式網頁設計依靠媒體查詢來促進不固定的布局并實現靈活的設計。也就是說，通過確定各種設備屬性值，例如設備類型、分辨率、物理屏幕尺寸和顏色，確定相同存儲空間的布局。第三，所有站點都使用響應式設計（僅使用一個代碼庫）來適應所有需求，并努力實現多平臺多終端服務的一致性。

2.2 Responsive Layout

Responsive Layout不同于static layout、fluid layout、adaptive layout。靜態布局是Web開發的早期的網頁布局方式，頁面具有固定大小。隨著窗口大小的改變，元素的大小不會改變。因此，使用靜態布局來設計網頁，頁面很簡單，開發很容易，維護也很容易。隨著屏幕分辨率和尺寸的多樣化，靜態布局已不能滿足用戶的瀏覽需求，靜態布局逐漸被流式布局所取代。流式布局是頁面整體布局始終不變，但頁面中的元素會隨著分辨率而改變。頁面元素大小使用相對大小，而不是絕對大小。這種布局在屏幕尺寸相差很大時，顯示會很不美觀，于是就出現了自適應布局。自適應布局是通過媒體查詢為不同的分辨率定義不同布局，在一定分辨率范圍內使用相同的靜態布局。這樣分辨率改變時，頁面中的元素大小不變但布局會改變。而響應式布局結合了流式布局和自適應布局的優點，效果會更加美觀。在越來越追求完美用戶體驗的設計時代，很好地解決了PC、手機和平板不同分辨率的兼容問題。

3 響應式框架比較研究

前端開發框架是指一組產品化的HTML、CSS、JavaScript組件。隨著響應式設計的流行，響應式前端框架的應用也越來越廣泛。響應式框架有許多，這里討論五個在github上排名靠前且深受歡迎的五個響應式框架。每個框架都有自己的優缺點和特定的應用領域。大家可以根據特定項目的要求選擇適當的框架。

3.1 Bootstrap

Bootstrap是當今所有流行框架中無可爭議的老大，它是Twitter公司的兩位工程師合作推出的，在Github上非常火爆。鑒于其廣受歡迎，而且用戶每天仍在增長，所以這個絕妙的工具應該不會讓你失望，也不會在你成功建立一個網站之前離開你。

3.2 Foundation

Foundation是這幾個框架中第二大的，在像ZURB一樣實力雄厚的公司支持下，這個框架確實很強大。Foundation已經在很多大型網站上投入使用，包括Facebook、Mozilla、Ebay、Yahoo！和國家地理等。Foundation提供多種UI組件，是一個易用、功能強大并且非常靈活的框架，它可用于構建各種設備上的 Web 應用。

3.3 Skeleton

Skeleton 有一系列 JS 和 CSS集合，容易上手，使用它可快速開發出適合各種不同分辨率設備的漂亮網站。Skeleton 使用網格開發，特別適合于快速開發一些小項目。

3.4 Less Framework

Less框架的出現，簡化了CSS代碼編寫，深受一些設計師喜愛。它是一款經典的支持自適應的CSS網格系統，它包含4個布局和3套預設字體，以單一網格為基礎，可改變列的數量和邊緣的寬度做出不一樣的布局，滿足PC和移動設備的瀏覽需求。

3.5 ResponsiveAeon

ResponsiveAeon 是Aeon的一個HTML5和CSS3的框架，有一個12列、全寬1104px的支持響應式的網格系統，并且提供了3個非常容易理解的類Container、Content、Col供使用，它使用了媒體查詢，支持各種分辨率的設備。除了網格系統，它還提供列表、表格、按鈕、表單等，因此使用它很容易快速構建簡潔、美觀的響應式布局。

4 Bootstrap框架研究與應用

4.1 Bootstrap框架簡介

Bootstrap框架來自Twitter，是設計師Mark Otto和Jacob Thornton合作開發的HTML、CSS和JavaScript框架。它基于HTML、CSS、JavaScript技術，提供了一個直觀的網頁設計工具包，可用于開發響應式布局、移動設備優先的WEB項目。它還提供了許多流行且簡單的UI組件、網格系統和一些常用的JavaScript插件，使Web開發更快速、簡便。Bootstrap框架自推出以來一直很流行，并且一直是GitHub上流行的開源項目。美國國家航空航天局和美國MSNBC有線新聞頻道都使用了該項目，目前它也是歐洲和美國最流行的前端框架。

4.2 移動設備優先

在Bootstrap2中，移動設備友好的樣式已被添加到框架的某些關鍵部分。在Bootstrap3中，整個框架被重寫，以便它開始支持移動設備。移動設備友好的概念不是簡單地為移動設備添加一些可選樣式，而是直接集成到框架的內核中，即Bootstrap首先基于移動設備。使用智能手機瀏覽PC站點時，通常會自動縮放到合適的寬度，以便視口（視口指的是移動設備上的屏幕窗口）可以顯示整個頁面，但這會使文本變得非常體積小，瀏覽內容不方便。

4.3 布局容器

Bootstrap框架需要為頁面內容和柵格系統包裹一個.container的容器。Bootstrap提供了兩個類：.container類和.container-fluid類，這兩種容器類不能互相嵌套。container類用于固定寬度并支持響應式布局的容器.在網站制作中可使用如圖1所示的方式使用container類。container-fluid類用于100%寬度，占據全部視口。

4.4 流式柵格系統

Bootstrap框架為用戶提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口大小的變化自動劃分為12列。它包含易于使用的預定義類和強大的mixin，用于生成更多語義布局。網格系統用于通過一系列行和列的組合來創建頁面布局，并且網頁的內容可以放置在這些創建的布局中。“行（row）”必須包含在.container（固定寬度）或.container-fluid（100%寬度）中，以便為其賦予合適的排列（alignment）和內補（padding）。通過“行”在水平方向創建一組“列（column）”。表1顯示了Bootstrap的網格系統如何在多屏設備上工作。

5 結束語

綜上所述，在眾多的前端開發框架中，目前Bootstrap無疑是其中的佼佼者，其靈活性和可擴展性加速了響應式網頁項目開發的進程，推動了響應式技術的發展。不同的響應式框架都各有優缺點，框架的許多選項都是模塊化的，開發人員可以結合多種框架，使用不同的組件。

參考文獻

[1]徐濤.深入了解Bootstrap[M].北京：人民郵電出版社，2016：1-8.

[2]DavidCochran.Bootstrap實戰[M].李松峰，譯.北京：人民郵電出版社，2016：1-10.

[3]楊彬.淺談響應式網頁設計[J].遼寧行政學院學報，2016（5）：161-161.

[4]張樹明.基于響應式Web設計的網頁模板的設計與實現[J].計算機與現代化，2016，1（6）：125-127.