UI 開發的三種模式

1.手寫標籤和樣式程式碼，生成頁面

2.視覺化拖拽 UI 組建，生成頁面

3.直接輸入設計稿，輸出可用頁面

視覺化佈局工具

1、layoutlt：這款線上工具可以快速簡單的搭建基於Bootstrap響應式佈局，操作簡單，拖動即可，勝在方便快捷。

http://www.ibootstrap.cn/

2、diygw

1）線上設計，無需下載  賬號密碼同QQ

2) 幫助文件

說明：

               1）移動端：移動端基於WEUI庫

                      WeUI是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網頁和微信小程式量身設計，                   令使用者的使用感知更加統一。包含容器元件、FLEX佈局、九宮格、選項卡、底部導航、滑塊元件、圖文列表、面板組                   件、文字連結、連結元件、圖片元件、圖示、進度條、按鈕、單行文字、多行文字、單選列表、多選列表、開關選擇、                 滑動條、上傳元件、時間、下拉列表、單選列表等各式元素。

                2）電腦端：移動端基於Bootstrap庫

                     Bootstrap，來自Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔                 靈活，使得Web開發更加快捷。包含元件佈局、路徑導航、圖片元件、文字內容、選項卡、手風琴、輪播元件、面板組                 件、表格元件、選單導航、表單、文字框、密碼框、多文字框、單選框、複選框、按鈕、下拉框、圖片上傳、搜尋框

                3）視覺化動態資料設計

3、缺點：

   不適合程式碼的二次開發

   一般是基於某一種框架的或者在某一框架的基礎進行封裝的框架