楊凱華，劉 勇

（甘肅省科學(xué)技術(shù)情報(bào)研究所，甘肅 蘭州 730000）

得益于互聯(lián)網(wǎng)技術(shù)及信息技術(shù)的高速發(fā)展，各類智能終端產(chǎn)品的更新速率大幅度提升，在功能及使用便捷性上也變得全面多樣，5G網(wǎng)絡(luò)的大面積覆蓋更是使得人們?cè)桨l(fā)習(xí)慣于直接使用手機(jī)上網(wǎng)。然而目前手機(jī)屏幕的規(guī)格并不統(tǒng)一，因此不同尺寸及分辨率下瀏覽網(wǎng)頁，產(chǎn)生的視覺效果也不盡相同，這就意味著網(wǎng)頁上的資訊與圖片內(nèi)容需要能夠按照手機(jī)屏幕尺寸自動(dòng)適配，來為用戶提供更好的使用體驗(yàn)。關(guān)于如何使網(wǎng)頁在不同尺寸規(guī)格的手機(jī)屏幕上均能得到完美呈現(xiàn)，最初是由設(shè)計(jì)者結(jié)合各種尺寸進(jìn)行設(shè)計(jì)及調(diào)整，然而隨著終端尺寸規(guī)格的持續(xù)演化，這種做法勢(shì)必造成龐大的工作量及極其繁瑣的維護(hù)工作，因此需要應(yīng)用Bootstrap框架來解決能與手機(jī)屏幕規(guī)格自適配的響應(yīng)式網(wǎng)頁這一問題。

1 Bootstrap框架的功能特性

Bootstrap框架含有一整套直觀的網(wǎng)頁設(shè)計(jì)工具包，是一種基于HTML、CSS、JavaScript形成的框架，而除了工具包之外其框架中還囊括大量的通用UI組件、柵格系統(tǒng)及插件等，因此該框架能夠?yàn)榫W(wǎng)頁開發(fā)提供完備的功能支持，同樣也是因?yàn)檫@個(gè)原因，Bootstrap框架從出現(xiàn)之后就受到廣泛歡迎。目前的Bootstrap框架表現(xiàn)出以下幾方面特性。

（1）具有完整的基礎(chǔ)CSS插件。

（2）具有豐富的預(yù)定義樣式表。

（3）擁有一組基于jQuery的JavaScript插件集合。

（4）擁有一個(gè)非常靈活的響應(yīng)式柵格系統(tǒng)，同時(shí)還能為移動(dòng)設(shè)備提供高優(yōu)先級(jí)功能支持。

Bootstrap框架的豐富組件囊括了網(wǎng)頁開發(fā)所必備的各項(xiàng)基礎(chǔ)元素，能夠直接搭建起一個(gè)未經(jīng)美化但擁有完備功能的網(wǎng)站，且各類功能均具有高水準(zhǔn)的精細(xì)化程度。Bootstrap框架下的所有組件修改難度也相對(duì)較低，僅通過對(duì)變量的調(diào)整就能形成自身的風(fēng)格。由于該框架是基于移動(dòng)設(shè)備有限，因此在框架內(nèi)核中融入了移動(dòng)設(shè)備友好的理念，這就意味著基于Bootstrap框架開發(fā)的網(wǎng)頁會(huì)根據(jù)手機(jī)屏幕的尺寸自行調(diào)整網(wǎng)頁大小，并通過禁用相關(guān)程序控制/關(guān)閉縮放功能，為用戶提供更具沉浸感的使用體驗(yàn)。

此外Bootstrap框架還配備了對(duì)應(yīng)的流式柵格系統(tǒng)，這是一套具有響應(yīng)式功能并以移動(dòng)設(shè)備為優(yōu)先的流式柵格系統(tǒng)，最多可滿足12列內(nèi)容的呈現(xiàn)需求，且可隨屏幕或視口尺寸變化進(jìn)行自適配。在具體的內(nèi)容上，該柵格系統(tǒng)包含了易于使用的預(yù)定義類及附屬功能模塊，由此帶來的優(yōu)勢(shì)是該系統(tǒng)可進(jìn)一步詮釋具體語義內(nèi)容，并在詮釋的基礎(chǔ)上形成對(duì)應(yīng)的布局。該柵格系統(tǒng)的頁面創(chuàng)建是通過一系列行（row）、列（column）的規(guī)范性組合完成的，由于布局已經(jīng)預(yù)先創(chuàng)建完成，因此設(shè)計(jì)者僅需要填入具體的網(wǎng)頁內(nèi)容即可。但需要注意的是，“行”必須包含在固定寬度或100%寬度中，以保證排列及內(nèi)補(bǔ)的規(guī)范性，因此通常會(huì)在“行”的水平方向創(chuàng)建一組“列”，而網(wǎng)頁中的具體內(nèi)容則置放在“列”中，并通過指定具體的值（1～12）來確定其跨越范圍，一旦超過指定值，則多出來的“列”會(huì)另起一行自行排列。

2 響應(yīng)式網(wǎng)頁設(shè)計(jì)的概念及設(shè)計(jì)要求

響應(yīng)式網(wǎng)頁的概念由伊?！ゑR克特提出，指的是可根據(jù)終端屏幕尺寸實(shí)現(xiàn)網(wǎng)頁版面結(jié)構(gòu)、內(nèi)容、元素規(guī)格樣式的自適配，其開發(fā)技術(shù)優(yōu)勢(shì)集中體現(xiàn)在模塊化設(shè)計(jì)及更低的代碼重組難度，意味著不需要再針對(duì)屏幕尺寸編寫同樣的網(wǎng)頁內(nèi)容，進(jìn)而顯著減少開發(fā)所需的時(shí)間、精力及成本，且能夠使網(wǎng)頁適應(yīng)不同設(shè)備的不同尺寸屏幕。這意味著以相應(yīng)技術(shù)開發(fā)出的響應(yīng)式網(wǎng)頁能夠同時(shí)支持不同類型及規(guī)格終端的支持。

在響應(yīng)式網(wǎng)頁的概念出現(xiàn)之前，傳統(tǒng)網(wǎng)頁在表現(xiàn)形式上是固定的，已經(jīng)確定好的網(wǎng)頁內(nèi)容不會(huì)結(jié)合外部狀況自行調(diào)整，這就導(dǎo)致網(wǎng)頁的呈現(xiàn)效果存在很強(qiáng)局限性。響應(yīng)式網(wǎng)頁的出現(xiàn)就很好地解決了這一問題，這類型網(wǎng)頁在設(shè)計(jì)時(shí)應(yīng)用了流線型設(shè)計(jì)理念，主要是按百分比控制網(wǎng)頁中不同元素的寬度，因此在便攜式終端上的呈現(xiàn)多表現(xiàn)出瀑布狀的特征：所有元素會(huì)自發(fā)按照豎直方向進(jìn)行分配排列，并通過自動(dòng)調(diào)整比例獲取最佳的展示效果。響應(yīng)式網(wǎng)頁的概念很好地滿足了移動(dòng)用戶的瀏覽需求，其導(dǎo)航條被設(shè)計(jì)在更便于操作的位置，標(biāo)題則被插入網(wǎng)頁內(nèi)容區(qū)域，通過合理的比例調(diào)整，使得網(wǎng)頁在縱向呈現(xiàn)時(shí)能夠布滿屏幕，但又不會(huì)顯得擁擠。

3 基于Bootstrap框架的響應(yīng)式網(wǎng)頁設(shè)計(jì)實(shí)現(xiàn)要求與方法

3.1 Bootstrap框架下響應(yīng)式網(wǎng)頁的基礎(chǔ)設(shè)計(jì)要求實(shí)現(xiàn)

以某官網(wǎng)為例，該單位已擁有只在電腦端顯示的網(wǎng)站，需要以此為藍(lán)本設(shè)計(jì)用于可同時(shí)兼容手機(jī)訪問的網(wǎng)站。單位對(duì)網(wǎng)站的外在、內(nèi)在、前端及后端均有相應(yīng)要求，結(jié)合其各方面需求來看，響應(yīng)式網(wǎng)頁設(shè)計(jì)能夠完美契合其網(wǎng)站設(shè)計(jì)需求。在網(wǎng)頁設(shè)計(jì)規(guī)劃中首先仔細(xì)查閱了該單位原本的網(wǎng)站，刪除了該企業(yè)原本網(wǎng)站中多余的呈現(xiàn)元素（兩側(cè)的滾動(dòng)廣告、功能區(qū)的留白等），重新對(duì)不同功能分區(qū)模塊的呈現(xiàn)比重進(jìn)行設(shè)計(jì)改良，并優(yōu)化了網(wǎng)頁內(nèi)容在手機(jī)屏幕上的分布狀況。

考慮到響應(yīng)式網(wǎng)頁的設(shè)計(jì)需遵循移動(dòng)終端優(yōu)先的原則，在網(wǎng)頁呈現(xiàn)時(shí)采用了縱向呈現(xiàn)策略，并以此為基礎(chǔ)調(diào)整不同功能區(qū)在手機(jī)屏幕上的分布狀況，后續(xù)設(shè)計(jì)中進(jìn)行了溝通并加以調(diào)整，網(wǎng)站中的大圖采取淡化形式以背景呈現(xiàn)，增加有效互動(dòng)內(nèi)容在屏幕中的利用率；此外企業(yè)對(duì)功能內(nèi)容設(shè)計(jì)的模塊同樣存有其他看法，希望不同功能區(qū)塊中能夠呈現(xiàn)出該分支下的優(yōu)秀資訊內(nèi)容，采用縱向分布的策略，由單一模塊占據(jù)大部分屏幕集中呈現(xiàn)，但每一模塊在縱向長度上加以控制，僅呈現(xiàn)5～7條優(yōu)秀內(nèi)容，繼續(xù)上劃可進(jìn)入下一模塊，在與企業(yè)深入交流最終達(dá)成一致結(jié)果的呈現(xiàn)內(nèi)容如圖1所示。

圖1 該企業(yè)手機(jī)端網(wǎng)頁最終設(shè)計(jì)稿

后續(xù)執(zhí)行的HTML結(jié)構(gòu)設(shè)計(jì)中應(yīng)用了Bootstrap框架，為了應(yīng)用響應(yīng)式網(wǎng)頁設(shè)計(jì)，首先需要?jiǎng)?chuàng)建一個(gè)CSS，以適應(yīng)各種設(shè)備大小的樣式。一旦頁面在特定的設(shè)備上加載，該頁面上使用了各種字體和 Web 開發(fā)技術(shù)，比如媒體查詢。在這種情況下會(huì)以明確設(shè)備視口大小為基礎(chǔ)，在此基礎(chǔ)上根據(jù)設(shè)備要求加載特定的樣式。由于Bootstrap框架中應(yīng)用了為數(shù)眾多的HTML5屬性及CSS3樣式，因此基于響應(yīng)式網(wǎng)頁與Bootstrap框架標(biāo)準(zhǔn)制作的頁面布局結(jié)構(gòu)對(duì)應(yīng)部分代碼如下（并在網(wǎng)站所有頁面設(shè)計(jì)中參考了如下代碼進(jìn)行格式設(shè)計(jì)）：

＜!DOCTYPE html＞

＜html＞

＜head＞

＜meta charset="utf-8"＞

＜title＞＜/title＞

＜link rel="stylesheet" href="css/bootstrap.css"＞

＜/head＞

＜body＞

＜/body＞

＜/html＞

3.2 響應(yīng)式網(wǎng)頁設(shè)計(jì)中移動(dòng)設(shè)備優(yōu)先準(zhǔn)則的實(shí)現(xiàn)

出于優(yōu)化工作效率的考量，在Bootstrap2中是通過針對(duì)關(guān)鍵內(nèi)容進(jìn)行添加移動(dòng)設(shè)備友好樣式實(shí)現(xiàn)的，之后出現(xiàn)的Bootstrap3則對(duì)整個(gè)框架進(jìn)行了重寫處理，使之能夠在一開始就為移動(dòng)設(shè)備提供強(qiáng)有力的支持，并使這種對(duì)移動(dòng)設(shè)備友好的理念完全滲透到框架內(nèi)核中，因此突破了部分僅針對(duì)移動(dòng)設(shè)備加以優(yōu)化的樣式局限。但以此為基礎(chǔ)進(jìn)行的網(wǎng)頁調(diào)整整體基于縮放，因此可能出現(xiàn)文字縮放比例過小導(dǎo)致閱讀困難，影響用戶的訪問體驗(yàn)。為解決這一問題，需要通過設(shè)置meta標(biāo)簽的viewport屬性控制縮放程度，以便手機(jī)在加載過程中能盡量以原始比例呈現(xiàn)網(wǎng)頁內(nèi)容，這一功能同樣是可逆的，且可從手機(jī)的瀏覽器中進(jìn)行操作，原理是將視口（viewport）設(shè)置meta屬性為user-saclable=no，來實(shí)現(xiàn)縮放功能的禁用，完成禁用之后用戶只需要滾動(dòng)屏幕，就可在訪問網(wǎng)頁過程中獲得高度接近原生應(yīng)用的訪問體驗(yàn)。

另外需要重視的是，以上功能的實(shí)現(xiàn)會(huì)涉及到布局容器，Bootstrap框架下的容器名為.container，能實(shí)現(xiàn)對(duì)網(wǎng)頁頁面內(nèi)容及柵格系統(tǒng)的兼容，而Bootstrap為該容器提供了.container類與.container-fluid類兩種類型，但這兩種容器不支持彼此的相互嵌套。其中.container類容器常用于固定頁面寬度及為響應(yīng)式布局提供支持。

3.3 響應(yīng)式網(wǎng)頁設(shè)計(jì)媒體查詢功能的實(shí)現(xiàn)

媒體查詢?cè)陧憫?yīng)式網(wǎng)頁設(shè)計(jì)中至關(guān)重要，一度被認(rèn)為是設(shè)計(jì)響應(yīng)式網(wǎng)頁的核心要素。通過在網(wǎng)頁中植入傳感器程序收集一段時(shí)間（兩個(gè)月）內(nèi)不同終端登錄該企業(yè)官網(wǎng)的終端類型信息，發(fā)現(xiàn)常用的終端包括平板、手機(jī)及電腦三種（頻次、數(shù)量按從多到少排列）。因此在該部分采用Less文件中媒體查詢以完成關(guān)鍵分界點(diǎn)閾值的創(chuàng)建。在應(yīng)用了Bootstrap框架的前提下，發(fā)現(xiàn)框架中對(duì)不同尺寸屏幕規(guī)格有如下定義：

超小屏幕手機(jī)設(shè)備（768 px以下）；

小屏幕平板設(shè)備（768～992 px）；

中等屏幕設(shè)備（992～1 200 px）；

大屏幕設(shè)備（1 200 px以上）。

不同規(guī)格尺寸屏幕在Bootstrap框架中的前綴分別為xs、sm、md、lg，且由于Bootstrap框架中將超小屏幕默認(rèn)為基礎(chǔ)配置，不需要額外設(shè)置媒體查詢代碼。

結(jié)合上述內(nèi)容來看，Bootstrap框架相比其他框架的優(yōu)勢(shì)，在于其框架中為響應(yīng)式網(wǎng)頁設(shè)計(jì)中的媒體查詢提供了對(duì)應(yīng)的查詢代碼片段及其他大量代碼片段，因此在應(yīng)用Bootstrap框架設(shè)計(jì)響應(yīng)式頁面布局時(shí)，開發(fā)者僅僅需要從框架中獲取合適的代碼直接插入即可，免去了重新根據(jù)不同屏幕調(diào)整編碼的時(shí)間及其他成本支出。

3.4 響應(yīng)式網(wǎng)頁設(shè)計(jì)的流式布局范式

流式布局是響應(yīng)式網(wǎng)頁設(shè)計(jì)中的關(guān)鍵內(nèi)容，也是直接影響網(wǎng)頁最終在不同終端呈現(xiàn)效果的核心元素。該種布局方式的優(yōu)勢(shì)在于使網(wǎng)頁中所有元素具有浮動(dòng)特征，這樣一來若屏幕寬度無法完全容納某一元素，整個(gè)元素將自行浮動(dòng)至頁面下方顯示（也可調(diào)整至其他位置），從而為用戶提供更理想的訪問體驗(yàn)。在網(wǎng)站設(shè)計(jì)中需要呈現(xiàn)出大量不同內(nèi)容及規(guī)格的圖片，這就意味著需要對(duì)這些圖片予以彈性圖片設(shè)計(jì)，并合理調(diào)整網(wǎng)頁中的布局結(jié)構(gòu)，以保障圖片的呈現(xiàn)效果及確保圖片呈現(xiàn)不會(huì)與其他內(nèi)容及網(wǎng)站整體呈現(xiàn)效果產(chǎn)生沖突。從這一點(diǎn)上來看，布局結(jié)構(gòu)直接影響到響應(yīng)式網(wǎng)頁設(shè)計(jì)是否能夠順利完成。

結(jié)合響應(yīng)式設(shè)計(jì)的設(shè)計(jì)理念來看，頁面設(shè)計(jì)完成后的整體布局會(huì)結(jié)合終端實(shí)際屏幕大小自適應(yīng)，其自適應(yīng)的內(nèi)容也包括圖片、字號(hào)及各類功能分區(qū)，因此可采用彈性化的設(shè)計(jì)策略，使最終成品能夠支持不同移動(dòng)設(shè)備的呈現(xiàn)需求。在此應(yīng)用流式布局能夠確保所有元素均得到合理的定位及布局，實(shí)際設(shè)計(jì)時(shí)則需要應(yīng)用Bootstrap框架下的流式柵格系統(tǒng)，以完成響應(yīng)式設(shè)計(jì)下流式布局的設(shè)計(jì)需求。

4 結(jié)語

基于Bootstrap框架設(shè)計(jì)的響應(yīng)式網(wǎng)頁在不同終端上均能夠呈現(xiàn)出理想的展示效果，并結(jié)合不同環(huán)境下用戶的使用功能需求及傾向調(diào)整頁面狀態(tài)與布局，甚至可以根據(jù)用戶設(shè)備內(nèi)配置的重力儀識(shí)別設(shè)備擺放方式，重新調(diào)整呈現(xiàn)策略。這就為網(wǎng)頁在不同設(shè)備上的呈現(xiàn)提供了完備的保障，有效免除了設(shè)計(jì)人員針對(duì)不同尺寸屏幕進(jìn)行的重復(fù)性網(wǎng)頁設(shè)計(jì)，在效率、資源、成本上均有著不俗的表現(xiàn)。