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

韓發(fā) 鹿方凱 張輝

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

關鍵詞關鍵詞：煤礦安全監(jiān)測;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引言

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

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

1響應式Web設計

1.1響應式Web設計理念

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

1.2響應式web設計核心技術

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

1.3Bootstrap2.0響應式Web設計前端框架

對Bootstrap2.0框架進行功能劃分，主要分為框架（Scaffolding）、基礎CSS、構件庫和jQuery插件庫。

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

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

構件庫提供了基于按鈕、導航、標簽、排版、警告、進度欄、圖像網格等控件。

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

2基于Bootstrap響應式設計的煤炭安全生產監(jiān)測管理網站實施

2.1響應式Web設計與煤炭安全生產檢測的移動辦公

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

2.2響應式Web設計方案

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

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

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

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

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

層級關系代碼如下：

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

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

表1斷點類型及意義

類型[]意義

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

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

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

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

2.2.2媒體查詢

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

2.3頁面布局設計

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

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

2.4網站功能設計

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

（1）管理員?？梢孕薷念I導、單位負責人、普通員工的權限，維護人員信息，如個人信息、密碼等。

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

（3）單位負責人。可審批本單位內的文件信息、員工請假等。

（4）普通員工?？刹榭幢揪W站發(fā)布的所有公告通知，向自己所屬單位負責人反饋安全問題。

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

各功能描述如下：

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

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

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

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

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

2.5移動終端效果

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

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

3結語

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

參考文獻參考文獻：

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

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

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

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

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

[6]孫萍.基于BootStrap的響應式設計在WEB圖書館中的應用[J].內蒙古科技與經濟，2017（20）：6062.

[7]周萍，趙娜，李慕.Bootstrap框架在響應式Web設計中的應用[J].軟件導刊，2017，16（6）：135137.

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

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

[9]趙建保.響應式Web設計關鍵技術及設計流程[J].電腦知識與技術，2014，10（5）：10661068.

[10]邢希，田興彥，王世運.響應式Web設計方法的研究[J].瓊州學院學報，2013，20（2）：3638.

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

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

[13]何秀全.基于Bootstrap的響應式網頁設計[J].軟件導刊，2017，16（6）：104105.

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

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

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

責任編輯（責任編輯：江艷）