以前在制作pc网页或移动端页面时，往往要自己要写大量的html代码，加上一些css样式，调来调去来布局整个页面，比较繁琐。
于是之后模块化的前端UI框架应运而生，它们的出现极大的减少了前端界面开发的时间，降低了网页设计制作的门槛。
如比较出名的：Twitter的Bootstrap
Bootstrap在现在各种流行的ui框架中可谓是首屈一指，它来自于Twitter.
Semantic UI
Semantic UI时一款语义化的ui前端框架,语义化的方式时的代码更加的可读与理解
Yahoo的Yahoo Pure
它的特点时以纯css代码编写，无需任何JavaScript代码
UIkit
UIkit基于LESS开发，体积小易于维护,模块化,便于维护.
Mint UI
Mint UI是饿了么推出的一款 移动端的ui组件库.
layui
layui是一款门槛比较低的前端框架，风格极简，内容丰富，非常适合快速开发页面
使用这些ui框架进行布局，虽然已经足够便捷了，但还是无法实时预览，dreamweaver可以实现页面布局可视化，但要安装以及下载，也需要一定的基础，于是更为方便的各种在线可视化ui设计器出现了。
以下分享了一些比较方便的Bootstrap可视化设计器即UI编辑器，它们的作用可以让网页布局更加的便捷简单，允许开发者们自由diy的快速设计框架界面。
1、layoutit
Bootstrap ui可视化编辑器，能够通过鼠标简单的拖拽实现快速布局网站页面。
2、BootSwatchr
BootSwatchr，支持从右到左语言显示Bootstrap自定义样式的构建，它可以从代码的底层创建Bootstrap的主题，是Drew Strickiand开发的。
3、Bootstrap Live Editor
Live Editor提供优雅的方法来编辑与美化html页面，包括了各种高级的选项配置、自定义义标签。
4、Bootstrap Magic
它使用了最新的Bootstrap版本与AngularJS组合提供一个可灵活修改预览的编辑器。包括了各式各样的导入、颜色选择器与预输入。
5、Style Bootstrap
Style Bootstrap是一个内置在浏览器的GUI工具，可以自定义Twitter Bootstrap 外观。能够根据用户的选择自定义风格\字体排版、按钮、导航、格式等等。除了非常简便的自定义操作，它还可以快速生成可下载的CSS文件.
6、Fancy Boot
它允许用户快速编辑Bootstrap的配置，实时预览修改。
7、Bootstrap ThemeRoller
它提供了一个可视化的界面，让用户可以按照自己的风格创建新的Bootstrap主题。它可以将创建的每种风格生成唯一的URL ，这样就可以保存设置，当用户离开的时候，可以停止或者恢复自己定制设计的页面。
8、Pingendo
Pingendo 提供了大量的现成美观时尚的布局，使用它们后可以拖拽元素的位置，调整大小和自定义的功能。可以自行优化设计页面，插入新的内容。
9、Bootply
Bootply是一个比较实用的是可拖拽的可视化编辑器，它让用户编辑Bootstrap的CSS与HTML更加友好 。
10 Jetstrap
Jetstrap是一个实体模型工具，它可以不需要下载任何类型的软件,只需要登录，然后创建自己的项目，就能够随时访问了。用户可以很容易的通过Jetstrap生成时尚运行流畅的网站。
使用这些编辑器可以自由的在页面上构建的列表、段落、表单、表格、按钮，无需手动再编写大量的html与css代码，直接在设计器中托托拽拽即可，自动的得到自己设计页面的样式代码。
