該項目在三維地理仿真環境上實現了潮位標識物可視化及監控，包括狀態信息、設備管理、設備管理修改、警戒標識物、
維護記錄五個模塊。

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

總結

以上是生活随笔為你收集整理的潮位标识物笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。