周萍+趙娜+李慕

摘要：Bootstrap是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的主要前端框架。分析了Bootstrap框架的全局CSS柵格系統(tǒng)容器及斷點(diǎn)設(shè)置對(duì)頁(yè)面布局自適應(yīng)能力的影響，并以此為基礎(chǔ)設(shè)計(jì)了能適應(yīng)多尺寸屏幕及分辨率的響應(yīng)式網(wǎng)站，實(shí)現(xiàn)了移動(dòng)端與 PC 端網(wǎng)頁(yè)顯示的一致性。

關(guān)鍵詞：Bootstrap框架；柵格系統(tǒng)；響應(yīng)式設(shè)計(jì)；HTML5；CSS3

DOIDOI：10.11907/rjdk.162838

中圖分類號(hào)：TP319

文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1672-7800（2017）006-0135-03

0 引言

響應(yīng)式Web設(shè)計(jì)是在開發(fā)和設(shè)計(jì)網(wǎng)站過程中產(chǎn)生的一種方式，它的目的是讓內(nèi)容布局能隨設(shè)備環(huán)境以及用戶行為的不同而變化。設(shè)計(jì)內(nèi)容包括流體柵格、彈性圖片、CSS media query（媒體查詢）的使用[1]。目前，用戶使用的設(shè)備環(huán)境主要包含屏幕尺寸、屏幕定向、系統(tǒng)平臺(tái)等。面對(duì)諸多設(shè)備環(huán)境需求，頁(yè)面都能自動(dòng)切換不同的分辨率以確保用戶體驗(yàn)。因此，響應(yīng)式Web設(shè)計(jì)能使網(wǎng)站兼容不同的設(shè)備環(huán)境。

Bootstrap是基于LESS的一套前端工具庫(kù)，其擁有一套完整的基礎(chǔ)CSS模塊、預(yù)定義樣式表等。其中，全局CSS柵格系統(tǒng)負(fù)責(zé)對(duì)不同尺寸、不同分辨率的顯示終端完成自適應(yīng)匹配，確保顯示內(nèi)容以整潔、流暢方式呈現(xiàn)給用戶。而CSS柵格系統(tǒng)中的容器及斷點(diǎn)設(shè)置是關(guān)鍵技術(shù)，兼容性好的設(shè)置對(duì)內(nèi)容顯示起到重要作用，能給用戶帶來良好體驗(yàn)。

1 柵格系統(tǒng)應(yīng)用

網(wǎng)頁(yè)設(shè)計(jì)中的柵格系統(tǒng)指網(wǎng)頁(yè)以規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁(yè)中的版面布局以及信息分布[2]。對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來說，柵格系統(tǒng)的使用不單使網(wǎng)頁(yè)更具可用性，還能讓網(wǎng)頁(yè)的信息呈現(xiàn)更加細(xì)致，前端開發(fā)網(wǎng)頁(yè)也更加靈活與規(guī)范[3]。

1.1 柵格系統(tǒng)設(shè)計(jì)原理

在柵格系統(tǒng)中，為了使網(wǎng)頁(yè)布局顯得整潔規(guī)范，往往將整個(gè)屏幕劃分成若干列，每列根據(jù)顯示內(nèi)容設(shè)置一定寬度。如圖1所示，flowline流線為顯示終端寬度，柵格系統(tǒng)則是將Web頁(yè)面靈活地分割成不同整數(shù)寬度的column列（頁(yè)面內(nèi)容區(qū)域），以適應(yīng)不同設(shè)備，利用gutter槽來分隔各個(gè)內(nèi)容區(qū)域，并添加margin外邊距使頁(yè)面整體與顯示終端兩側(cè)保持距離，使顯示內(nèi)容整潔、流暢。

通過解析柵格系統(tǒng)原理公式，可充分理解Web頁(yè)面布局與柵格系統(tǒng)之間的深層關(guān)系，使前端開發(fā)人員更加靈活運(yùn)用柵格系統(tǒng)來制作響應(yīng)式Web頁(yè)面。

1.2 Bootstrap中柵格系統(tǒng)應(yīng)用

Bootstrap的柵格系統(tǒng)基于網(wǎng)格系統(tǒng)發(fā)展而來[4]，應(yīng)用十分廣泛，如書籍版式設(shè)計(jì)[5]等。Bootstrap的柵格系統(tǒng)是一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，通過媒體查詢（media query）確認(rèn)當(dāng)前頁(yè)面容器（container）寬度，并通過內(nèi)置的響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)進(jìn)行渲染，使頁(yè)面在不同屏幕寬度范圍下使用不同的容器寬度。隨著屏幕設(shè)備或視口尺寸增加，系統(tǒng)會(huì)自動(dòng)分為最多12列[6]。

柵格系統(tǒng)應(yīng)用包含兩個(gè)要點(diǎn)，本文以某管理系統(tǒng)為例進(jìn)行說明。

（1）容器（container）、行（row）和列（column）之間的構(gòu)建關(guān)系。為了給柵格系統(tǒng)設(shè)置合適的排列（alignment）和內(nèi)補(bǔ)（padding），需將每一行“row”包含在一個(gè)容器中，該容器用class命名為“container（固定寬度）”或者“container-fluid（100% 寬度）”。

Bootstrap中的柵格系統(tǒng)將每一行分成12等份，其中，“row”代表行，“col-xx-y”代表列，而“col-xx-y”中的“xx”表示斷點(diǎn)類型，“y”值則從1-12中取。在不同的列中添加相應(yīng)頁(yè)面內(nèi)容，合理選擇列的y值，才能使頁(yè)面內(nèi)容更具可讀性。

（2）不同斷點(diǎn)類型的意義及其搭配。實(shí)際上Bootstrap的柵格布局系統(tǒng)主要是利用CSS的媒體查詢特性來實(shí)現(xiàn)[7]。在Bootstrap中定義了以xs、sm、md、lg來表示的4種不同閾值斷點(diǎn)類型[8]，如表1所示。

在視口寬度由小變大的過程中，column列會(huì)保持默認(rèn)的豎直堆疊，當(dāng)視口寬度超過sm的斷點(diǎn)值，sm斷點(diǎn)樣式生效，column列變?yōu)橐恍袃闪?；?dāng)視口寬度超過lg的斷點(diǎn)值，lg斷點(diǎn)的樣式生效，由于lg斷點(diǎn)的樣式代碼定義在sm斷點(diǎn)之后，所以lg斷點(diǎn)會(huì)覆蓋sm斷點(diǎn)樣式，column列變?yōu)橐恍兴牧?，如圖2所示。

2 響應(yīng)式Web設(shè)計(jì)案例

2.1 設(shè)計(jì)規(guī)劃

案例：某管理系統(tǒng)網(wǎng)站的外觀設(shè)計(jì)需要兼顧外在、內(nèi)在、前端和后臺(tái)需求。在本次主頁(yè)規(guī)劃中，將頁(yè)面元素歸納為頭部功能區(qū)、左側(cè)導(dǎo)航區(qū)、內(nèi)容區(qū)3 個(gè)部分，如圖 3所示。其中，頭部導(dǎo)航區(qū)包括系統(tǒng)名稱、功能列表等；內(nèi)容區(qū)由最新提醒、我的任務(wù)、最新訂單、工程進(jìn)度4 個(gè)模塊進(jìn)行展示；導(dǎo)航區(qū)則為簡(jiǎn)單的文字按鈕。

（1）頁(yè)面設(shè)計(jì)。目前仍有一些用戶使用非移動(dòng)端瀏覽網(wǎng)站，而響應(yīng)式Web設(shè)計(jì)原則是移動(dòng)設(shè)備優(yōu)先，該原則弱化了非移動(dòng)端用戶的視覺體驗(yàn)。結(jié)合實(shí)際環(huán)境，在某管理系統(tǒng)主頁(yè)上遵循優(yōu)先采用PC端設(shè)備、兼顧移動(dòng)端設(shè)備原則。

2.2 媒體查詢

媒體查詢部分主要適配電腦、手機(jī)和平板電腦。在Bootstrap框架自帶的 Less 文件中使用media query來創(chuàng)建斷點(diǎn)閾值，以此實(shí)現(xiàn)響應(yīng)式Web設(shè)計(jì)，實(shí)現(xiàn)代碼如下：

超小屏幕xs（< 768px），在 Bootstrap 中是默認(rèn)配置；

小屏幕sm（ ≥768px ），@ media （ min-width： @ screen-sm -min） { … } ；

中等屏幕md（ ≥992px ）， @ media （ min-width： @ screen- md-min） { … }；

大屏幕lg（ ≥1200px ）， @ media （ min-width： @ screen-lg- min） { … }

在實(shí)際網(wǎng)站開發(fā)過程中，開發(fā)者不需要花費(fèi)過多時(shí)間進(jìn)行編碼，只需要在相應(yīng)的位置插入正確的代碼即可。

2.3 柵格系統(tǒng)

根據(jù)響應(yīng)式Web設(shè)計(jì)理念，頁(yè)面元素都是向左浮動(dòng)的。當(dāng)一行無法容納某個(gè)頁(yè)面元素時(shí)，該元素將自動(dòng)在下一行靠左顯示。依據(jù)此規(guī)則，每個(gè)元素在頁(yè)面上都有合理的位置。使用 Bootstrap 框架的流式柵格系統(tǒng)，可以很好地實(shí)現(xiàn)響應(yīng)式Web設(shè)計(jì)的流式布局[8]。本案例應(yīng)用該原理代碼如下：

若為PC端顯示寬度大于1200px，此時(shí)由斷點(diǎn)類型col-md-2控制左側(cè)導(dǎo)航欄寬度。因頁(yè)面寬度較大，頁(yè)面右側(cè)內(nèi)容將以多行兩列橫向顯示；若PC端顯示寬度小于768px，此時(shí)由斷點(diǎn)類型col-sm-4來控制左側(cè)導(dǎo)航欄寬度，而頁(yè)面頂部的菜單欄因頁(yè)面寬度變小而隱藏，轉(zhuǎn)化成按鈕形式來實(shí)現(xiàn)功能展示，頁(yè)面右側(cè)內(nèi)容以單列多行呈堆疊方式顯示；若為移動(dòng)端顯示效果，此時(shí)由斷點(diǎn)類型col-xs-4來控制左側(cè)導(dǎo)航欄寬度。由于頁(yè)面寬度較小，頁(yè)面內(nèi)容縱向單列顯示。

通過定義class=“col-xs-4 col-sm-4 col-md-2”，多種斷點(diǎn)類型組合使用，使Web頁(yè)面效果不受屏幕分辨率影響。在不同的屏幕分辨率下，不同的column列的類會(huì)發(fā)揮相應(yīng)作用，以確保用戶體驗(yàn)，實(shí)現(xiàn)響應(yīng)式Web設(shè)計(jì)。

2.4 柵格系統(tǒng)在響應(yīng)式Web設(shè)計(jì)中的優(yōu)勢(shì)及問題

柵格系統(tǒng)在響應(yīng)式Web設(shè)計(jì)中有很多優(yōu)點(diǎn)：①代碼簡(jiǎn)潔、易懂，非前端開發(fā)人員也能快速掌握；②使用柵格系統(tǒng)可以節(jié)省網(wǎng)站開發(fā)與維護(hù)成本；③提升網(wǎng)頁(yè)書寫規(guī)范性。

柵格系統(tǒng)并非完美，有以下缺陷需要優(yōu)化：①類名命名沒有語(yǔ)義化，需要參考手冊(cè)；②對(duì)IE瀏覽器的兼容性有待改善。

3 結(jié)語(yǔ)

Bootstrap框架通過主動(dòng)查詢?cè)O(shè)備頁(yè)面容器寬度來構(gòu)建適應(yīng)不同屏幕分辨率的響應(yīng)式Web網(wǎng)頁(yè)，擁有較好的用戶體驗(yàn)。但過度依賴HTML添加class來增加表現(xiàn)力，違背了內(nèi)容與表現(xiàn)分離的原則，而且class的命名語(yǔ)義化尚顯不足。因此，Bootstrap對(duì)于快速開發(fā)很有幫助，但對(duì)于網(wǎng)頁(yè)個(gè)性化設(shè)計(jì)則還需改進(jìn)。

參考文獻(xiàn)：

[1]MARCOTTE E.Responsive Web design[M].Happy Cog，2011.

[2]吳智君，丘昊.淺析網(wǎng)格系統(tǒng)在網(wǎng)頁(yè)設(shè)計(jì)中的重要性[J].計(jì)算機(jī)光盤軟件與應(yīng)用，2010（5）：37-38.

[3]曾祥利，柴煒嘉.響應(yīng)式布局中柵格系統(tǒng)和彈性盒子的比較[J].產(chǎn)業(yè)與科技論壇，2015（20）：62-65.

[4]趙蓉.淺談書籍版式設(shè)計(jì)中網(wǎng)格系統(tǒng)手法的使用[D].石家莊： 河北科技大學(xué)，2014.

[5]高榕嶺.Bootstrap在前端開發(fā)中的優(yōu)勢(shì)[J].計(jì)算機(jī)光盤軟件與應(yīng)用，2015（1）：74-75.

[6]Bootstrap Expo[EB/OL].[2014-06-06].http：//expo.getbootstrap.com/.

[7]賈英霞.淺談Bootstrap制作響應(yīng)式網(wǎng)站布局[J].福建電腦，2015（8）：122-123.

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

（責(zé)任編輯：杜能鋼）