如何簡單快速的修改Bootstrap

Bootstrap並非單單意味着HTML/CSS界面框架，更確切的說，它改變了整個遊戲規則。這個囊括了應有盡有的代碼框架使得許多應用和網站的設計開發變得簡便許多，並且它將大量的HTML框架普及成了產品。

可悲的是，它純粹的功能喚起了咱們本能的懶惰，不少人始終堅持使用它的默認設置。如今，你要知道，這些通過豐富想象力的默認樣式和佈局網格都不差，他們都是Twitter team花費了大量時間和精力的產物。他們是堅實的基礎。

可是，Bootstrap的真諦是「基石」。Bootstrap框架，並不意味着它是所有終結解決方案。這個規則的一個例外多是，若是你在內部開發了些東西，是公衆看不到的。可是即便這樣，你的想法會將人們帶的更遠，甚至改變一切。

Bootstrap的開發者們確實作了很是棒的工做，使得不少事情變得簡單，他們的代碼被模塊化，你能夠下載框架的獨立組件。他們在網站上甚至提供了一款基本自定義工具，容許你編輯變量。

其他的，則決定於咱們。一些真正的設計者和開發者已經加緊建立工具和變動，咱們沒有理由落於人後。如今已經沒有藉口再去使用Bootstrap的默認設定了。

Bootstrap 變動

如下是一系列變動已經很是成熟了，能夠將你基本的bootstrap變得再也不是你熟識的那個樣子。這些變動的使用可能有些限制，也有些是在特定條件下使用的，可是若是他們符合你的需求，他們會爲你省下很多時間和金錢。

Flat UI

第一種變動就是Flat UI（扁平化設計界面），由Designmodo發佈。Flat UI迅速普及開來，在設計界有很好的理由：那就是它作的很漂亮。它是爲那些偏心扁平化設計的人存在的 - 與Bootstrap多少有些的擬物化設計正相反 - 每個UI元素都被依據嶄新的美學從新設計了。

矢 量圖標，一個新的字形圖標字體，自定義的UI元素（相似於to-do list）和多種改變起來很是容易的顏色主題，Flat UI讓我，可能許多人也同樣，從新設想Bootstrap能夠如何展示。我常常以爲，基本的段落元素中的文本大小對於網站而言有些小，說句公道話，我以爲 他們只適合於應用程序的界面，在應用程序的界面裏，你能夠將文本放在狹小的空間裏。

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

Fbootstrapp

記得我以前說過有些變動是有特定使用條件的？我固然不是玩笑的。Fbootstrapp已經徹底從新開發用於兼容Facebook的用戶界面元素。

爲 什麼要這麼作呢？用他們本身的話說就是「Fbootstrapp是一套發起了Facebook iFrame應用開發的工具包。它包括了基本的排版，表格，按鈕，表單，網格，導航和更多元素的CSS和HTML樣式，讓他們看起來和體驗起來都和典型的 Facebook同樣」。

Facebook的開發者們，注意，大家的工做開始變得簡單了。

Jumpstart UI 管理模板

Bootstrap主要是用於應用，若是你想要將它在經典的「管理員界面」上應用，你還須要額外的工做。Jumpstart UI爲你帶來三種不一樣的模板，讓你再也不費力。

管理員UI圖標，小部件的樣式，基於jQuery的數據可視化插件還有更多其餘的，被引入了乾淨的，可自定製的，全響應佈局中。

這種變動不一樣於其餘的最大一點是，它沒有任何免費的版本，而必須付費才能使用。它只須要15到20美圓，與它能夠實現的功能，以及它符合你的特殊需求這兩點而言，這個價格很是的划算。

BootMetro

有些人喜歡它，但更多人厭惡它，可是不能否認的是Windows 8和其Metro UI在設計界引發了轟動。我並不認爲這種UI有特別的用處（一些軟件商店除外），不過咱們有一個BootMetro！

它是免費的，並且看起來特性完善，因此放心使用吧。對於大多數人而言，他可能不是特別有用，可是他是一種新奇的代碼體驗。

Bootstrap客製化工具

因此你想引導你的Bootstrap更好的達到你的UI需求，你要如何開始？你固然能夠直接看代碼，我能夠告訴你，這樣作是很是困難的。

如 果你想手動改變全部的排版，或者是按鈕，連接顏色，又或者是導航樣式，你能夠在Bootstrap網站上的客製化應用中編輯全部的變量，可是你必須知道所 有顏色的HEX代碼，並且當你作改變的時候，你看不到任何的可視性返回，也就是說你在修改的時候，徹底不可預見你編輯後的樣子是什麼樣的。

可是幸運的是，如今有不多一部分Bootstrap主題創做者爲了這種客製化需求，特別作出了一些工具。如下是我至今認爲最好的兩種。

StyleBootstrap

若是你忽略笨拙的界面，StyleBootStrap是款很強大的工具，用於編輯你能夠在框架總見到的大多數默認UI元素。

Bootstrap Magic

Bootstrap Magic是一款幫助你重塑架構的工具。它的界面簡單友好，比StyleBootstrap能夠微調更多的元素。所以，它須要更多的時間，可是它比起手動修改全部元素仍是節省了很多時間。

插件  & 片斷

有些東西是Bootstrap沒有的，可是對咱們而言倒是很是重要的。首先是圖標。

Font Awesome

Bootstrap 提供的圖像字符圖標很是酷，可是卻頗有限。你有一個「黑暗」圖標，還會有一個「光亮」圖標，這些都是一個可愛的小精靈圖像。可是圖標字體，應該更爲靈活。 任何你能夠用CSS3作的編輯，在這些圖標上也都應該能夠實現。好比改變顏色，給他們加上一個陰影，像寫CSS同樣簡單。Font Awesome能夠如今能夠爲361個圖標進行這樣的修改。

Bootsnipp

Bootsnipp是一個HTML片斷庫，與Bootstrap結合使用，而且不須要添加其餘庫。片斷包括：註冊和登錄表單，日曆，相似Gmail的e-mail界面，media player界面，甚至更多。

這並非所有

Twitter寵愛的模板愈來愈被普遍適應，也許在自定義Bootstrap上有更多的方法，更多的信息，是個人列表乃至任何列表中都沒有的。畢竟，互聯網就是爲此而存在的，對吧？