基于Bootstrap的农业监控系统响应式网页设计与实现

沈晶晶+张伟

摘 要：随着移动设备的快速发展，多终端逐渐被普及到多个领域。在为终端设备渲染页面的同时，不仅要兼容传统页面布局，还要达到响应式效果。Bootstrap以其美观的界面和良好的自适应功能被广泛使用。文中基于Bootstrap框架设计实现农业监控系统的响应式网页，让用户可以随时随地了解农作物的生长环境。

關键词：响应式网页；Bootstrap；农业监控；多终端

中图分类号：TP393 文献标识码：A 文章编号：2095-1302（2017）04-00-02

0 引 言

随着时代发展，新兴科技日新月异。为使多终端设备进行网页访问，网页设计不仅需要变得灵活，还要能适应渲染它们的各种媒介。Bootstrap[1]框架最大的优势是响应式布局，并且内置了多样化样式，可以快速应用于各种场景。智慧农业的迅速发展有效提高了作物质量，使得智慧农业炙手可热。而基于Bootstrap的农业监控系统的网页响应式设计与实现，可使用户方便管理农作物的生长环境。

1 现代农业的现状及存在问题

现代农业是一个广泛的概念，调整农业产业结构的同时转变农业产值增长方式是目前农业主要的发展方向。

农业监控系统是智慧农业的延伸，依托现代物联网技术，用户通过使用多终端设备就能方便获取并查看大棚内的作物数据信息。但农业监控系统在网页浏览的媒介上还存在欠缺，如通过不同的设备访问网页时会为用户带来不同的体验。因此，需要在界面设计和美观方面改善提升。

2 响应式网页设计与实现

针对以上问题，可以使用易推广的技术来搭建农业监控系统。计算机是用户Web浏览的主要媒介工具，在不断完善的前端标准下，渲染网页花样百出。而一种新的网页设计方式也出现了，在兼容传统固定排版样式的情况下，可使页面自适应不同设备。

2.1 网页设计

网页一般分为固定排版样式和响应式网页。传统固定式网页并不能满足现代多设备浏览的用户需求，因此伊桑·马科特（Ethan Marcotte）[2]提出了响应式网页设计。并结合已有的开发技巧，如媒体查询等，将其命名为响应式网页设计。

Bootstrap主要基于LESS框架[3]构建CSS样式。其具有灵活的响应式栅格系统、丰富的组件及定制样式等优点[1]。但Bootstrap通常需要结合移动设备和最新的浏览器才能渲染出效果，因此在传统浏览器上显示时可能会得到不同的效果。例如Chrome浏览器支持Bootstrap，但IE浏览器则在兼容性上略差。在设计响应式网页时，一般都采用移动设备优先、栅格页面布局、内联样式等策略，这样设计的网页才具有自适应特性。

2.2 网页实现

传统页面布局主要由导航栏、页脚、主内容、左右侧边栏构成，具体如图1所示。

以农业监控系统网页为例，可以看出整个页面的信息量并不大，同时可利用导航栏减少页面切换，因此很多传统网页都使用类似经典设计。但现代互联网发展迅速，数据量大，容易造成页面拥挤、结构复杂、操作不便等问题，不利于用户体验。

运用百分比来设定元素的宽度是设计响应式的基础。常见的设计如瀑布流设计，这种设计方式将各元素垂直排列分布，提高了用户体验。而作为响应式页面，则应适应不同尺寸和类型的屏幕，以展示出最好效果。在满足传统手机Web页面需求的同时，运用Bootstrap框架调整页面，如图2所示。

此时运用Bootstrap自身优点，将导航栏移动至页面最顶端，而将内容区域置于中间，两边分别为左右侧边栏，底部为页脚。这样设计可充分利用框架特点，自适应浏览器页面。

3 多终端设备测试

响应式是自适应不同的应用场景，但在内容上保持一致的设计方式。将分别在PC终端和移动端进行测试。

3.1 PC端测试

现在浏览器呈多样化，且网页渲染效果与浏览器内核有关。文中选择 Trident、Gecko、Blink以及WebKit内核在Windows系统上进行测试。由于IE浏览器兼容性不好，且对Bootstrap不支持，故不选择IE浏览器。1 280×780和1440×900的效果图分别如图3、图4所示。

3.2 移动端测试

由于移动端设备的多样化，需要在不同设备上进行测试。为此，文中选用Chrome调试模式模拟移动设备进行测试，效果如图5和图6所示。可以看到网页在移动设备上显示时，导航栏隐藏了，页面也呈垂直结构。

通过以上测试可知，所有设计效果和功能都能正常显示并应用。

4 结 语

根据不同测试结果分析可知，由于只设计了大屏和手机显示两种情况，并且在页头部分使用的元素相对较多，使得浏览器兼容性还存在欠缺，此时便依赖媒体查询来进一步自适应屏幕大小。另一方面，浏览器的快速更新使得响应式问题逐步得到解决。总体来看， 虽然响应式网页还存在一些不足，但网页可自适应并美观这一目标已经达到，大大提高了用户对系统的操作体验。

参考文献

[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框架的响应式网页设计与实现[J].北京印刷学院学报，2016，24（2）：47-52.

[5]王少华.基于Bootstrap的响应式网页设计与实现——以i-太极网站主页为例[J].宁波广播电视大学学报，2016（3）：119-122.

[6]徐卫红.基于Bootstrap框架的响应式网页设计与实现——以电大《网页设计与制作》网络课程为例[J].江西广播电视大学学报，2016，18（4）：92-96.

[7]陈员义，李艺志.基于Bootstrap响应式Web前端研究[J].福建电脑，2015（12）：72-73.

[8]斯珀洛克.Bootstrap用户手册设计响应式网站[M].北京：人民邮电出版社，2013.