基于Bootstrap的農(nóng)業(yè)監(jiān)控系統(tǒng)響應(yīng)式網(wǎng)頁設(shè)計與實現(xiàn)

沈晶晶+張偉

摘 要：隨著移動設(shè)備的快速發(fā)展，多終端逐漸被普及到多個領(lǐng)域。在為終端設(shè)備渲染頁面的同時，不僅要兼容傳統(tǒng)頁面布局，還要達到響應(yīng)式效果。Bootstrap以其美觀的界面和良好的自適應(yīng)功能被廣泛使用。文中基于Bootstrap框架設(shè)計實現(xiàn)農(nóng)業(yè)監(jiān)控系統(tǒng)的響應(yīng)式網(wǎng)頁，讓用戶可以隨時隨地了解農(nóng)作物的生長環(huán)境。

關(guān)鍵詞：響應(yīng)式網(wǎng)頁；Bootstrap；農(nóng)業(yè)監(jiān)控；多終端

中圖分類號：TP393 文獻標識碼：A 文章編號：2095-1302（2017）04-00-02

0 引 言

隨著時代發(fā)展，新興科技日新月異。為使多終端設(shè)備進行網(wǎng)頁訪問，網(wǎng)頁設(shè)計不僅需要變得靈活，還要能適應(yīng)渲染它們的各種媒介。Bootstrap[1]框架最大的優(yōu)勢是響應(yīng)式布局，并且內(nèi)置了多樣化樣式，可以快速應(yīng)用于各種場景。智慧農(nóng)業(yè)的迅速發(fā)展有效提高了作物質(zhì)量，使得智慧農(nóng)業(yè)炙手可熱。而基于Bootstrap的農(nóng)業(yè)監(jiān)控系統(tǒng)的網(wǎng)頁響應(yīng)式設(shè)計與實現(xiàn)，可使用戶方便管理農(nóng)作物的生長環(huán)境。

1 現(xiàn)代農(nóng)業(yè)的現(xiàn)狀及存在問題

現(xiàn)代農(nóng)業(yè)是一個廣泛的概念，調(diào)整農(nóng)業(yè)產(chǎn)業(yè)結(jié)構(gòu)的同時轉(zhuǎn)變農(nóng)業(yè)產(chǎn)值增長方式是目前農(nóng)業(yè)主要的發(fā)展方向。

農(nóng)業(yè)監(jiān)控系統(tǒng)是智慧農(nóng)業(yè)的延伸，依托現(xiàn)代物聯(lián)網(wǎng)技術(shù)，用戶通過使用多終端設(shè)備就能方便獲取并查看大棚內(nèi)的作物數(shù)據(jù)信息。但農(nóng)業(yè)監(jiān)控系統(tǒng)在網(wǎng)頁瀏覽的媒介上還存在欠缺，如通過不同的設(shè)備訪問網(wǎng)頁時會為用戶帶來不同的體驗。因此，需要在界面設(shè)計和美觀方面改善提升。

2 響應(yīng)式網(wǎng)頁設(shè)計與實現(xiàn)

針對以上問題，可以使用易推廣的技術(shù)來搭建農(nóng)業(yè)監(jiān)控系統(tǒng)。計算機是用戶Web瀏覽的主要媒介工具，在不斷完善的前端標準下，渲染網(wǎng)頁花樣百出。而一種新的網(wǎng)頁設(shè)計方式也出現(xiàn)了，在兼容傳統(tǒng)固定排版樣式的情況下，可使頁面自適應(yīng)不同設(shè)備。

2.1 網(wǎng)頁設(shè)計

網(wǎng)頁一般分為固定排版樣式和響應(yīng)式網(wǎng)頁。傳統(tǒng)固定式網(wǎng)頁并不能滿足現(xiàn)代多設(shè)備瀏覽的用戶需求，因此伊?！ゑR科特（Ethan Marcotte）[2]提出了響應(yīng)式網(wǎng)頁設(shè)計。并結(jié)合已有的開發(fā)技巧，如媒體查詢等，將其命名為響應(yīng)式網(wǎng)頁設(shè)計。

Bootstrap主要基于LESS框架[3]構(gòu)建CSS樣式。其具有靈活的響應(yīng)式柵格系統(tǒng)、豐富的組件及定制樣式等優(yōu)點[1]。但Bootstrap通常需要結(jié)合移動設(shè)備和最新的瀏覽器才能渲染出效果，因此在傳統(tǒng)瀏覽器上顯示時可能會得到不同的效果。例如Chrome瀏覽器支持Bootstrap，但IE瀏覽器則在兼容性上略差。在設(shè)計響應(yīng)式網(wǎng)頁時，一般都采用移動設(shè)備優(yōu)先、柵格頁面布局、內(nèi)聯(lián)樣式等策略，這樣設(shè)計的網(wǎng)頁才具有自適應(yīng)特性。

2.2 網(wǎng)頁實現(xiàn)

傳統(tǒng)頁面布局主要由導航欄、頁腳、主內(nèi)容、左右側(cè)邊欄構(gòu)成，具體如圖1所示。

以農(nóng)業(yè)監(jiān)控系統(tǒng)網(wǎng)頁為例，可以看出整個頁面的信息量并不大，同時可利用導航欄減少頁面切換，因此很多傳統(tǒng)網(wǎng)頁都使用類似經(jīng)典設(shè)計。但現(xiàn)代互聯(lián)網(wǎng)發(fā)展迅速，數(shù)據(jù)量大，容易造成頁面擁擠、結(jié)構(gòu)復雜、操作不便等問題，不利于用戶體驗。

運用百分比來設(shè)定元素的寬度是設(shè)計響應(yīng)式的基礎(chǔ)。常見的設(shè)計如瀑布流設(shè)計，這種設(shè)計方式將各元素垂直排列分布，提高了用戶體驗。而作為響應(yīng)式頁面，則應(yīng)適應(yīng)不同尺寸和類型的屏幕，以展示出最好效果。在滿足傳統(tǒng)手機Web頁面需求的同時，運用Bootstrap框架調(diào)整頁面，如圖2所示。

此時運用Bootstrap自身優(yōu)點，將導航欄移動至頁面最頂端，而將內(nèi)容區(qū)域置于中間，兩邊分別為左右側(cè)邊欄，底部為頁腳。這樣設(shè)計可充分利用框架特點，自適應(yīng)瀏覽器頁面。

3 多終端設(shè)備測試

響應(yīng)式是自適應(yīng)不同的應(yīng)用場景，但在內(nèi)容上保持一致的設(shè)計方式。將分別在PC終端和移動端進行測試。

3.1 PC端測試

現(xiàn)在瀏覽器呈多樣化，且網(wǎng)頁渲染效果與瀏覽器內(nèi)核有關(guān)。文中選擇 Trident、Gecko、Blink以及WebKit內(nèi)核在Windows系統(tǒng)上進行測試。由于IE瀏覽器兼容性不好，且對Bootstrap不支持，故不選擇IE瀏覽器。1 280×780和1440×900的效果圖分別如圖3、圖4所示。

3.2 移動端測試

由于移動端設(shè)備的多樣化，需要在不同設(shè)備上進行測試。為此，文中選用Chrome調(diào)試模式模擬移動設(shè)備進行測試，效果如圖5和圖6所示。可以看到網(wǎng)頁在移動設(shè)備上顯示時，導航欄隱藏了，頁面也呈垂直結(jié)構(gòu)。

通過以上測試可知，所有設(shè)計效果和功能都能正常顯示并應(yīng)用。

4 結(jié) 語

根據(jù)不同測試結(jié)果分析可知，由于只設(shè)計了大屏和手機顯示兩種情況，并且在頁頭部分使用的元素相對較多，使得瀏覽器兼容性還存在欠缺，此時便依賴媒體查詢來進一步自適應(yīng)屏幕大小。另一方面，瀏覽器的快速更新使得響應(yīng)式問題逐步得到解決。總體來看， 雖然響應(yīng)式網(wǎng)頁還存在一些不足，但網(wǎng)頁可自適應(yīng)并美觀這一目標已經(jīng)達到，大大提高了用戶對系統(tǒng)的操作體驗。

參考文獻

[1] Bootstrap[EB/OL].[2013-08-15]. http：//www.bootcss.com/

[2] Responsive Web Design[EB/OL].[2014-06-06].http：//alistapart.com/article/responsive-web-design.

[3] LESS CSS [EB/OL].[2014-06-06]. http：//www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/

[4]舒后，熊一帆，葛雪嬌.基于Bootstrap框架的響應(yīng)式網(wǎng)頁設(shè)計與實現(xiàn)[J].北京印刷學院學報，2016，24（2）：47-52.

[5]王少華.基于Bootstrap的響應(yīng)式網(wǎng)頁設(shè)計與實現(xiàn)——以i-太極網(wǎng)站主頁為例[J].寧波廣播電視大學學報，2016（3）：119-122.

[6]徐衛(wèi)紅.基于Bootstrap框架的響應(yīng)式網(wǎng)頁設(shè)計與實現(xiàn)——以電大《網(wǎng)頁設(shè)計與制作》網(wǎng)絡(luò)課程為例[J].江西廣播電視大學學報，2016，18（4）：92-96.

[7]陳員義，李藝志.基于Bootstrap響應(yīng)式Web前端研究[J].福建電腦，2015（12）：72-73.

[8]斯珀洛克.Bootstrap用戶手冊設(shè)計響應(yīng)式網(wǎng)站[M].北京：人民郵電出版社，2013.