前端小工具箱

A. 求一套前端开发在线工具箱源码，比如在线HTML转JS等。

你好，请下面的链接里，安装下浏览器扩展，在扩展文件中就能找到源码。

网页链接

若有帮助，请采纳，谢谢

B. 前端开发工具

为了让入行新人能够更快的掌握Web前端开发，推荐五个优秀的前端开发工具，供小伙伴们参考。

框架类：Bootstrap

全世界最流行的响应式前端框架。基于迅氏HTML、CSS、JAVASCRIPT的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格。并兼容大部分jQuery插件。简洁灵活，使得Web开发更加快捷。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

代码编辑器：Codepen、VScode

CodePen是一个在线的HTML、CSS和JavaScript代码编辑器，能够编写代码并即时预览效果。可以用于在线展示的作品，也可以看到其他人在网页中实现的各种令人惊奇的效果。

VScode免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比Diff、GIT等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持Win、Mac以及Linux。

性能测试：GooglePageSpeedInsights

PageSpeed是谷歌的网页测试工具，通相信有接触前端开发的大神们都听说过Google官方的PageSpeedTools，这个网页载入速度检测工具有在线版本也有一个Chrome扩展，叫PageSpeedInsights。PageSpeedInsights的Chrome扩展是由谷歌官方开发的一款可以分析页面载入的各个方面，包括资源、网络、DOM以及时间线等等信息的插件，过检测评分给你优化建议。

调试类：AtomAptanaStudio

它是非常强悍的JavaScript编辑器和调试器，可以支持多种AJAX和JavaScript工具箱，包括源衡JavaScript编辑和调试。具有智能代码完成、浏览器兼容性提示、代码错误提示、文档结构树等功能。

HTML5：HTML5测试得分能够提示您正常使用的浏览器对于HTML5标准和相关规范的支持情况的指标。

前端开发工具数量很多，这里只是推荐了千锋武汉HTML5前端小编觉得比较好的5个前端开发工具。如果你有更好的意见，欢迎给我们留言分亩裂散享。

C. 使用前端工具包bootstrap时同一页面的模态窗口是不是不能超过2个

前端框架 Bootstrap 的模态对话框，可以使用 remote 选项指定一个
URL，这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中，但是它只会加载一次，不过通过在事件中调用
removeData() 方法可以解决这个问题。

1、Bootstrap 模态对话框和简单使用

<div id="myModal" class="modal hide fade">

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>对话框标题</h3>
</div>
<div class="modal-body">
<p>对话框主体</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">取消</a>
<a href="#" class="btn btn-primary" data-dismiss="modal">确定</a>
</div>
</div>

可以使用按钮或链接直接调用模态对话框，这是简单的用法：
<button type="button" data-toggle="modal" data-target="#myModal">打开对话框</button>
<a href="#myModal" role="button" class="btn" data-toggle="modal">打开对话框</button>

这样只能把静态内容在对话框中显示出来，使用对话框的 remote 选项可以实现更强大的效果。

2、使用 remote 选项让模态对话框加载页面到 .modal-body 中

有两种方法，一种是使用链接，另一种就是使用脚本。

2.1 使用链接

<a href="page.jsp" data-toggle="modal" data-target="#myModal">打开对话框</a>

当点击此链接时，page.jsp 的内容会被加载到对话框的 .modal-body 中，随即显示对话框。

2.2 使用脚本

$("#myModal").modal({
remote: "page.jsp"
});

这段脚本的效果和使用链接是一样的，当这段脚本执行后，page.jsp 的内容会被加载到对话框的 .modal-body 中，随即显示对话框。

这两种方法的背后，都是 Bootstrap 调用了 jQuery 的 load() 方法，从服务器端加载了 page.jsp
页面。但这个加载只会发生一次，后面不管你点击几次链接，或者执行几次脚本，哪怕改变传递给 remote
选项的值，对话框都不会重新加载页面，这真是个让人头疼的事情。不过问题还是能够解决的。

3、 移除数据，让对话框能够在每次打开时重新加载页面

在搜索并查阅了相关文档后，发现在对话框的 hidden 事件里写上一条语句就可以了：
$("#myModal").on("hidden", function() {
$(this).removeData("modal");
});

也可以在每次打开对话框之前移除数据，效果是一样的。

D. 前端开发框架有哪些

前端框架好不好用还是要看具体情况分析，我这里给你推荐几个常用的框架，可以按需使用。

1、vue-element-admin

一个基于vue2.0和Element的控制面板UI框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板已经非常成熟了，并且有相关的社区和维护人员，开发时候遇到问题也不要慌。

2、AdminLTE

非常流行的基于Bootstrap 3.x的免费的后台UI框架，这是一个非常老牌的后台管理系统模板，每个页面都是单独的html网页，适合前端入门新手用来做项目。

3、ant-design-pro

这个就不多说了，选择react技术栈的童鞋们必然离不开这个优秀开箱即用的中台前端/设计解决方案，文档齐全，组件丰富，一键生成模板，更支持开启复制粘贴模式哦。

4、ng2-admin

这是基于Angular 2、Bootstrap 4和webpack的后台管理面板框架，要收前面已经有了React和vue技术栈的模板，那怎么能少了ng的？虽然在国外用的比较多，国内较少使用，但丝毫不影响ng作为前端框架三巨头之一的地位。

9：material-dashboard

基于 Bootstrap 4 和 Material 风格的控制面板。Material Dashboard 是一个开源的 Material

Bootstrap Admin，其设计灵感来自谷歌的 Material Design 。

10：d2-admin

D2Admin 是一个完全 开源免费 的企业中后台产品前端集成方案，基于 vue.js 和 ElementUI 的管理系统前端解决方案 ，小于 60kb的本地首屏 js 加载,已经做好大部分项目前期准备工作

11：vuestic-admin

vuestic-admin管理台仪表盘是一个响应式的仪表盘模板，采用Bootstrap4和绝裤Vue.js构建。这个精美的管理台模板提供了自定义元素组件，如地图，聊天，个人资料卡，图标，进度条等，以及用于登茄宴录和注册的预建页面。

E. 前端开发工具箱问题

这是因为写入权限的问题，并非程序本身的问题

你可以试试右键管理员权限打段隐友开试试看

如果没有管理员权限打握槐开这个选项，试试这个：

WindowsRegistryEditorVersion5.00
[HKEY_CLASSES_ROOT*shell
unas]
@="添加管理员权限"
"NoWorkingDirectory"=""
[HKEY_CLASSES_ROOT*shell
unascommand]
@="cmd.exe/ctakeown/f"%1"icacls"%1"/grantadministrators:F"携梁
"IsolatedCommand"="cmd.exe/ctakeown/f"%1"icacls"%1"/grantadministrators:F"
[HKEY_CLASSES_ROOTexefileshell
unas2]
@="添加管理员权限"
"NoWorkingDirectory"=""
[HKEY_CLASSES_ROOTexefileshell
unas2command]
@="cmd.exe/ctakeown/f"%1"icacls"%1"/grantadministrators:F"
"IsolatedCommand"="cmd.exe/ctakeown/f"%1"icacls"%1"/grantadministrators:F"
[HKEY_CLASSES_ROOTDirectoryshell
unas]
@="添加管理员权限"
"NoWorkingDirectory"=""
[HKEY_CLASSES_ROOTDirectoryshell
unascommand]
@="cmd.exe/ctakeown/f"%1"/r/dyicacls"%1"/grantadministrators:F/t"
"IsolatedCommand"="cmd.exe/ctakeown/f"%1"/r/dyicacls"%1"/grantadministrators:F/t"

将内容复制到一个.txt的空白文档中，再把扩展名改为.reg，双击运行，再右击文件就有管理员取得所有权了

如果还有问题：右击文件——安全——再看看管理员有没有完全控制的权限