15 個最好的 Bootstrap 設計工具推薦

Bootstrap是由前Twitter設計師Mark Otto和Jacob Thornton開發的前端工具包,其提供了優雅的HTML和CSS規範。Bootstrap不單單是一個框架,更確切的說,它改變了整個遊戲規則。該框架使得許多應用和網站的設計開發變得簡便許多,而且它將大量的HTML框架普及成了產品。 

本文爲你帶來15款針對Bootstrap框架的開發工具,可以幫助你更輕鬆地使用Bootstrap來構建想要的應用。 

1. Layoutit 

Layoutit是一個在線工具, 它可以簡單而又快速搭建Bootstrap響應式佈局,操作基本是使用拖動方式來完成,很簡單,而元素都是基於Bootstrap框架集成的, 所以這工具很適合Web設計師和前端開發人員使用,快捷方便。 



2. X-editable 

X-editable能夠讓你在頁面上創建可編輯的元素,它能夠使用任何引擎,比如Bootstrap、jQuery-UI、jQuery),並且包含彈出式和內聯模式。 



3. Jetstrap 

這是一個針對Bootstrap框架的可視化製作工具,Web開發者、設計師直接在網頁端拖拽各個組件就可以製作出漂亮的網頁。通過Jetstrap製作出來的網頁100%符合Bootstrap標準,你只要設計了電腦端的頁面,它會自動適配手機端和Pad端(響應式設計)。 



4. Grid Displayer 

Grid Displayer是一個可以顯示Twitter Bootstrap網格(固定和浮動網格)和Foundation(2.0 和3.0版本)的小工具。可以在Firefox和基於Webkit的瀏覽器中使用。 



5. Bootply 

通過Bootply可以非常輕鬆地基於Bootstrap來進行設計、開發原型、擴展和測試等。Bootply可與其他流行的Bootstrap插件、微框架和庫進行整合。 



6. DivShot 

Divshot是一個在線網站,允許開發者通過可視化方式進行Web界面的設計,並直接生成HTML和CSS代碼。該工具提供常用的Web UI組件,界面基於Bootstrap框架構建,生成的界面也基於Bootstrap框架運行。 



7. Bootstrap Magic 

Bootstrap Magic 是一款基於 Bootstrap 和 AngularJS 的主題創建工具,開發者可以輕鬆地創建自己的 Twitter Bootstrap 主題,並可以立即看到內容變化。還可以添加來自Google Webfont 的很棒的網頁字體。 



8. GetkickStrap 

Kickstrap無縫整合了Bootstrap和頂級Web技術,無需一個本地後端即可運行一個已驗證的、數據庫驅動的Web應用程序。用戶還可以使用JSPM.io提供的強大的、基於Require.js構建的前端包依賴管理工具。 



9. Font Awesome 

Font Awesome是一套專爲Twitter Bootstrap設計的圖標字體,幾乎囊括了網頁中可能用到的所有圖標,這些圖標通過Web Font的方式來顯示,可以被任意縮放、改變顏色,你可以像修改文字樣式那樣來修改圖標樣式。 



10. Bootstrap Button Generator 

通過Bootstrap Button Generator,你只需輸入你想指定給新按鈕的樣式的CSS類,並簡單調整圖標的顏色,即可獲得新的圖標。 



11. PaintStrap 

Paintstrap允許你使用Adobe kuler / COLOURlovers顏色方案來生成漂亮的Twitter Bootstrap主題。 



12. Fancyboot 

Fancyboot 是個非常有用的Bootstrap自定義工具,通過滑動菜單可以選擇需要使用的插件和組件,當用戶做好了相應的修改,可以下載一個包含用戶所使用的 jQuery 插件的編譯好的和簡化後的 CSS 文件。 



13. Bootstrap Designer 

Bootstrap Designer是一個在線設計工具,可以幫你生成漂亮的基於Bootstrap框架的HTML5模板。 



14. Bootsnipp 

Bootsnipp是一個針對Web設計師和開發者的前端元素庫,任何使用Bootstrap框架的開發者都可以找到所需的Web元素。 



15. Easel 

Easel是一個針對Bootstrap的基於瀏覽器的設計工具,可以幫助你快速製作出產品原型頁面。Easel能夠創建元素,如組合文本框、圖形或表格等,並且複製和修改也很容易。同時控制檯還配備了一套現成的按鈕、表單和圖標,直接拖拽就能使用。你還可以建立一個自己的常用小工具庫,這樣使用起來更快捷。 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章