網頁設計的過程當中涉及到許多不同的技術和專業領域。這些領域包括網頁(平面設計),界面設計,創意,(其中包括標準化的代碼以及專有軟體),用戶體驗設計和搜尋引擎優化(或 SEO)。
在工程化和工作細分程度越來越高的今天,誕生了非常多而且非常棒的 Web 前端開發框架,其中 Twitter 的 Bootstrap 就是這其中的優秀者之一。Twitter Bootstrap 的出現解決了開發人員在 CSS 設計的困惱與頁面 Layout 設計。尤其,在現今的企業內部開發人員往往都兼具美工人員,因此 Framework 可以快速完成前端一些基礎建設以及跨部門的工作,節省一些開發人員的時間。
Twitter Bootstrap 自 2011 年最初發佈在網路後,迅速成為 Web 領域最流行的響應式前端開發框架之一,是網頁設計的優秀實踐。Twitter Bootstrap 並不缺乏資源,在這篇文章中我們就來為大家介紹一些特別優秀的 Bootstrap 開發工具更好的滿足各位(或客戶)的要求以及幫助提高 Web 開發的生產力。
Layoutit
Bootply 讓你可以方便的調試 Bootstrap。編輯 CSS ,HTML 和 JavaScript。可以使用Bootply 設計,原型,擴展或測試 Bootstrap 框架。 Bootply 集成了其他流行的 Bootstrap 插件,微型庫和框架。
X-editable
X-editable 支援就地編輯以及 Twitter Bootstrap, jQuery UI 或純 jQuery。這個微型庫允許你在自己的網頁上創造可編輯元素。包括彈出式和內嵌模式。它支援的輸入元素包括文字,文字框,下拉列表,日期, 日期界面和核對表。它支援客戶端和伺服器端驗證。另外容器的位置是完全可定制的,用戶可以透過單點,雙按自動或手動切換。
Jetstrap
Jetstrap 是一個完全基於 Web 架構,用於 Twitter Bootstrap 的界面構建工具,專為開發人員,設計師打造。Jetstrap 可以幫助您快速創造出漂亮網站,且只需要花費很少的精力。
Grid Displayer
Grid Displayer 是一個書籤工具,可以用於顯示 Twitter Bootstrap(固定和流體網格)以及Foundation( 2.0 和 3.0 )的網格。它支援 Firefox 和 WebKit 核心的瀏覽器。
Bootply
Bootply 讓你可以方便的調試 Bootstrap。編輯 CSS ,HTML 和 JavaScript。可以使用Bootply 設計,原型,擴展或測試 Bootstrap 框架。 Bootply 整合了其他熱門的 Bootstrap 插件,微型庫和框架。
DivShot
Divshot 是一個基於拖放的前端編輯器,允許你使用 Twitter Bootstrap(當然 Foundation 也可以)建立響應式的網站,不需要自己動手編碼,只需要進行簡單的拖放操作即可。
Bootstrap Magic
Bootstrap Magic 主題生成器基於 Twitter Bootstrap 3 和 AngularJS 構建。可以輕鬆快速的建立自己的 Twitter Bootstarp 主題。讓你可以立即看到正在改變的內容是什麼,也還可以添加來自 Google Webfont 的精美網頁字體。
GetkickStrap
Kickstrap 採用頂級的 Web 技術完美結合 Bootstrap。它可以運行資料庫驅動經過驗證的 Web 應用程式,且不需要原生後台。 Kickstrap 結合 JSPM.io 提供了建立在 Require.js 強大的前端軟體包的依賴關係。 Kickstrap 應用程式是可以在任何時間在 Web 應用程式的生命週期中運行的靜態資源集合。
Font Awesome
Font Awesome 是一套專門為 Twitter Boostrap 設計的圖標字體庫。這套圖標字體集幾乎囊括了網頁中可能用到的所有圖標,除了包括 Twitter Boostrap 預設的圖標外,還有社交網路圖標、Web 應用程式圖標和編輯器圖標等等,可以免費用於商業項目。
Bootstrap Button Generator
Bootstrap Button Generator 是一款很好用的 Twitter Bootstrap 按鈕生成工具,你只需要輸入你要分配的新的按鈕樣式,並與不同的按鈕顏色搭配,更新就可以即時預覽。
PaintStrap
Paintstrap 讓你可以生成使用漂亮的 Twitter Bootstrap 主題,使用 Adobe Kuler 或者COLOURlovers 配色。
Fancyboot
Fancyboot 是一個簡單但功能強大的 Twitter Bootstrap 定制工具。控制恰到好處,除去了所有不必要的複雜性。
Bootstrap Designer
Bootstrap Designer 是一個線上設計工具,可以製作出基於 Twitter Bootstrap 的 HTML5 漂亮模板。輕鬆創造出不同的設計風格:簡約風格,黑白,可排版,單色的外觀,乾淨及創意等。
Bootsnipp
Bootsnipp 是一個為網頁設計師和 Web 開發人員設計的元素畫廊,任何使用 Twitter Bootstrap 的人都會發現在他們的工作是不可或缺的工具。
Easel
Easel 是一個令人印象深刻的 Twitter Bootstrap 瀏覽器設計工具,可以讓你在文件中特定的元素鏈結到其他文件原型應用程式。你甚至可以提供用戶測試的專用鏈結讓你儘早得到反饋。