超棒的 15 款 Bootstrap UI 編輯器

發表於2014-01-24

自從 2011 年 Mark Otto 和 Jacob Thornton 開發了 Bootstrap，我們第一次接觸並熟知了 Bootstrap 。這些都歸功於 Twitter！從那以後，它就非常流行並且成為了最好的響應式框架之一。Bootstrap 幫助開發者快速高效的開啟大量新的 web 專案，受到了廣大開發者們的青睞。

為了照顧那些不是很熟悉 Bootstrap 但是又想繼續深入瞭解的開發者，我們在這裡簡單的介紹一下。Bootstrap 是一個 pre-styled 元件的擴充套件庫，有著大量的附件和非常好用的外掛，可以幫助開發者們快速的開始他們的新專案。

好了，迴歸今天的主題，這裡介紹的是 15 款最好的 Bootstrap 設計工具和資源，也可以說是 UI 編輯器或者是線上編輯工具。這些超棒的 Bootstrap UI 編輯器允許開發者們自定義設計框架，實現他們心中每個關於 web 的設想。

下面的列表就是精心挑選好的超棒 Bootstrap UI 編輯器，分享給所有的開發者和喜愛 Bootstrap 的朋友，不用再為找不到合適的 Bootstrap 設計工具而煩惱，也不用在眾多 Bootstrap 設計工具中徘徊迷茫了！好好閱讀下面的列表，找到適合你的那一款 Bootstrap UI 編輯器吧：）

1. Bootstrap Magic

這是一個 Bootstrap 主題生成器，使用最新的 Bootstrap 3 版本和 Angular JS 版本，提供一個鮮活的使用者修改預覽。它包括了各種各樣的匯入，一個顏色選擇器和智慧的預先輸入。更神奇的是，Bootstrap 會根據使用者的每個選擇來重新簡歷框架，方便使用者的下載和使用。

2. BootSwatchr

BootSwatchr 是由 Drew Strickiand 獨立開發和維護的，是唯一支援從右到左語言顯示的 Bootstrap 自定義構建工具，這也是它的特色之一。BootSwatchr 是個視覺化的工具，可以從底層開始建立 Bootstrap 主題。

3. Bootstrap Live Editor

Bootstrap Live Editor 是個所見即所得的構建 Bootstrap 的編輯器。在 Bootstrap 準備好的內容和程式碼片段的基礎上提供一個又好又優雅的方法來編輯和美化 html，也因此它是個明智的選擇。除此之外，它還包括高階的選項比如按鈕配置，自定義標籤和為使用者做最明智最有益的選擇。

4. Fancy Boot

Fancyboot 是個非常有用的 Bootstrap 自定義工具，允許使用者編輯 Bootstrap 的配置，自動預覽他們的修改結果。通過滑動選單可以選擇需要使用的外掛和元件。當使用者做好了相應的修改，可以下載一個包含使用者所使用的 jQuery 外掛的編譯好的和簡化後的 CSS 檔案。

5. Style Bootstrap

Style Bootstrap 是個非常棒的內建瀏覽器的 GUI 實用工具，幫助使用者自定義 Twitter Bootstrap 外觀。它非常容易進行自定義操作。從 body 風格，字型排版，按鈕，導航，格式，通知提示和其他使用者很容易根據自己的意願自定義的元素。除了強大的自定義功能，它還可以很容易生成可下載的 CSS 檔案。

6. Lavish

Lavish 是個幫助使用者從一個影象中定製自己喜歡的 Bootstrap 配色方案。使用者可以從影象中選擇各種顏色用在 body 背景，連結，頭部，選單，標籤，文字，下拉選單等等元素上。一旦你確定了 Bootstrap 配色方案，就可以很方便的下載相應的 Boostrap.css 檔案。

7. Bootstrap ThemeRoller

Bootstrap ThemeRoller 是個直觀的 web 應用程式，提供一個視覺化的介面讓使用者按照自己的風格建立屬於自己的 Bootstrap 主題。有了這個工具，使用者可以自定義顏色，大小，字型，格式，表，按鈕，警告資訊，導航條，選單等等元素。

這個應用還會幫使用者建立的每種風格都生成唯一的一個 URL ，這樣就可以儲存使用者所有的設定。更不可思議的是，當使用者離開的時候，使用者可以停止或者恢復自己定製的頁面。

8. LayoutIt!

LayoutIt！擁有拖拽介面的功能，能簡單迅速的構建一個 Bootstrap 前端程式碼。LayoutIt！相容任何的程式語言，允許使用者下載 HTML ，在這裡自由的進行編碼設計。

9. Pingendo

Pingendo 是個視覺化的桌面應用程式，允許使用者給予流行的 Twitter Bootstrap 框架建立響應式 web 頁面原型。Pingendo 還提供大量的現成的佈局，拖拽元素的位置，調整大小和自定義的功能。使用者可以自行優化他們的頁面，插入他們自己的內容。

10. Kickstrap

Kickstrap 是個 Bootstrap UI 編輯器，使用 Firebase 作為一個後臺服務。它無縫的接合了 Bootstrap 和頂級的 web 技術。更厲害的是，它可以執行一個已驗證的，不需要本地後臺支援，資料庫驅動的 web 應用。

Bootply 是一款很棒的 Bootstrap UI 編輯工具，儘可能簡單的讓使用者編輯 Bootstrap 友好的 CSS ，HTML 和 Javascript 。同時也是一個可拖拽的視覺化編輯器，用來設計，建立原型和測試 Bootstrap 框架。Bootply 有個程式碼儲存庫，裡面包括了 Bootstrap 程式碼片段，示例和模板。除了以上這些，更吸引人的是它有個非常活躍的 Bootply 社群，使用者可以很方便的發現，分享和展示相關的程式碼和片段。

12. X-editable

X-Editable 是一個擴充套件庫，允許使用者建立可編輯的元素，比如頁面彈出和內聯模式。她提供本地的 Bootstrap，jQuery UI 或者是純 jQuery 編輯功能。此 Bootstrap UI 編輯器擁有許多很強大的功能，包括客戶端，服務端驗證，支援鍵盤，live 事件，可定製的容器空間等等。總而言之，它提供非常快速的開發功能，易於刪除欄位，一個用來更新資料的簡簡單後臺指令碼。

13. Jetstrap

不要錯誤的以為 Jetstrap 只是個簡單的實體模型工具，它是 100% 基於 web 介面的 Twitter Bootstrap 構建工具。使用者不需要下載任何型別的軟體就可以使用 Jetstrap。使用者只需要登入，然後構建自己的專案，就可以隨時隨地進行訪問了。構建功能主要是提供給開發者和設計者的，使用者很容易就可以通過 Jetstrap 生成漂亮的網站，而且執行速度非常快