響應(yīng)式建站框架研究

鄭秀琴

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

關(guān)鍵詞：響應(yīng)式；Bootstrap；前端框架

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

1 前言

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

2 響應(yīng)式設(shè)計綜述

2.1 響應(yīng)式設(shè)計概念

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

2.2 Responsive Layout

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

3 響應(yīng)式框架比較研究

前端開發(fā)框架是指一組產(chǎn)品化的HTML、CSS、JavaScript組件。隨著響應(yīng)式設(shè)計的流行，響應(yīng)式前端框架的應(yīng)用也越來越廣泛。響應(yīng)式框架有許多，這里討論五個在github上排名靠前且深受歡迎的五個響應(yīng)式框架。每個框架都有自己的優(yōu)缺點和特定的應(yīng)用領(lǐng)域。大家可以根據(jù)特定項目的要求選擇適當(dāng)?shù)目蚣堋?/p>

3.1 Bootstrap

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

3.2 Foundation

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

3.3 Skeleton

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

3.4 Less Framework

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

3.5 ResponsiveAeon

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

4 Bootstrap框架研究與應(yīng)用

4.1 Bootstrap框架簡介

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

4.2 移動設(shè)備優(yōu)先

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

4.3 布局容器

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

4.4 流式柵格系統(tǒng)

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

5 結(jié)束語

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

參考文獻(xiàn)

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

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

[3]楊彬.淺談響應(yīng)式網(wǎng)頁設(shè)計[J].遼寧行政學(xué)院學(xué)報，2016（5）：161-161.

[4]張樹明.基于響應(yīng)式Web設(shè)計的網(wǎng)頁模板的設(shè)計與實現(xiàn)[J].計算機與現(xiàn)代化，2016，1（6）：125-127.