前端小工具箱

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，雙擊運行，再右擊文件就有管理員取得所有權了

如果還有問題：右擊文件——安全——再看看管理員有沒有完全控制的許可權