7 個 Bootstrap 線上編輯器用於快速開發響應式網站

oschina發表於2014-10-20

  Bootstrap 已經使響應式網站開發變得簡單很多。 但是如果你不必手動寫全部程式碼,事情會如何呢? 如果你可以自由地選擇你想要使用的Bootstrap 元件、並可以把它們拖拽到畫布中,事情會如何呢?

  這就是Bootstrap 編輯器的用武之地。

  Bootstrap 編輯器和生成器使得畫介面原型、測試、搭建響應式網站變得簡單。 儘管每一個編輯器都不同,但是它們都利用Bootstrap 龐大的元件庫實現了拖入和移除元件功能。

  在這篇文章中,我們總結了一些目前市場上最好的 Bootstrap 編輯器和生成器。 每一個編輯器都有它獨特的功能集和定價(其中一部分是免費的),因此最好的選擇依賴於你獨特的使用場景。

 Bootply

Bootply - Bootstrap Editor & Playground

  Bootply被稱為是Bootstrap的活動平臺。它不但是一個Bootstrap的編輯器和生成器,同時也擁有非常廣泛的程式碼庫。該編輯器可以讓你拖拽Bootstrap元件並可以編輯你自己的程式碼。

  Bootply 同時也整合了其他流行的Bootstrap外掛,微型程式碼庫和框架。你也可以藉助其他工具的使用像Font Awesome, jQuery + jQuery UI, Bootstrap Select, FuelUX, AngularJS, Google Maps 等等。

  價格:免費 / 每個月$4可下載原始碼。

 Brix.io

Brix.io - Bootstrap Builder

  Brix 是一個強大而且時尚的線上Bootstrap生成器,它能夠幫助你快速的製作響應式介面和網站。

  Brix可生成易於閱讀,格式良好的HTML,CSS和JS為所有託管伺服器或其他編輯器使用。

  Brix可以讓你和任何地方的團隊成員同時開發專案。

  同時開發和討論可以使工作更加的簡單,方便和高效。

  價格:每個月$14.90-$49.90

 Jetstrap

Jetstrap - Bootstrap Interface Builder

  Jetstrap是 Bootstrap 3的一個優質的基於web的介面生成工具,它幫助開發者和設計師提高網站的執行速度。你可以在任何地方任何裝置上展開你的工作。

  Jetstrap 允許你拖拽 Bootstrap元件到生成器並可用程式碼進行編輯。標記清晰的程式碼用法以及複雜元件的快速應用,可以讓你不用深究開發文件。

  價格:每個月$16-$99

 Divshot

Divshot - Bootstrap Builder

  Divshot 不僅僅是一款視覺化的Bootstrap編輯器,同時也為開發者提供一個應用級託管環境。

  Bootstrap 生成器能夠讓你自己編寫的高質量程式碼合適的巢狀在每一個新的元件上。同時,也支援新增其他流行的CSS框架像Foundation and Racthet。

  價格:免費 / 每個月$100託管

 Pinegrow

  Pinegrow 是一個桌面應用,它支援蘋果、Windows、Linus作業系統,利用多頁面編輯功能、CSS、LESS 樣式、Bootstrap 、Foundation和其它框架靈活的元件,它可以幫助你更快地畫出頁面原型、設計頁面。樣式表編輯器允許你拖入、拖出、重複、重新排序樣式。

  Pinegrow 不會去試著管理你的工作流程。 然而,它是一個可以節省工作量和時間的工具,這一點是有意義的。

  價格 :一次性個人許可證$49.95。

 LayouIt

Layoutit - Interface Builder for Bootstrap

  LayoutIt 是一個簡單但是高效的Bootstrap介面生成器,它可以讓你的前端開發更簡單。你可以從零開始或者使用基本的模板開始。

  可以簡單的把Bootstrap元素拖拽到皮膚上並可下載HTML。之後,你可以新增你自己的樣式並且可以將它整合到其他程式語言中。

  價格:免費

 Pingendo

Pingendo - Web Authoring With Comfort

  Pingendo 是一個視覺化的桌面應用程式,它能夠幫助你在Bootstrap的基礎上開發響應式網頁的原型。

  像大多數的Bootstrap的生成器一樣,你可以從豐富的集合中新增使用Bootstrap元素到內容。你可以從一個空的皮膚開始或者使用已經在集合中準備好的佈局開始。之後,你可以拖拽,拉伸和定製你自己的內容。

  價格:免費

 總結

  現在你已經瞭解了8個快速開發響應式網站的Bootstrap編輯器。

  如果你正在使用其中一種編輯器,或者還有其他的編輯器沒有在以上的列表中,請你在留言板裡面留言告訴我們。

  原文地址:http://bootstrapbay.com/blog/bootstrap-editors/

相關文章