济南网站建设,网站运营维护,网站优化
企业网站建设您当前的位置:智达维网络科技 > 网站建设 > 企业网站建设 >

济南响应式煤炭生产监测网站建设

更新时间:2018-07-25 09:24:17 作者:千寻建站 访问量:85

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属性能够让页面更加美观。
层级关系代码如下:
<div class="container">
<div class="row">
<div class=”col-md-6”></div>
<div class=”col-md-6”></div>
</div>
</div>
    (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将始终水平浮动。
2 媒体查询
    媒体查询功能是响应式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提供的代码进行响应式页面布局,只需要找到相应代码插入即可,节省了开发者大量编码时间。
3 页面布局设计
    传统的页面设计几乎都是采用两栏或三栏布局,三栏布局是目前Web网站经典设计,可以充分利用大屏幕特点,在单个页面体现更为丰富的内容,但是在小屏幕时内容的布局效果则不太美观,用户体验效果不佳。为了解决该问题,在PC 端或是屏幕较大的设备如iPad上,将页面设置为三栏式布局,在小屏幕设备如不同型号的手机上,将页面设置为瀑布流式布局。
4 网站功能设计
    基于煤矿企业的实际需求,煤炭安全生产监测管理系统网站的所有信息查询面向全矿人员;信息录入和维护则由专人负责管理。由此,该网站主要设置4个角色:管理员、领导、单位负责人、普通员工。其角色分析如下:
    (1)管理员。可以修改领导、单位负责人、普通员工的权限,维护人员信息,如个人信息、密码等。
    (2)领导。领导负责审批各单位负责人回馈的各种文件信息,查看矿机下的全部实时数据信息,如人员定位、水文检测等。
    (3)单位负责人。可审批本单位内的文件信息、员工请假等。
    (4)普通员工。可查看本网站发布的所有公告通知,向自己所属单位负责人反馈安全问题。基于煤矿安全生产的需求,系统网站在功能设计上共划分新闻动态、重要通知、监测监控、WebGIS和移动办公5个子系统,每个子系统都有若干个功能共同完成本系统网站的工作。具体划分如图所示。
 济南响应式煤炭生产监测网站建设
济南响应式煤炭生产监测网站建设
各功能描述如下:
    (1) 新闻动态。更新发布与该煤矿有关的新闻,及国家或该煤矿相关政策和时政热点。
    (2) 重要通知。该煤矿发布的重要通知信息。
    (3) 监测监控。拥有该权限的用户可查看煤矿的图层实时数据信息,包括安全监测、人员定位、水文监测、微震监测等。
    (4) Web GIS。主要作用是进行空间数据发布、空间查询与检索、空间模型服务、Web资源的组织等。
    (5) 移动办公。审批各种文件信息,上传反馈意见。
5 移动终端效果
    使用idea开发工具和Bootstrap框架,对应上文介绍的页面布局,利用功能模块图编辑相应代码。当点击左上角的折叠按钮时,手机端可展开导航条。每日更新首页导航栏下的值班人员信息,正文则是采用栅格系统的分块,在电脑端分3块显示,而手机端采用Bootstrap瀑布流布局,只显示一块(重要通知)。

    文章说明:本站发布的所有文章,版权均属于智达维网络科技。如需转载、摘编或利用其它方式使用上述作品,请注明“转载自:智达维网络科技”或“转载自:智达维网络科技/网站建设相关内容”,谢谢您的浏览!

相关推荐
下一篇:没有了
热线:0531-87583458 电话:0531-66812586 QQ:2676834962
Copyright 智达维网络科技 版权所有
ICP备案编号:鲁ICP备11034527号-1 鲁公网安备 37010402000703号

扫二维码加微信咨询

拨打客服热线

0531-87583458

在线客服