如何簡單快速的修改Bootstrap

日期：2013-7-22  來源：GBin1.com

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

可悲的是，它純粹的功能喚起了我們本能的懶惰,，很多人始終堅持使用它的默認(rèn)設(shè)置?，F(xiàn)在，你要知道,，這些經(jīng)過豐富想象力的默認(rèn)樣式和布局網(wǎng)格都不差,，他們都是Twitter team花費了大量時間和精力的產(chǎn)物。他們是堅實的基礎(chǔ),。

但是,，Bootstrap的真諦是“基石”。Bootstrap框架,，并不意味著它是全部終結(jié)解決方案,。這個規(guī)則的一個例外可能是，如果你在內(nèi)部開發(fā)了些東西,，是公眾看不到的,。但是即使這樣，你的想法會將人們帶的更遠(yuǎn),，甚至改變一切,。

Bootstrap的開發(fā)者們確實做了非常棒的工作，使得很多事情變得簡單,，他們的代碼被模塊化,，你可以下載框架的獨立組件。他們在網(wǎng)站上甚至提供了一款基本自定義工具,，允許你編輯變量,。

其余的，則決定于我們,。一些真正的設(shè)計者和開發(fā)者已經(jīng)加緊創(chuàng)建工具和變更,，我們沒有理由落于人后?，F(xiàn)在已經(jīng)沒有借口再去使用Bootstrap的默認(rèn)設(shè)定了。

Bootstrap 變更

以下是一系列變更已經(jīng)非常成熟了,，可以將你基本的bootstrap變得不再是你熟識的那個樣子,。這些變更的使用可能有些限制，也有些是在特定條件下使用的,，但是如果他們符合你的需求,，他們會為你省下不少時間和金錢。

Flat UI

第一種變更就是Flat UI（扁平化設(shè)計界面）,，由Designmodo發(fā)布,。Flat UI迅速普及開來，在設(shè)計界有很好的理由：那就是它做的很漂亮,。它是為那些偏愛扁平化設(shè)計的人存在的 - 與Bootstrap多少有些的擬物化設(shè)計正相反 - 每一個UI元素都被依據(jù)嶄新的美學(xué)重新設(shè)計了,。

矢 量圖標(biāo)，一個新的字形圖標(biāo)字體,，自定義的UI元素（類似于to-do list）和多種改變起來非常容易的顏色主題,，F(xiàn)lat UI讓我，可能許多人也一樣,，重新設(shè)想Bootstrap可以如何展現(xiàn),。我經(jīng)常覺得，基本的段落元素中的文本大小對于網(wǎng)站而言有些小,，說句公道話,，我覺得 他們只適合于應(yīng)用程序的界面，在應(yīng)用程序的界面里,，你可以將文本放在狹小的空間里,。

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

Fbootstrapp

記得我之前說過有些變更是有特定使用條件的,？我當(dāng)然不是玩笑的,。Fbootstrapp已經(jīng)完全重新開發(fā)用于兼容Facebook的用戶界面元素。

為 什么要這么做呢,？用他們自己的話說就是“Fbootstrapp是一套發(fā)起了Facebook iFrame應(yīng)用開發(fā)的工具包,。它包括了基本的排版，表格,，按鈕,，表單，網(wǎng)格,，導(dǎo)航和更多元素的CSS和HTML樣式,，讓他們看起來和體驗起來都和典型的 Facebook一樣”,。

Facebook的開發(fā)者們，注意,，你們的工作開始變得簡單了,。

Jumpstart UI 管理模板

Bootstrap主要是用于應(yīng)用，如果你想要將它在經(jīng)典的“管理員界面”上應(yīng)用,，你還需要額外的工作,。Jumpstart UI為你帶來三種不同的模板,，讓你不再費力,。

管理員UI圖標(biāo)，小部件的樣式,，基于jQuery的數(shù)據(jù)可視化插件還有更多其他的,，被引入了干凈的，可自定制的,，全響應(yīng)布局中,。

這種變更不同于其他的最大一點是，它沒有任何免費的版本,，而必須付費才能使用,。它只需要15到20美元，與它可以實現(xiàn)的功能,，以及它符合你的特殊需求這兩點而言,，這個價格非常的劃算。

BootMetro

有些人喜歡它,，但更多人厭惡它,，但是不可否認(rèn)的是Windows 8和其Metro UI在設(shè)計界引起了轟動。我并不認(rèn)為這種UI有特別的用處（一些軟件商店除外）,，不過我們有一個BootMetro,！

它是免費的，而且看起來特性完善,，所以放心使用吧,。對于大多數(shù)人而言，他可能不是特別有用,，但是他是一種新奇的代碼體驗,。

Bootstrap客制化工具

所以你想引導(dǎo)你的Bootstrap更好的達(dá)到你的UI需求，你要如何開始,？你當(dāng)然可以直接看代碼,，我可以告訴你，這樣做是非常困難的,。

如 果你想手動改變所有的排版,，或者是按鈕,，鏈接顏色，又或者是導(dǎo)航樣式,，你可以在Bootstrap網(wǎng)站上的客制化應(yīng)用中編輯所有的變量,，但是你必須知道所 有顏色的HEX代碼，而且當(dāng)你做改變的時候,，你看不到任何的可視性返回,，也就是說你在修改的時候，完全不可預(yù)見你編輯后的樣子是什么樣的,。

但是幸運的是,，現(xiàn)在有很少一部分Bootstrap主題創(chuàng)作者為了這種客制化需求，特別做出了一些工具,。以下是我至今認(rèn)為最好的兩種,。

StyleBootstrap

如果你忽略笨拙的界面，StyleBootStrap是款很強(qiáng)大的工具,，用于編輯你可以在框架總見到的大多數(shù)默認(rèn)UI元素,。

Bootstrap Magic

Bootstrap Magic是一款幫助你重塑架構(gòu)的工具。它的界面簡單友好,，比StyleBootstrap可以微調(diào)更多的元素,。因此，它需要更多的時間,，但是它比起手動修改所有元素還是節(jié)省了不少時間,。

插件  & 片段

有些東西是Bootstrap沒有的，但是對我們而言卻是非常重要的,。首先是圖標(biāo),。

Font Awesome

Bootstrap 提供的圖像字符圖標(biāo)非常酷,，但是卻很有限,。你有一個“黑暗”圖標(biāo)，還會有一個“光亮”圖標(biāo),，這些都是一個可愛的小精靈圖像,。但是圖標(biāo)字體，應(yīng)該更為靈活,。 任何你可以用CSS3做的編輯,，在這些圖標(biāo)上也都應(yīng)該可以實現(xiàn)。比如改變顏色,，給他們加上一個陰影,，像寫CSS一樣簡單。Font Awesome可以現(xiàn)在可以為361個圖標(biāo)進(jìn)行這樣的修改。

Bootsnipp

Bootsnipp是一個HTML片段庫,，與Bootstrap結(jié)合使用,，并且不需要添加其他庫。片段包括：注冊和登陸表單,，日歷,，類似Gmail的e-mail界面，media player界面,，甚至更多,。

這并不是全部

Twitter寵愛的模板越來越被廣泛適應(yīng)，也許在自定義Bootstrap上有更多的方法,，更多的信息,，是我的列表乃至任何列表中都沒有的。畢竟,，互聯(lián)網(wǎng)就是為此而存在的,，對吧,？

via Nelly@極客社區(qū)