潮位标识物笔记

该项目在三维地理仿真环境上实现了潮位标识物可视化及监控，包括状态信息、设备管理、设备管理修改、警戒标识物、
维护记录五个模块。

1、BootStrap

https://blog.csdn.net/zxy9602/article/details/79642378

①Bootstrap的栅格系统实现响应式布局

它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。

工作原理：通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。

要点1：

<div class="container">  
    <div class="row">  
        <div class="col-md-6"></div>  
        <div class="col-md-6"></div>  
    </div>  
</div>  

container、row、column必须保持特定的层级关系，栅格系统才可以正常工作。

要点2：断点类型 
Bootstrap栅格的column对应的类名形如.col-xx-y。y是数字，表示该元素的宽度占据12列中的多少列。而xx只有特定的几个值可供选择，分别是xs、sm、md、lg，它们就是断点类型。 

xs  -- extra samll    最小屏    

sm -- small            小屏

md -- middle         中屏

lg   -- large            大屏

②Bootstrap的media--------因为不同分辨率设备或不同窗口大小下布局错位，可以利用@media screen实现网页布局的自适应,

css3的一个属性，使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media针对不同的屏幕尺寸设置不同的样式，特别是设计响应式的页面，@media会根据你设置的样式动态监听。
 

@media(max-width:1600px)   当页面<=1600px时选用这个css样式

@media(min-width:1600px)  

@media(max-width:1600px) and (min-width:1024px)

@media(max-width:1024px)   

用min-width时，小的放上面大的在下面(大的放上面会失效)，是用max-width那么就是大的在上面，小的在下面

③自定义“date-*”属性的使用 

data属性是HTML5中定义的一个全局属性，它用来存在页面或者应用程序的私有自定义数据。可以为所有 HTML 元素上嵌入自定义 data 属性，自定义（存储）的数据可以被CSS或者JS来使用，来提高用户体验。

仅仅通过data属性API就能使用所有Bootstrap中的插件，而且不用写一行JavaScript代码。 

bootstrap的模态框（Modal）插件

data-target和data-toggle实现组件隐藏/显示

    data-toggle主要做事件绑定的，表示以什么事件触发，如modal,popover,tooltips,collapse等；

    modal： ，表示模态框也就是我们平时见得到的弹出框等；
    popover： 弹出框,如需激活弹出框，用户只需把鼠标悬停在元素上即可；
    tooltips： 提示工具插件根据需求生成内容和标记；
    collapse： 表示需要显示或隐藏的组件，点击事件后会在显示和隐藏之间切换，非常好用；

    data-target表示事件触发的目标

点击设备管理按钮，出现弹出框，出现设备信息，包括基本信息和水位信息
<!-- 按钮触发模态框 -->
<button data-toggle="modal" data-target="#myModal">
	点击显示模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal " id="myModal" >内容</div>

2、逻辑：根据所需得到数据，处理数据，展示数据

动态效果：可拖拽效果

https://blog.csdn.net/u013344815/article/details/72598890/

    var box = document.getElementById('box');
    var gapX,gapY;
    window.onmousedown=function () {
        gapX=event.clientX-box.offsetLeft;
        gapY=event.clientY-box.offsetTop;
    }
    window.onmouseup=function () {
        box.style.left=(event.offsetX-gapX)+'px';
        box.style.top=(event.offsetY-gapY)+'px';
    }

3、Promise

https://www.jianshu.com/p/84ef1b48fcce