15個(gè)最好的Bootstrap設(shè)計(jì)工具推薦

Bootstrap是由前Twitter設(shè)計(jì)師Mark Otto和Jacob Thornton開(kāi)發(fā)的前端工具包，其提供了優(yōu)雅的HTML和CSS規(guī)范。Bootstrap不單單是一個(gè)框架，更確切的說(shuō)，它改變了整個(gè)游戲規(guī)則。該框架使得許多應(yīng)用和網(wǎng)站的設(shè)計(jì)開(kāi)發(fā)變得簡(jiǎn)便許多，而且它將大量的HTML框架普及成了產(chǎn)品。 

本文為你帶來(lái)15款針對(duì)Bootstrap框架的開(kāi)發(fā)工具，可以幫助你更輕松地使用Bootstrap來(lái)構(gòu)建想要的應(yīng)用。 

1.Layoutit 

Layoutit是一個(gè)在線(xiàn)工具， 它可以簡(jiǎn)單而又快速搭建Bootstrap響應(yīng)式布局，操作基本是使用拖動(dòng)方式來(lái)完成，很簡(jiǎn)單，而元素都是基于Bootstrap框架集成的， 所以這工具很適合Web設(shè)計(jì)師和前端開(kāi)發(fā)人員使用，快捷方便。 

2.X-editable

X-editable能夠讓你在頁(yè)面上創(chuàng)建可編輯的元素，它能夠使用任何引擎，比如Bootstrap、jQuery-UI、jQuery），并且包含彈出式和內(nèi)聯(lián)模式。 

3.Jetstrap 

這是一個(gè)針對(duì)Bootstrap框架的可視化制作工具，Web開(kāi)發(fā)者、設(shè)計(jì)師直接在網(wǎng)頁(yè)端拖拽各個(gè)組件就可以制作出漂亮的網(wǎng)頁(yè)。通過(guò)Jetstrap制作出來(lái)的網(wǎng)頁(yè)100%符合Bootstrap標(biāo)準(zhǔn)，你只要設(shè)計(jì)了電腦端的頁(yè)面，它會(huì)自動(dòng)適配手機(jī)端和Pad端（響應(yīng)式設(shè)計(jì)）。 

4.Grid Displayer

Grid Displayer是一個(gè)可以顯示Twitter Bootstrap網(wǎng)格（固定和浮動(dòng)網(wǎng)格）和Foundation（2.0 和3.0版本）的小工具。可以在Firefox和基于Webkit的瀏覽器中使用。 

5.Bootply

通過(guò)Bootply可以非常輕松地基于Bootstrap來(lái)進(jìn)行設(shè)計(jì)、開(kāi)發(fā)原型、擴(kuò)展和測(cè)試等。Bootply可與其他流行的Bootstrap插件、微框架和庫(kù)進(jìn)行整合。 

6.Divshot

Divshot是一個(gè)在線(xiàn)網(wǎng)站，允許開(kāi)發(fā)者通過(guò)可視化方式進(jìn)行Web界面的設(shè)計(jì)，并直接生成HTML和CSS代碼。該工具提供常用的Web UI組件，界面基于Bootstrap框架構(gòu)建，生成的界面也基于Bootstrap框架運(yùn)行。 

7.Bootstrap Magic

Bootstrap Magic是一款基于Bootstrap和AngularJS的主題創(chuàng)建工具，開(kāi)發(fā)者可以輕松地創(chuàng)建自己的 Twitter Bootstrap主題，并可以立即看到內(nèi)容變化。還可以添加來(lái)自Google Webfont 的很棒的網(wǎng)頁(yè)字體。 

8.GetkickStrap 

Kickstrap無(wú)縫整合了Bootstrap和頂級(jí)Web技術(shù)，無(wú)需一個(gè)本地后端即可運(yùn)行一個(gè)已驗(yàn)證的、數(shù)據(jù)庫(kù)驅(qū)動(dòng)的Web應(yīng)用程序。用戶(hù)還可以使用JSPM.io提供的強(qiáng)大的、基于Require.js構(gòu)建的前端包依賴(lài)管理工具。 

9.Font Awesome

Font Awesome是一套專(zhuān)為T(mén)witter Bootstrap設(shè)計(jì)的圖標(biāo)字體，幾乎囊括了網(wǎng)頁(yè)中可能用到的所有圖標(biāo)，這些圖標(biāo)通過(guò)Web Font的方式來(lái)顯示，可以被任意縮放、改變顏色，你可以像修改文字樣式那樣來(lái)修改圖標(biāo)樣式。 

10.Bootstrap Button Generator

通過(guò)Bootstrap Button Generator，你只需輸入你想指定給新按鈕的樣式的CSS類(lèi)，并簡(jiǎn)單調(diào)整圖標(biāo)的顏色，即可獲得新的圖標(biāo)。 

11.Paintstrap

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

12.Fancyboot 

Fancyboot 是個(gè)非常有用的Bootstrap自定義工具，通過(guò)滑動(dòng)菜單可以選擇需要使用的插件和組件，當(dāng)用戶(hù)做好了相應(yīng)的修改，可以下載一個(gè)包含用戶(hù)所使用的 jQuery 插件的編譯好的和簡(jiǎn)化后的 CSS 文件。 

13.Bootstrap Designer

Bootstrap Designer是一個(gè)在線(xiàn)設(shè)計(jì)工具，可以幫你生成漂亮的基于Bootstrap框架的HTML5模板。 

14.Bootsnipp

Bootsnipp是一個(gè)針對(duì)Web設(shè)計(jì)師和開(kāi)發(fā)者的前端元素庫(kù)，任何使用Bootstrap框架的開(kāi)發(fā)者都可以找到所需的Web元素。

15.Easel

Easel是一個(gè)針對(duì)Bootstrap的基于瀏覽器的設(shè)計(jì)工具，可以幫助你快速制作出產(chǎn)品原型頁(yè)面。Easel能夠創(chuàng)建元素，如組合文本框、圖形或表格等，并且復(fù)制和修改也很容易。同時(shí)控制臺(tái)還配備了一套現(xiàn)成的按鈕、表單和圖標(biāo)，直接拖拽就能使用。你還可以建立一個(gè)自己的常用小工具庫(kù)，這樣使用起來(lái)更快捷。 

來(lái)自：designgeekz

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)