Bootstrap定制工具集錦

Bootstrap并不是單單意味著HTML/CSS界面框架，更確切的說(shuō)，它改變了整個(gè)游戲規(guī)則。這個(gè)囊括了應(yīng)有盡有的代碼框架使得許多應(yīng)用和網(wǎng)站的設(shè)計(jì)開(kāi)發(fā)變得簡(jiǎn)便許多，而且它將大量的HTML框架普及成了產(chǎn)品。

可悲的是，它純粹的功能喚起了我們本能的懶惰，很多人始終堅(jiān)持使用它的默認(rèn)設(shè)置。但是，Bootstrap的真諦是“基石”。Bootstrap框架，并不意味著它是全部終結(jié)解決方案。

Bootstrap的開(kāi)發(fā)者們確實(shí)做了非常棒的工作，使得很多事情變得簡(jiǎn)單，他們的代碼被模塊化，你可以下載框架的獨(dú)立組件。他們?cè)诰W(wǎng)站上甚至提供了一款基本自定義工具，允許你進(jìn)行定制。

另外，一些真正的設(shè)計(jì)者和開(kāi)發(fā)者也開(kāi)發(fā)了一些定制工具。現(xiàn)在你已經(jīng)沒(méi)有借口再去使用Bootstrap的默認(rèn)設(shè)定了。

一、Bootstrap主題工具

以下的這些工具可以將基本的bootstrap變得不再是你熟識(shí)的那個(gè)樣子。它們中的一些可能在使用時(shí)會(huì)有限制，或者只允許在特定條件下使用。但是如果它們符合你的需求的話，那么會(huì)為你省下不少時(shí)間和金錢(qián)。

1.  Flat UI

Flat UI（扁平化設(shè)計(jì)界面）由Designmodo發(fā)布，是為那些偏愛(ài)扁平化設(shè)計(jì)的人存在的，與Bootstrap多少有些擬物化的設(shè)計(jì)正相反，它的每一個(gè)UI元素都被根據(jù)最新的美學(xué)重新設(shè)計(jì)了。

Flat UI是免費(fèi)的，但是你也可以使用付費(fèi)的專(zhuān)業(yè)版本，專(zhuān)業(yè)版本中有附加元素、功能和PSD文件。

2.  Fbootstrapp

Fbootstrapp用于開(kāi)發(fā)兼容Facebook用戶(hù)界面的元素，用官網(wǎng)的話說(shuō)就是“Fbootstrapp是一套用于Facebook iFrame應(yīng)用開(kāi)發(fā)的工具包”。它包括基本的排版、表格、按鈕、表單、網(wǎng)格、導(dǎo)航和更多的CSS和HTML樣式元素，讓界面看起來(lái)和體驗(yàn)起來(lái)都和典型的 Facebook一樣。

3.  Jumpstart UI

Bootstrap主要用于應(yīng)用，如果你想要將它用于經(jīng)典的“管理員界面”，你還需要額外的工作。不過(guò)，Jumpstart UI簡(jiǎn)化了這些工作，為你帶來(lái)3種不同的模板，此外還提供了管理員UI圖標(biāo)、小部件樣式、基于jQuery的數(shù)據(jù)可視化插件等等。

4.  BootMetro

為你帶來(lái)Windows 8的Metro UI風(fēng)格界面。

二、Bootstrap客制化工具

所以你想讓Bootstrap更好地達(dá)到你的UI需求，你將如何開(kāi)始？你當(dāng)然可以直接看代碼，但是這樣做是非常困難的。

如果你想手動(dòng)更改排版、按鈕、鏈接顏色或者是導(dǎo)航樣式，你可以在Bootstrap網(wǎng)站上的客制化應(yīng)用中編輯所有的變量，但是當(dāng)你修改時(shí)候，你看不到任何可視性的反饋，也就是說(shuō)你在修改的時(shí)候，完全不可預(yù)見(jiàn)修改后的樣子。

但幸運(yùn)的是，我們有以下這幾款可視化定制工具。

1.  StyleBootstrap

StyleBootStrap是款很強(qiáng)大的工具，可以編輯在框架中見(jiàn)到的大多數(shù)默認(rèn)UI元素。

2.  Bootstrap Magic

Bootstrap Magic是一款幫助你重塑架構(gòu)的工具。它的界面簡(jiǎn)單友好，比StyleBootstrap可以微調(diào)更多的元素。

三、插件 & 片段

有些東西是Bootstrap沒(méi)有的，但是對(duì)我們而言卻是非常重要的。

1.  Font Awesome

Bootstrap 提供的圖像字符圖標(biāo)非?？?，但是卻很有限。通過(guò)Font Awesome，你可以為361個(gè)圖標(biāo)進(jìn)行修改，比如改變顏色、添加陰影，像寫(xiě)CSS一樣簡(jiǎn)單。

2.  Bootsnipp

Bootsnipp是一個(gè)HTML片段庫(kù)，可與Bootstrap結(jié)合使用，并且不需要添加其他庫(kù)。片段包括：注冊(cè)和登錄表單、日歷、類(lèi)似Gmail的E-mail界面、media player界面等等。