如何簡單快速的修改Bootstrap

jjfat 11年前發布 | 17K 次閱讀 bootst bootstrap模板 使用bootstrap Bootstrap

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

可悲的是,它純粹的功能喚起了我們本能的懶惰,很多人始終堅持使用它的默認設置。現在,你要知道,這些經過豐富想象力的默認樣式和布局網格都不差,他們都是推ter 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文件。

如何簡單快速的修改Bootstrap

Fbootstrapp

記得我之前說過有些變更是有特定使用條件的?我當然不是玩笑的。Fbootstrapp已經完全重新開發用于兼容非死book的用戶界面元素。

為 什么要這么做呢?用他們自己的話說就是“Fbootstrapp是一套發起了非死book iFrame應用開發的工具包。它包括了基本的排版,表格,按鈕,表單,網格,導航和更多元素的CSS和HTML樣式,讓他們看起來和體驗起來都和典型的 非死book一樣”。

非死book的開發者們,注意,你們的工作開始變得簡單了。

如何簡單快速的修改Bootstrap

Jumpstart UI 管理模板

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

管理員UI圖標,小部件的樣式,基于jQuery的數據可視化插件還有更多其他的,被引入了干凈的,可自定制的,全響應布局中。

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

如何簡單快速的修改Bootstrap

BootMetro

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

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

如何簡單快速的修改Bootstrap

Bootstrap客制化工具

所以你想引導你的Bootstrap更好的達到你的UI需求,你要如何開始?你當然可以直接看代碼,我可以告訴你,這樣做是非常困難的。

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

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

StyleBootstrap

如果你忽略笨拙的界面,StyleBootStrap是款很強大的工具,用于編輯你可以在框架總見到的大多數默認UI元素。

如何簡單快速的修改Bootstrap

Bootstrap Magic

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

如何簡單快速的修改Bootstrap

插件  & 片段

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

Font Awesome

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

如何簡單快速的修改Bootstrap

Bootsnipp

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

如何簡單快速的修改Bootstrap

這并不是全部

推ter寵愛的模板越來越被廣泛適應,也許在自定義Bootstrap上有更多的方法,更多的信息,是我的列表乃至任何列表中都沒有的。畢竟,互聯網就是為此而存在的,對吧?

via Nelly@極客社區

來源:如何簡單快速的修改Bootstrap

 本文由用戶 jjfat 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!