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

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

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

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

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

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

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

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

3.1 PC 端測(cè)試

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

3.2 移動(dòng)端測(cè)試

由于移動(dòng)端設(shè)備的多樣化，需要在不同設(shè)備上進(jìn)行測(cè)試。 為此，文中選用 Chrome 調(diào)試模式模擬移動(dòng)設(shè)備進(jìn)行測(cè)試，效 果如圖 5 和圖 6 所示?？梢钥吹骄W(wǎng)頁(yè)在移動(dòng)設(shè)備上顯示時(shí)，導(dǎo) 航欄隱藏了，頁(yè)面也呈垂直結(jié)構(gòu)。

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

 4 結(jié) 語(yǔ)

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