對(duì)于前端工程師來(lái)說(shuō),Bootstrap再熟悉不過(guò)了。如今Bootstrap的運(yùn)用越來(lái)越廣泛了,因?yàn)樗鼛?lái)了新的設(shè)計(jì)革命,使得設(shè)計(jì)以及開(kāi)發(fā)變得更加的方便以及簡(jiǎn)單?;诖?,W3Cschool小師妹將為大家?guī)?lái)10款Bootstrap 設(shè)計(jì)工具,2017年你絕對(duì)不能錯(cuò)過(guò)!
設(shè)計(jì)工具一:X-editable
原文:
譯文:
通過(guò)這款設(shè)計(jì)工具,你可以在頁(yè)面上對(duì)可編輯的一些元素進(jìn)行創(chuàng)建。X-editable可以使用非常多的引擎,像jQuery、jQuery-UI、Bootstrap等。不僅如此,Bootstrap有兩種模式,包括內(nèi)聯(lián)模式以及彈出模式。
設(shè)計(jì)工具二:Layoutlt
原文:
譯文:
這個(gè)在線工具,這款在線工具搭建Bootstrap響應(yīng)式的布局時(shí),可以快速且簡(jiǎn)單的完成。而且這些操作相當(dāng)簡(jiǎn)單,都是通過(guò)使用拖動(dòng)的方式。此外,元素的集成基本上是基于Bootstrap。因此,Layoutlt對(duì)于前端開(kāi)發(fā)者以及Web設(shè)計(jì)師而言,相當(dāng)方便快捷。
設(shè)計(jì)工具三:Grid Displayer
原文:
譯文:
這個(gè)小工具可以顯示Foundation以及Twitter Bootstrap網(wǎng)格,亦可被使用在Firefox以及基于Webkit中。
設(shè)計(jì)工具四:Jetstrap
原文:
譯文:
Jetstrap是可視化的一個(gè)制作工作,它針對(duì)Bootstrap框架二建成。設(shè)計(jì)師以及Web開(kāi)發(fā)者要想制作出一個(gè)漂亮網(wǎng)頁(yè),只需要在網(wǎng)頁(yè)端拖曳所有組件。而利用Jetstrap這個(gè)工具所制作出來(lái)的那些網(wǎng)頁(yè),完全符合Bootstrap的標(biāo)準(zhǔn)。如果電腦端頁(yè)面設(shè)計(jì)好,那么將自動(dòng)適配Pad端以及手機(jī)端。
設(shè)計(jì)工具五:Divshot
原文:
譯文:
Divshot這個(gè)在線的網(wǎng)站,它允許開(kāi)發(fā)人員設(shè)計(jì)Web界面時(shí),通過(guò)可視化的方式來(lái)進(jìn)行,并且將直接生成CSS以及HTML代碼。Divshot提供了比較常用的一些Web UI組件,那些框架的創(chuàng)建,都是基于Bootstrap框架。它生成的一個(gè)界面,也是基于Bootstrap框架所運(yùn)行。
設(shè)計(jì)工具六:Bootply
原文:
譯文:
運(yùn)用Bootply這個(gè)工具,非常輕松的就基于Bootstrap來(lái)設(shè)計(jì)以及開(kāi)發(fā)原型、擴(kuò)展測(cè)試。除此以外,Bootstrap還有個(gè)很強(qiáng)大的功能,那就是可以和其他比較流行的庫(kù)、微框架、Bootstrap插件等整合。
設(shè)計(jì)工具七:Bootstrap Magic
原文:
譯文:
這是一款主題創(chuàng)建的工具,它基于AngularJS以及Bootstrap。運(yùn)用Bootstrap Magic,開(kāi)發(fā)人員可以對(duì)自己的Twitter Bootstrap主題進(jìn)行創(chuàng)建,還可以看到內(nèi)容發(fā)生了什么變化。除此以外,Bootstrap Magic還可以添加那些來(lái)自Google Webfont 的網(wǎng)頁(yè)字體。
設(shè)計(jì)工具八:Font Awesome
原文:
譯文:
你可以像修改文字樣式那樣來(lái)修改圖標(biāo)樣式。
Font Awesome是圖標(biāo)字體,只要網(wǎng)頁(yè)當(dāng)中可能用到的圖標(biāo),它都囊括,它專門為Twitter Bootstrap而設(shè)計(jì)。這些圖標(biāo)的顯示,是通過(guò)Web Font方式,它還可以任意改變顏色以及縮放。要是你想修改圖標(biāo)的樣式,可以像文字樣式的修改方式那樣去操作。
上面W3Cschool小師妹為大家收集的八款Bootstrap 設(shè)計(jì)工具,它們的功能都非常棒,可以幫助開(kāi)發(fā)者構(gòu)建想要的應(yīng)用。無(wú)論你想要漂亮的客戶端頁(yè)面,還是滿意的訪問(wèn)者,Bootstrap 設(shè)計(jì)工具都可以幫你辦到。還等什么,趕快收藏吧!