前端可视化布局工具

UI 开发的三种模式

1.手写标签和样式代码，生成页面

2.可视化拖拽 UI 组建，生成页面

3.直接输入设计稿，输出可用页面

可视化布局工具

1、layoutlt：这款在线工具可以快速简单的搭建基于Bootstrap响应式布局，操作简单，拖动即可，胜在方便快捷。

http://www.ibootstrap.cn/

https://www.layoutit.com/build

2、diygw

1）在线设计，无需下载  账号密码同QQ

http://www.diygw.com/index.html

2) 帮助文档

http://www.diygw.com/doc.html

说明：

               1）移动端：移动端基于WEUI库

                      WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，                   令用户的使用感知更加统一。包含容器组件、FLEX布局、九宫格、选项卡、底部导航、滑块组件、图文列表、面板组                   件、文本链接、链接组件、图片组件、图标、进度条、按钮、单行文本、多行文本、单选列表、多选列表、开关选择、                 滑动条、上传组件、时间、下拉列表、单选列表等各式元素。

                2）电脑端：移动端基于Bootstrap库

                     Bootstrap，来自Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁                 灵活，使得Web开发更加快捷。包含组件布局、路径导航、图片组件、文本内容、选项卡、手风琴、轮播组件、面板组                 件、表格组件、菜单导航、表单、文本框、密码框、多文本框、单选框、复选框、按钮、下拉框、图片上传、搜索框

                3）可视化动态数据设计

3、缺点：

   不适合代码的二次开发

   一般是基于某一种框架的或者在某一框架的基础进行封装的框架