1、Bootstrap的可视化制作工具：Jetstrap：
Jetstrap是一个基于 Bootstrap 前端框架的可视化设计工具。通过 Jetstrap制作出来的网页 100% 符合 Bootstrap 标准。比如说你只要设计了电脑端的页面，它会自动适配手机端和 Pad 端（响应式设计）。
2、Bootstrap可视化编辑器工具-LayoutIt
简单的几个拖放操作就能做出漂亮的 Twitter Bootstrap 网站？是的，LayoutIt 是一个 Twitter Bootstrap 界面生成器，能够帮助你快速制作出网站和界面模型，同时能够下载生成的网站代码。
3、Bootstrap的可视化制作工具：bootswatchr
bootswatchr是从地面上创建一个自定义的BootStrap主题的可视化工具。最大的方便就是 我们可以在左侧修改css或者html代码，然后修改结果会直接会显示在右侧。更重要是一个在线编辑和免费生成Bootstrap主题的酷站。
1、打开你要仿的站2、鼠标右键>查看页面源代码>全部复制>新建文本文档>将内容粘贴进去>将文档的拓展名改为.html
3、找到<link ... >中得CSS文件>全部复制>新建文本文档>将内容粘贴进去>将文档的拓展名改为.css
4、在第二步拷的内容中查找 <img 用src中的地址把图片全拷下来
5、在第三步拷的内容中查找 url 用括号内的地址把图片全拷下来
6、特殊效果可能要用到 script 一样的找到<script 拷内容 拓展名.js
7、上面拷的内容要放到相应文件夹中才能生效
如果是小白，你可能需要了解：相对路径、HTML标签
软件：DW
常用的前端开发插件如下：Emmet
Emmet的前身是Zen Coding，一款使用仿CSS选择器的语法来快速开发HTML和CSS的插件，是前端开发神器。它无视了编辑器的自动提示和自动完成，秒杀了你自定义的各种快捷键或者 AHK 的热字符串，以智能简洁高效的缩短输入，带给你超快速地书写各种复杂而枯燥的 HTML 和 CSS 代码的体验。现在可以在Notepad++的插件管理器里直接安装了。
Finger Text
标签代码替换和文本自动完成插件，编辑器配合这个功能可以有效地提升代码的书写速度，提高自己的工作效率，例如我输入if然后按Tab键将会把if替换成一个完整的if结构，可以极大的提高效率，当然具体怎么替换是可以配置的。
TextFx
这个号称是Notepad++上面最好用的plugin，具有超强的文本处理能力，比如文本编码处理等。编程某种程度上就是文本工作，所以这个插件对开发人员应该是非常有帮助的。以前是默认安装的，现在需要自己手动安装。
Task List
自动扫描当前文档，将所有"TODO:"开头的注释都找出来，列在右边的面板中，双击可以跳转该行。这和Eclipse里的TODO功能很相似，便于标记查找没有完成的工作。
HTML Tag
编辑HTML代码时比较有用，它主要的功能是匹配选择的标签，对HTML标签编码及解码，对JS编码及解码，我认为对HTML标签编码及解码是最有用的功能了。
TagsView
可以列出当前文档的全局变量，函数列表等，方便查找定位函数，变量等。
JSON Viewer
可以以树的形式查看JSON，同时可以格式化JSON，增加缩进。
JSLint
JSLint一个JavaScript语法检查工具，可以检查你的代码是否优秀，规则请参考<<JavaScript语言精粹>>。
RegEx Helper
在文档的中匹配正则表达式，可以用来测试正则表达式。
Compare Plugin
一个非常实用的工具，可以用来比较两个文件不同之处，主要用来对比相邻的两个文件。
Explorer
一个文件浏览窗口，可以在里面创建文件，文件夹等。还可以快速定位当前打开的文件的文件夹。
File Switcher
一个快速切换窗口的工具，支持通过输入文件名，路径或者tab index来查找切换，可以用来替换默认的Ctrl + Tab。
