基于BootStrap技術(shù)的煤礦安全生產(chǎn)監(jiān)測管理網(wǎng)站設(shè)計與實現(xiàn)

韓發(fā) 鹿方凱 張輝

摘要 為實現(xiàn)煤炭企業(yè)安全生產(chǎn)監(jiān)測管理系統(tǒng)的網(wǎng)頁在各種移動設(shè)備上兼容顯示，保證用戶體驗性良好，提出一種基于Bootstrap框架的響應(yīng)式網(wǎng)頁設(shè)計技術(shù)，并通過實踐分析Bootstrap核心要素及其核心要素在響應(yīng)式網(wǎng)頁設(shè)計中的優(yōu)勢。實踐結(jié)果表明，基于Bootstrap框架設(shè)計的煤礦安全生產(chǎn)監(jiān)測管理網(wǎng)站實現(xiàn)了PC端與移動端網(wǎng)頁顯示的一致性。

關(guān)鍵詞關(guān)鍵詞：煤礦安全監(jiān)測;Bootstrap;HTML5;響應(yīng)式;移動辦公

DOIDOI：10.11907/rjdk.181104

中圖分類號：TP319

文獻(xiàn)標(biāo)識碼：A文章編號文章編號：16727800（2018）009012903

英文標(biāo)題Design and Realization of Coalmine Safety Production Monitoring Management Website Based on BootStrap Technology

--副標(biāo)題

英文作者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.

英文關(guān)鍵詞Key Words：coalmine safety monitoring; Bootstrap; HTML5; responsive; mobile office

0引言

隨著互聯(lián)網(wǎng)、智能手機(jī)及移動通信網(wǎng)絡(luò)的迅速發(fā)展，用戶越來越傾向于使用移動設(shè)備訪問網(wǎng)站。由于用戶對智能手機(jī)的習(xí)慣性依賴，傳統(tǒng)PC端煤炭管理系統(tǒng)網(wǎng)站的設(shè)計已不能滿足用戶需求。移動端APP通過不斷改進(jìn)和完善，用戶體驗效果反饋良好，但是在開發(fā)時間、開發(fā)成本和后期維護(hù)上仍存在一定問題[1]。Web前端技術(shù)的應(yīng)用雖然很大程度地解決了一些問題，但是移動端設(shè)備不斷更新、類型也復(fù)雜多樣，所以在頁面設(shè)計、內(nèi)容、互動、人性化方面，網(wǎng)頁設(shè)計仍然存在一定問題[2]。

針對目前存在的問題，F(xiàn)rain等[3]提出可以根據(jù)視口大小改變頁面布局，從整體上顛覆了當(dāng)時的網(wǎng)頁設(shè)計方法。目前，國內(nèi)煤礦企業(yè)安全生產(chǎn)管理網(wǎng)站從針對PC端開發(fā)的系統(tǒng)網(wǎng)站到針對移動端APP都已不能很好滿足企業(yè)和用戶需求，主要因為針對PC端開發(fā)的系統(tǒng)網(wǎng)站已不能適應(yīng)不斷更新且瀏覽方式多樣的移動端設(shè)備，用戶體驗效果差[4]。雖然移動端APP能很好地適應(yīng)不斷更新的各式移動端，但是需要單獨(dú)開發(fā)一套程序，開發(fā)時間長，開發(fā)成本及后期維護(hù)費(fèi)用高[5]。針對以上問題，本文通過利用響應(yīng)式Web開發(fā)技術(shù)，使頁面能自適應(yīng)地隨瀏覽設(shè)備屏幕的尺寸而改變大小，動態(tài)調(diào)整整體布局、元素樣式規(guī)格，并將內(nèi)容顯示給不同類型設(shè)備的用戶，同時也能更好地進(jìn)行代碼重構(gòu)，不需要為各式移動端開發(fā)不同版本，節(jié)約開發(fā)時間和成本，即開發(fā)一套兼顧PC端及不同尺寸屏幕的移動設(shè)備的程序，同時兼顧響應(yīng)式系統(tǒng)網(wǎng)站的開發(fā)資金、技術(shù)、時間等因素，體現(xiàn)了煤礦企業(yè)響應(yīng)式轉(zhuǎn)型的過程。

1響應(yīng)式Web設(shè)計

1.1響應(yīng)式Web設(shè)計理念

響應(yīng)式網(wǎng)站設(shè)計（Responsive Web Design）的理念[6]是：頁面設(shè)計與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺、屏幕尺寸、屏幕定向等）進(jìn)行相對響應(yīng)和調(diào)整。不論用戶使用何種類型移動端或PC端，頁面布局、圖片大小及腳本功能等都能自動切換以適應(yīng)不同設(shè)備，即頁面能自適應(yīng)用戶的設(shè)備類型。響應(yīng)式Web頁面設(shè)計規(guī)避了移動端屏幕尺寸大小及操作系統(tǒng)的差異，使Web程序適應(yīng)多類移動終端和PC端，具有操作系統(tǒng)平臺的無關(guān)性、兼容性等特點，不必對不同版本進(jìn)場專門設(shè)計、開發(fā)及維護(hù)。

1.2響應(yīng)式web設(shè)計核心技術(shù)

響應(yīng)式Web設(shè)計采用 HTML5+CSS+JavaScript模式。HTML5是萬維網(wǎng)核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言的應(yīng)用超文本標(biāo)記語言 ，CSS是層疊樣式表（Cascading Style Sheets），是表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集）等文件樣式的計算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素格式化，同時還能對網(wǎng)頁元素位置的排版進(jìn)行像素級精確控制，支持幾乎所有字體、字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。響應(yīng)式Web設(shè)計整合了媒體查詢、彈性視覺媒體和流動布局[7]，媒體查詢實現(xiàn)根據(jù)設(shè)備特性分級控制頁面布局，使頁面在不同終端設(shè)備中達(dá)到不同渲染效果，彈性視覺媒體按照特定布局進(jìn)行動態(tài)調(diào)整，使用流動布局創(chuàng)建可縮放、可流動的彈性版式，三者構(gòu)成了響應(yīng)式設(shè)計的核心技術(shù)。

1.3Bootstrap2.0響應(yīng)式Web設(shè)計前端框架

對Bootstrap2.0框架進(jìn)行功能劃分，主要分為框架（Scaffolding）、基礎(chǔ)CSS、構(gòu)件庫和jQuery插件庫。

Scaffolding主要提供基于網(wǎng)格的各種布局，包括普通網(wǎng)格系統(tǒng)、嵌入式網(wǎng)格、固定布局、自適應(yīng)布局，同時可自定義網(wǎng)格和布局。Bootstrap2.0提供響應(yīng)式設(shè)計，通過單個文件支持各種手持設(shè)備，自適應(yīng)不同設(shè)備和屏幕變化。

基礎(chǔ)CSS包括各種排版樣式（標(biāo)題、段落、引用塊、列表、內(nèi)聯(lián)標(biāo)簽等），代碼展示提供了基于code標(biāo)簽的內(nèi)嵌代碼，基于pre的塊代碼和基于Google Prettify的代碼樣式，同時提供各種表格、表單、按鈕、圖標(biāo)的展示方式。

構(gòu)件庫提供了基于按鈕、導(dǎo)航、標(biāo)簽、排版、警告、進(jìn)度欄、圖像網(wǎng)格等控件。

jQuery插件庫提供十幾種插件實現(xiàn)動態(tài)效果，例如Modal、Dropdown、Tab、Tooltip、Popover、Carousel等，開發(fā)者可根據(jù)業(yè)務(wù)需求使用不同插件實現(xiàn)各種動態(tài)效果。

2基于Bootstrap響應(yīng)式設(shè)計的煤炭安全生產(chǎn)監(jiān)測管理網(wǎng)站實施

2.1響應(yīng)式Web設(shè)計與煤炭安全生產(chǎn)檢測的移動辦公

互聯(lián)網(wǎng)及智能手機(jī)的迅速發(fā)展，為煤炭企業(yè)安全生產(chǎn)管理開拓了新的發(fā)展方向。不管是APP服務(wù)還是為適應(yīng)不同設(shè)備類型開發(fā)的至少兩套以上的頁面，都需要單獨(dú)開發(fā)應(yīng)用程序，開發(fā)成本高，后期維護(hù)困難。為此，Bootstrap響應(yīng)式設(shè)計一套程序代碼可以適用于多種移動終端及PC端，在煤礦企業(yè)中發(fā)揮著越來越重要的作用。建立煤炭安全監(jiān)測管理系統(tǒng)網(wǎng)站有助于礦井管理層人員發(fā)揮隨時隨地快速、準(zhǔn)確、直觀、系統(tǒng)地得到具體煤礦圖文數(shù)據(jù)的實時信息，及時了解礦井下的情況，以便對突發(fā)事件采取應(yīng)對措施。本文設(shè)計的網(wǎng)站是在已有的煤礦安全系統(tǒng)的基礎(chǔ)之上編寫的一套適用于多類移動終端及PC端的管理網(wǎng)站。通過移動端訪問網(wǎng)站能夠?qū)ΦV井下的巷道、人員定位、礦壓檢測、水文檢測、微震監(jiān)測等數(shù)據(jù)進(jìn)行查看及多元化管理，為煤礦安全生產(chǎn)檢測和管理帶來全新方式，拓展了煤礦安全生產(chǎn)檢測的和管理應(yīng)用的廣度和深度，使實時數(shù)據(jù)和移動的人相結(jié)合，實現(xiàn)移動辦公的工作方式。

2.2響應(yīng)式Web設(shè)計方案

響應(yīng)式頁面指頁面要適應(yīng)于不同尺寸和不同型號的屏幕，以達(dá)到良好的用戶體驗效果。Bootstrap框架內(nèi)置一個自適應(yīng)、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)，通過媒體查詢定義容器（container）大小。柵格系統(tǒng)是適合不同尺寸屏幕設(shè)備的頁面布局體系，能將容器最多平分成12份。

2.2.1柵格系統(tǒng)應(yīng)用

柵格系統(tǒng)應(yīng)用包括兩點：

（1）容器（container）、行（row）和列（column）之間的層級關(guān)系[7]。為了給柵格系統(tǒng)合適的排列和內(nèi)邊距（padding），把每一行“row”包含在.container（固定寬度）或.container-fluid（100%寬度）中，以便賦予合適的排列（aligment）和內(nèi)補(bǔ)（padding）。

柵格系統(tǒng)將容器的行（.row）平分為12等份，即12列（col-xs、col-sm、col-md、col-lg）。每列都有一個padding屬性，合理設(shè)置padding屬性能夠讓頁面更加美觀。

層級關(guān)系代碼如下：

（2）不同斷點類型意義及搭配。Bootstrap柵格系統(tǒng)的column對應(yīng)類型名如.col-xx-y，xx只有4個特定值，分別是xs（超小屏幕）、sm（小屏幕）、md（中屏幕）、lg（大屏幕），它們即為斷點類型。y是1～12之間的數(shù)字，表示該元素寬度占據(jù)12列中的多少列。

斷點的意義是，當(dāng)視口（viewport）寬度小于斷點時，column將豎直堆疊（display：block的默認(rèn)表現(xiàn)）;當(dāng)視口寬度大于或等于斷點時，column將水平排列（float的效果）。按照xs、sm、md、lg的順序，斷點像素值依次增大，其中xs表示超小，即視口寬度永遠(yuǎn)不小于xs斷點，column將始終水平浮動。斷點的類型及意義如表1所示。

表1斷點類型及意義

類型[]意義

.c0l-xs-[]超小屏幕設(shè)備，適用于手機(jī)（<768px），總是水平排列

.col-sm-[]小屏幕設(shè)備，適用于平板（≥768px），開始，堆疊一起，超過閾值將變?yōu)樗脚帕?/p>

.col-md-[]中等屏幕設(shè)備，適用于桌面（≥992px），開始堆疊一起，超過閾值將變?yōu)樗脚帕?/p>

.col-lg-[]大屏幕設(shè)備，適用于桌面（≥1200px），開始堆疊一起，超過閾值將變?yōu)樗脚帕?/p>

2.2.2媒體查詢

媒體查詢[8-9]功能是響應(yīng)式Web頁面設(shè)計核心要素。根據(jù)對煤礦企業(yè)實際調(diào)研可知，媒體查詢主要適配PC端、智能手機(jī)、iPad 3種設(shè)備。通過less文件使用媒體查詢創(chuàng)建斷點閾值，實現(xiàn)響應(yīng)式頁面設(shè)計，實現(xiàn)代碼包括：①超小屏幕xs（<768px），默認(rèn)配置;②小屏幕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ā)中，利用Bootstrap提供的代碼進(jìn)行響應(yīng)式頁面布局，只需將相應(yīng)代碼插入即可，節(jié)省了開發(fā)者大量編碼時間。

2.3頁面布局設(shè)計

傳統(tǒng)的頁面設(shè)計幾乎都是采用兩欄或三欄布局，三欄布局是目前Web網(wǎng)站經(jīng)典設(shè)計，可以充分利用大屏幕特點，在單個頁面體現(xiàn)更為豐富的內(nèi)容，但是在小屏幕時內(nèi)容的布局效果則不太美觀，用戶體驗效果不佳。

為了解決該問題，在PC端或是屏幕較大的設(shè)備如iPad上，將頁面設(shè)置為三欄式布局，在小屏幕設(shè)備如不同型號的手機(jī)上，將頁面設(shè)置為瀑布流式布局。

2.4網(wǎng)站功能設(shè)計

基于煤礦企業(yè)的實際需求，煤炭安全生產(chǎn)監(jiān)測管理系統(tǒng)網(wǎng)站的所有信息查詢面向全礦人員;信息錄入和維護(hù)則由專人負(fù)責(zé)管理。由此，該網(wǎng)站主要設(shè)置4個角色：管理員、領(lǐng)導(dǎo)、單位負(fù)責(zé)人、普通員工。其角色分析如下：

（1）管理員。可以修改領(lǐng)導(dǎo)、單位負(fù)責(zé)人、普通員工的權(quán)限，維護(hù)人員信息，如個人信息、密碼等。

（2）領(lǐng)導(dǎo)。領(lǐng)導(dǎo)負(fù)責(zé)審批各單位負(fù)責(zé)人回饋的各種文件信息，查看礦機(jī)下的全部實時數(shù)據(jù)信息，如人員定位、水文檢測等。

（3）單位負(fù)責(zé)人。可審批本單位內(nèi)的文件信息、員工請假等。

（4）普通員工。可查看本網(wǎng)站發(fā)布的所有公告通知，向自己所屬單位負(fù)責(zé)人反饋安全問題。

基于煤礦安全生產(chǎn)的需求，系統(tǒng)網(wǎng)站在功能設(shè)計上共劃分新聞動態(tài)、重要通知、監(jiān)測監(jiān)控、WebGIS和移動辦公5個子系統(tǒng)，每個子系統(tǒng)都有若干個功能共同完成本系統(tǒng)網(wǎng)站的工作。具體劃分如圖1所示。

各功能描述如下：

（1） 新聞動態(tài)。更新發(fā)布與該煤礦有關(guān)的新聞，及國家或該煤礦相關(guān)政策和時政熱點。

（2） 重要通知。該煤礦發(fā)布的重要通知信息。

（3） 監(jiān)測監(jiān)控。擁有該權(quán)限的用戶可查看煤礦的圖層實時數(shù)據(jù)信息，包括安全監(jiān)測、人員定位、水文監(jiān)測、微震監(jiān)測等。

（4） Web GIS。主要作用是進(jìn)行空間數(shù)據(jù)發(fā)布、空間查詢與檢索、空間模型服務(wù)、Web資源的組織等。

（5） 移動辦公。審批各種文件信息，上傳反饋意見。

2.5移動終端效果

使用idea開發(fā)工具和Bootstrap框架，對應(yīng)上文介紹的頁面布局，利用功能模塊圖編輯相應(yīng)代碼。

當(dāng)點擊左上角的折疊按鈕時，手機(jī)端可展開導(dǎo)航條，如圖2所示。每日更新首頁導(dǎo)航欄下的值班人員信息，正文則是采用柵格系統(tǒng)的分塊，在電腦端分3塊顯示，而手機(jī)端采用Bootstrap瀑布流布局，只顯示一塊（重要通知）。

3結(jié)語

本文提出的煤炭企業(yè)安全生產(chǎn)監(jiān)測管理網(wǎng)站的設(shè)計，有助于煤炭企業(yè)利用現(xiàn)代信息技術(shù)輔助安全管理，履行安全管理職責(zé)，及時掌握各種安全隱患并予以消除，將工作落實到實處，完善了工作業(yè)績的考核，有助于實現(xiàn)煤炭企業(yè)安全生產(chǎn)檢測管理的數(shù)字化、現(xiàn)代信息化、辦公自動化，及時為煤炭企業(yè)的領(lǐng)導(dǎo)決策層提供準(zhǔn)確的數(shù)據(jù)、促進(jìn)管理水平和管控能力的提高，因此具有普遍的推廣性。

參考文獻(xiàn)參考文獻(xiàn)：

[1]陳菲，張敏.基于.NET的煤炭企業(yè)生產(chǎn)計劃系統(tǒng)設(shè)計[J].軟件導(dǎo)刊，2015，14（1）：8486.

[2]胡佳鋒.新媒體Web技術(shù)的研究與實現(xiàn)[D].北京：中國地質(zhì)大學(xué)，2016.

[3]FRAIN B.響應(yīng)式Web設(shè)計-HTML5和CSS3實戰(zhàn)[M].王永強(qiáng)，譯.北京：人民郵電出版社，2015.

[4]郭恒慶.煤礦安全管理信息系統(tǒng)開發(fā)與應(yīng)用研究[D].成都：電子科技大學(xué)，2013.

[5]潘志剛，盧建軍，王曉路.基于智能手機(jī)的煤礦GIS監(jiān)測系統(tǒng)設(shè)計[J].煤炭科學(xué)技術(shù)，2010，38（10）：7981，117.

[6]孫萍.基于BootStrap的響應(yīng)式設(shè)計在WEB圖書館中的應(yīng)用[J].內(nèi)蒙古科技與經(jīng)濟(jì)，2017（20）：6062.

[7]周萍，趙娜，李慕.Bootstrap框架在響應(yīng)式Web設(shè)計中的應(yīng)用[J].軟件導(dǎo)刊，2017，16（6）：135137.

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

[9]潘志剛，盧建軍，王曉路.基于智能手機(jī)的煤礦GIS監(jiān)測系統(tǒng)設(shè)計[J].煤炭科學(xué)技術(shù)，2010，38（10）：7981.

[9]趙建保.響應(yīng)式Web設(shè)計關(guān)鍵技術(shù)及設(shè)計流程[J].電腦知識與技術(shù)，2014，10（5）：10661068.

[10]邢希，田興彥，王世運(yùn).響應(yīng)式Web設(shè)計方法的研究[J].瓊州學(xué)院學(xué)報，2013，20（2）：3638.

[11]紀(jì)娟，林亮亮.基于Bootstrap的自適應(yīng)自主測評系統(tǒng)設(shè)計與實現(xiàn)[J].安徽電子信息職業(yè)技術(shù)學(xué)院學(xué)報，2017，16（6）：2732.

[12]王琴.基于Bootstrap技術(shù)的高校門戶網(wǎng)站設(shè)計與實現(xiàn)[J].哈爾濱師范大學(xué)自然科學(xué)學(xué)報，2017，33（3）：4348.

[13]何秀全.基于Bootstrap的響應(yīng)式網(wǎng)頁設(shè)計[J].軟件導(dǎo)刊，2017，16（6）：104105.

[14]趙蓓.煤礦井下人員管理系統(tǒng)設(shè)計與應(yīng)用研究[J].長春大學(xué)學(xué)報，2010，20（2）：3942，56.

[15]徐釗，王博文，黃士超.礦井人員定位管理系統(tǒng)移動終端的設(shè)計[J].煤礦安全，2013，44（5）：134136.

[16]張樹明.基于響應(yīng)式Web設(shè)計的網(wǎng)頁模板的設(shè)計與實現(xiàn)[J].計算機(jī)與現(xiàn)代化，2013（6）：125127.

責(zé)任編輯（責(zé)任編輯：江艷）