CSS框架提供了設(shè)計一致解決方案的基本結(jié)構(gòu)，以解決前端web開發(fā)中的常見問題。它們提供了通用功能，可以針對特定場景和應(yīng)用程序進行覆蓋。這大大減少了開始創(chuàng)建應(yīng)用程序和網(wǎng)站所需的時間。

[[438860]]

Bootstrap

最流行的前端框架之一，當(dāng)然是Bootstrap。雖然它是為內(nèi)部團隊開發(fā)的一種工具，但一旦發(fā)布，它的采用率就大大提高了。它為常見的UI組件(如按鈕、排版、表單、下拉列表、警報、選項卡、旋轉(zhuǎn)木馬)以及可選的JavaScript擴展提供設(shè)計模板。

您可以使用Bootstrap輕松創(chuàng)建響應(yīng)性布局，Bootstrap 3通過其mobile first功能重點強調(diào)了這一點。通過引導(dǎo)在12列網(wǎng)格系統(tǒng)中組織元素的能力提供了跨設(shè)備的干凈、一致的設(shè)計。Bootstrap使用的樣式表較少，但也被移植到了Sass(作為一個單獨的存儲庫進行維護)，因此兩者的用戶都可以訪問內(nèi)容。

Foundation

Foundation是一個響應(yīng)前端框架，用于創(chuàng)建跨多個設(shè)備工作的站點的快速原型和生產(chǎn)代碼。Foundation是基于940px網(wǎng)格系統(tǒng)，而引導(dǎo)是基于1170px網(wǎng)格布局。

使用Foundation的優(yōu)點之一是能夠快速地原型原型，因為框架的裸骨結(jié)構(gòu)和提供的啟動模板，對于快速原型設(shè)計非常有用。

Skeleton

Skeleton是一個“簡單、快速響應(yīng)的樣板文件”。Skeleton非常適合較小的項目，或者如果輕量級是優(yōu)先考慮的話(它只有大約400行未壓縮的代碼)。樣式的設(shè)計更多的是作為一個起點，而不是作為一個UI框架。Skeleton由于其輕巧的特性，非常適合以移動為中心的設(shè)計。

對于初學(xué)者來說，Skeleton也是前端框架的一個很好的起點。它有簡潔的代碼和簡單的布局。

UI工具包

UI工具包元素易于定制和輕量級。它提供了快速構(gòu)建web界面的模板。除了包含所有HTML、CSS和JavaScript文件的安裝包之外，它還包含一個用于Sublime文本和Atom編輯器的自動完成包，這樣用戶就不必一次又一次地查找UI工具包類名和標(biāo)記。

基礎(chǔ)系統(tǒng)、引導(dǎo)程序和UI工具包之間的關(guān)鍵區(qū)別是網(wǎng)格系統(tǒng)。UI工具包不使用12列網(wǎng)格設(shè)置，而是將布局分解為三個組件，即網(wǎng)格、柔性和寬度。使用網(wǎng)格組件，可以根據(jù)需要創(chuàng)建任意數(shù)量的列。

除此之外，您可以為您的項目嘗試的其他框架包括：

• TukTuk-響應(yīng)靈敏，重量輕;面向?qū)ο蟮腃SS;用咖啡腳本寫的。
• 語義用戶界面-使用自然語言原則使代碼更具可讀性;較少的預(yù)處理器;響應(yīng)速度快，調(diào)試簡單。
• YAML-非常纖細的框架核心(5.9KB);Sass預(yù)處理器;防彈模塊;適用于IE6+。
• 960網(wǎng)格系統(tǒng)-流體和響應(yīng)性;12柱或16柱網(wǎng)格選項可用;適用于快速成型以及生產(chǎn)環(huán)境。

雖然前端框架現(xiàn)在在個人和專業(yè)項目中都得到了廣泛的應(yīng)用，但一些反對使用框架的觀點仍然存在。它們圍繞著編寫自己的設(shè)計網(wǎng)格而不是使用響應(yīng)框架，增加了加載時間，所有網(wǎng)站看起來都一樣，以及框架帶來的不必要的膨脹。

如前所述，它因案例和項目而異。如果它適合你的項目，沒有必要三思而后行?？蚣苡凶銐虻暮锰巵肀ＷC它們的使用。在為項目選擇正確的框架時，請考慮其中的一些要點。它是否有足夠的支持和更新來跟上?它是否適合您的項目規(guī)模和未來可能的擴展?