韩发 鹿方凯 张辉

摘要 为实现煤炭企业安全生产监测管理系统的网页在各种移动设备上兼容显示，保证用户体验性良好，提出一种基于Bootstrap框架的响应式网页设计技术，并通过实践分析Bootstrap核心要素及其核心要素在响应式网页设计中的优势。实践结果表明，基于Bootstrap框架设计的煤矿安全生产监测管理网站实现了PC端与移动端网页显示的一致性。

关键词关键词：煤矿安全监测;Bootstrap;HTML5;响应式;移动办公

DOIDOI：10.11907/rjdk.181104

中图分类号：TP319

文献标识码：A文章编号文章编号：16727800（2018）009012903

英文标题Design and Realization of Coalmine Safety Production Monitoring Management Website Based on BootStrap Technology

--副标题

英文作者HAN Fa， LU Fangkai， ZHANG Hui

英文作者单位（College of Computer Science and Engineering，Shandong University of Science and Technology，Qingdao 266590，China）

英文摘要Abstract：Responsive web design technology based on the bootstrap framework was presented to improve the safety of our country's coal production website monitoring and management system that can be displayed on a variety of mobile devices to ensure users of excellent experience.This web frontend development framework of Bootstrap is utilized in the design and construction of coalmine safety inspection websites，meanwhile we analyze the core elements of Bootstrap and its core elements in the design of responsive webpage.The practice illustrates that the coalmine safety production monitoring and management website based on Bootstrap framework achieves the consistency of PC and mobile webpage display.

英文关键词Key Words：coalmine safety monitoring; Bootstrap; HTML5; responsive; mobile office

0引言

随着互联网、智能手机及移动通信网络的迅速发展，用户越来越倾向于使用移动设备访问网站。由于用户对智能手机的习惯性依赖，传统PC端煤炭管理系统网站的设计已不能满足用户需求。移动端APP通过不断改进和完善，用户体验效果反馈良好，但是在开发时间、开发成本和后期维护上仍存在一定问题[1]。Web前端技术的应用虽然很大程度地解决了一些问题，但是移动端设备不断更新、类型也复杂多样，所以在页面设计、内容、互动、人性化方面，网页设计仍然存在一定问题[2]。

针对目前存在的问题，Frain等[3]提出可以根据视口大小改变页面布局，从整体上颠覆了当时的网页设计方法。目前，国内煤矿企业安全生产管理网站从针对PC端开发的系统网站到针对移动端APP都已不能很好满足企业和用户需求，主要因为针对PC端开发的系统网站已不能适应不断更新且浏览方式多样的移动端设备，用户体验效果差[4]。虽然移动端APP能很好地适应不断更新的各式移动端，但是需要单独开发一套程序，开发时间长，开发成本及后期维护费用高[5]。针对以上问题，本文通过利用响应式Web开发技术，使页面能自适应地随浏览设备屏幕的尺寸而改变大小，动态调整整体布局、元素样式规格，并将内容显示给不同类型设备的用户，同时也能更好地进行代码重构，不需要为各式移动端开发不同版本，节约开发时间和成本，即开发一套兼顾PC端及不同尺寸屏幕的移动设备的程序，同时兼顾响应式系统网站的开发资金、技术、时间等因素，体现了煤矿企业响应式转型的过程。

1响应式Web设计

1.1响应式Web设计理念

响应式网站设计（Responsive Web Design）的理念[6]是：页面设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对响应和调整。不论用户使用何种类型移动端或PC端，页面布局、图片大小及脚本功能等都能自动切换以适应不同设备，即页面能自适应用户的设备类型。响应式Web页面设计规避了移动端屏幕尺寸大小及操作系统的差异，使Web程序适应多类移动终端和PC端，具有操作系统平台的无关性、兼容性等特点，不必对不同版本进场专门设计、开发及维护。

1.2响应式web设计核心技术

响应式Web设计采用 HTML5+CSS+JavaScript模式。HTML5是万维网核心语言、标准通用标记语言的应用超文本标记语言 ，CSS是层叠样式表（Cascading Style Sheets），是表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素格式化，同时还能对网页元素位置的排版进行像素级精确控制，支持几乎所有字体、字号样式，拥有对网页对象和模型样式编辑的能力。响应式Web设计整合了媒體查询、弹性视觉媒体和流动布局[7]，媒体查询实现根据设备特性分级控制页面布局，使页面在不同终端设备中达到不同渲染效果，弹性视觉媒体按照特定布局进行动态调整，使用流动布局创建可缩放、可流动的弹性版式，三者构成了响应式设计的核心技术。

1.3Bootstrap2.0响应式Web设计前端框架

对Bootstrap2.0框架进行功能划分，主要分为框架（Scaffolding）、基础CSS、构件库和jQuery插件库。

Scaffolding主要提供基于网格的各种布局，包括普通网格系统、嵌入式网格、固定布局、自适应布局，同时可自定义网格和布局。Bootstrap2.0提供响应式设计，通过单个文件支持各种手持设备，自适应不同设备和屏幕变化。

基础CSS包括各种排版样式（标题、段落、引用块、列表、内联标签等），代码展示提供了基于code标签的内嵌代码，基于pre的块代码和基于Google Prettify的代码样式，同时提供各种表格、表单、按钮、图标的展示方式。

构件库提供了基于按钮、导航、标签、排版、警告、进度栏、图像网格等控件。

jQuery插件库提供十几种插件实现动态效果，例如Modal、Dropdown、Tab、Tooltip、Popover、Carousel等，开发者可根据业务需求使用不同插件实现各种动态效果。

2基于Bootstrap响应式设计的煤炭安全生产监测管理网站实施

2.1响应式Web设计与煤炭安全生产检测的移动办公

互联网及智能手机的迅速發展，为煤炭企业安全生产管理开拓了新的发展方向。不管是APP服务还是为适应不同设备类型开发的至少两套以上的页面，都需要单独开发应用程序，开发成本高，后期维护困难。为此，Bootstrap响应式设计一套程序代码可以适用于多种移动终端及PC端，在煤矿企业中发挥着越来越重要的作用。建立煤炭安全监测管理系统网站有助于矿井管理层人员发挥随时随地快速、准确、直观、系统地得到具体煤矿图文数据的实时信息，及时了解矿井下的情况，以便对突发事件采取应对措施。本文设计的网站是在已有的煤矿安全系统的基础之上编写的一套适用于多类移动终端及PC端的管理网站。通过移动端访问网站能够对矿井下的巷道、人员定位、矿压检测、水文检测、微震监测等数据进行查看及多元化管理，为煤矿安全生产检测和管理带来全新方式，拓展了煤矿安全生产检测的和管理应用的广度和深度，使实时数据和移动的人相结合，实现移动办公的工作方式。

2.2响应式Web设计方案

响应式页面指页面要适应于不同尺寸和不同型号的屏幕，以达到良好的用户体验效果。Bootstrap框架内置一个自适应、移动设备优先的流式栅格系统，通过媒体查询定义容器（container）大小。栅格系统是适合不同尺寸屏幕设备的页面布局体系，能将容器最多平分成12份。

2.2.1栅格系统应用

栅格系统应用包括两点：

（1）容器（container）、行（row）和列（column）之间的层级关系[7]。为了给栅格系统合适的排列和内边距（padding），把每一行“row”包含在.container（固定宽度）或.container-fluid（100%宽度）中，以便赋予合适的排列（aligment）和内补（padding）。

栅格系统将容器的行（.row）平分为12等份，即12列（col-xs、col-sm、col-md、col-lg）。每列都有一个padding属性，合理设置padding属性能够让页面更加美观。

层级关系代码如下：

（2）不同断点类型意义及搭配。Bootstrap栅格系统的column对应类型名如.col-xx-y，xx只有4个特定值，分别是xs（超小屏幕）、sm（小屏幕）、md（中屏幕）、lg（大屏幕），它们即为断点类型。y是1～12之间的数字，表示该元素宽度占据12列中的多少列。

断点的意义是，当视口（viewport）宽度小于断点时，column将竖直堆叠（display：block的默认表现）;当视口宽度大于或等于断点时，column将水平排列（float的效果）。按照xs、sm、md、lg的顺序，断点像素值依次增大，其中xs表示超小，即视口宽度永远不小于xs断点，column将始终水平浮动。断点的类型及意义如表1所示。

表1断点类型及意义

类型[]意义

.c0l-xs-[]超小屏幕设备，适用于手机（<768px），总是水平排列

.col-sm-[]小屏幕设备，适用于平板（≥768px），开始，堆叠一起，超过阈值将变为水平排列

.col-md-[]中等屏幕设备，适用于桌面（≥992px），开始堆叠一起，超过阈值将变为水平排列

.col-lg-[]大屏幕设备，适用于桌面（≥1200px），开始堆叠一起，超过阈值将变为水平排列

2.2.2媒体查询

媒体查询[8-9]功能是响应式Web页面设计核心要素。根据对煤矿企业实际调研可知，媒体查询主要适配PC端、智能手机、iPad 3种设备。通过less文件使用媒体查询创建断点阈值，实现响应式页面设计，实现代码包括：①超小屏幕xs（<768px），默认配置;②小屏幕sm（≥768px），@media（min-width：@ screen-sm-min）{...};③中等屏幕md（≥992px），@ media（min-width：@ screen-md-min）{...};④中等屏幕lg（≥1200px），@ media（min-width：@ screen-lg-min）{...}。在实际开发中，利用Bootstrap提供的代码进行响应式页面布局，只需将相应代码插入即可，节省了开发者大量编码时间。

2.3页面布局设计

传统的页面设计几乎都是采用两栏或三栏布局，三栏布局是目前Web网站经典设计，可以充分利用大屏幕特点，在单个页面体现更为丰富的内容，但是在小屏幕时内容的布局效果则不太美观，用户体验效果不佳。

为了解决该问题，在PC端或是屏幕较大的设备如iPad上，将页面设置为三栏式布局，在小屏幕设备如不同型号的手机上，将页面设置为瀑布流式布局。

2.4网站功能设计

基于煤矿企业的实际需求，煤炭安全生产监测管理系统网站的所有信息查询面向全矿人员;信息录入和维护则由专人负责管理。由此，该网站主要设置4个角色：管理员、领导、单位负责人、普通员工。其角色分析如下：

（1）管理员。可以修改领导、单位负责人、普通员工的权限，维护人员信息，如个人信息、密码等。

（2）领导。领导负责审批各单位负责人回馈的各种文件信息，查看矿机下的全部实时数据信息，如人员定位、水文检测等。

（3）单位负责人。可审批本单位内的文件信息、员工请假等。

（4）普通员工。可查看本网站发布的所有公告通知，向自己所属单位负责人反馈安全问题。

基于煤矿安全生产的需求，系统网站在功能设计上共划分新闻动态、重要通知、监测监控、WebGIS和移动办公5个子系统，每个子系统都有若干个功能共同完成本系统网站的工作。具体划分如图1所示。

各功能描述如下：

（1） 新闻动态。更新发布与该煤矿有关的新闻，及国家或该煤矿相关政策和时政热点。

（2） 重要通知。该煤矿发布的重要通知信息。

（3） 监测监控。拥有该权限的用户可查看煤矿的图层实时数据信息，包括安全监测、人员定位、水文监测、微震监测等。

（4） Web GIS。主要作用是进行空间数据发布、空间查询与检索、空间模型服务、Web资源的组织等。

（5） 移动办公。审批各种文件信息，上传反馈意见。

2.5移动终端效果

使用idea开发工具和Bootstrap框架，对应上文介绍的页面布局，利用功能模块图编辑相应代码。

当点击左上角的折叠按钮时，手机端可展开导航条，如图2所示。每日更新首页导航栏下的值班人员信息，正文则是采用栅格系统的分块，在电脑端分3块显示，而手机端采用Bootstrap瀑布流布局，只显示一块（重要通知）。

3结语

本文提出的煤炭企业安全生产监测管理网站的设计，有助于煤炭企业利用现代信息技术辅助安全管理，履行安全管理职责，及时掌握各种安全隐患并予以消除，将工作落实到实处，完善了工作业绩的考核，有助于实现煤炭企业安全生产检测管理的数字化、现代信息化、办公自动化，及时为煤炭企业的领导决策层提供准确的数据、促进管理水平和管控能力的提高，因此具有普遍的推广性。

参考文献参考文献：

[1]陈菲，张敏.基于.NET的煤炭企业生产计划系统设计[J].软件导刊，2015，14（1）：8486.

[2]胡佳锋.新媒体Web技术的研究与实现[D].北京：中国地质大学，2016.

[3]FRAIN B.响应式Web设计-HTML5和CSS3实战[M].王永强，译.北京：人民邮电出版社，2015.

[4]郭恒庆.煤矿安全管理信息系统开发与应用研究[D].成都：电子科技大学，2013.

[5]潘志剛，卢建军，王晓路.基于智能手机的煤矿GIS监测系统设计[J].煤炭科学技术，2010，38（10）：7981，117.

[6]孙萍.基于BootStrap的响应式设计在WEB图书馆中的应用[J].内蒙古科技与经济，2017（20）：6062.

[7]周萍，赵娜，李慕.Bootstrap框架在响应式Web设计中的应用[J].软件导刊，2017，16（6）：135137.

[8]舒后，熊一帆，葛雪娇.基于Bootstrap框架的响应式网页设计与实现[J].北京印刷学院学报，2016，24（2）：4752.

[9]潘志刚，卢建军，王晓路.基于智能手机的煤矿GIS监测系统设计[J].煤炭科学技术，2010，38（10）：7981.

[9]赵建保.响应式Web设计关键技术及设计流程[J].电脑知识与技术，2014，10（5）：10661068.

[10]邢希，田兴彦，王世运.响应式Web设计方法的研究[J].琼州学院学报，2013，20（2）：3638.

[11]纪娟，林亮亮.基于Bootstrap的自适应自主测评系统设计与实现[J].安徽电子信息职业技术学院学报，2017，16（6）：2732.

[12]王琴.基于Bootstrap技术的高校门户网站设计与实现[J].哈尔滨师范大学自然科学学报，2017，33（3）：4348.

[13]何秀全.基于Bootstrap的响应式网页设计[J].软件导刊，2017，16（6）：104105.

[14]赵蓓.煤矿井下人员管理系统设计与应用研究[J].长春大学学报，2010，20（2）：3942，56.

[15]徐钊，王博文，黄士超.矿井人员定位管理系统移动终端的设计[J].煤矿安全，2013，44（5）：134136.

[16]张树明.基于响应式Web设计的网页模板的设计与实现[J].计算机与现代化，2013（6）：125127.

责任编辑（责任编辑：江艳）