周萍+趙娜+李慕

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

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

DOIDOI：10.11907/rjdk.162838

中圖分類號：TP319

文獻標識碼：A 文章編號：1672-7800（2017）006-0135-03

0 引言

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

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

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

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

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

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

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

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

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

柵格系統(tǒng)應用包含兩個要點，本文以某管理系統(tǒng)為例進行說明。

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

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

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

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

2 響應式Web設(shè)計案例

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

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

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

2.2 媒體查詢

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

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

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

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

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

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

2.3 柵格系統(tǒng)

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

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

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

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

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

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

3 結(jié)語

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

參考文獻：

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

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

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

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

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

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

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

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

（責任編輯：杜能鋼）