Bootstrap框架在響應式Web設計中的應用

周萍+趙娜+李慕

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

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

DOIDOI：10.11907/rjdk.162838

中圖分類號：TP319

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

0 引言

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

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

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

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

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

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

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

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

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

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

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

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

（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設計案例

2.1 設計規(guī)劃

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

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

2.2 媒體查詢

媒體查詢部分主要適配電腦、手機和平板電腦。在Bootstrap框架自帶的 Less 文件中使用media query來創(chuàng)建斷點閾值，以此實現(xiàn)響應式Web設計，實現(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） { … }

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

2.3 柵格系統(tǒng)

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

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

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

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

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

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

3 結語

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

參考文獻：

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

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

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

[4]趙蓉.淺談書籍版式設計中網格系統(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制作響應式網站布局[J].福建電腦，2015（8）：122-123.

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

（責任編輯：杜能鋼）