在過去幾年中，最終用戶的瀏覽習慣已經發展到包括各種設備。因此，響應式網頁設計是當今開發的每個網站的必需品。但是，為每個項目從頭開始創建響應式設計可能非常耗時。讓您的生活更輕鬆的一個很好的解決方案是使用CSS框架。這樣的框架為您提供基本的響應式設計原則。在這個比較中，我們看看一些最好的CSS框架，看看哪個是最好的。這是Bootstrap vs Foundation vs Bulma vs Semantic vs UIkit。
本文將指導您為下一個項目選擇合適的CSS框架。我假設您具有前端技術和響應式Web設計原則的基本知識。每個CSS框架都經過測試，涵蓋了Bootstrap vs Foundation和Bulma vs Semantic vs UIkit的各個方面。我介紹了每個框架的起源及其主要特徵。我還為您提供了每個框架的快速入門指南。
在本文的最後，您將了解每個框架的主要功能和限制，並能夠更好地確定哪些框架最適合您的需求。讓我們開始吧：
- 引導＃
- 基礎＃
- 布爾瑪＃
- 語義＃
- UIkit＃
- 最後的想法 ＃
Bootstrap（getbootstrap.com） 
Bootstrap是一個響應迅速，移動優先的CSS框架，可以快速開發網站。它是這個列表中最受歡迎的CSS框架，在GitHub上有超過130k的星星。 Bootstrap包含使用HTML，CSS和JavaScript開發的即用型組件。
Bootstrap最初是在2011年在Twitter上開發的，但它最終演變成一個獨立的項目。目前的穩定版本是4.3。 Bootstrap 5，目前正在開發中，將取代jQuery與vanilla JS的使用，支持過時的瀏覽器並更改當前的測試平台。
要使用Bootstrap，您必須在構建新網頁時執行以下操作：
- 使用HTML5 doctype
- 創建視口元標記
- 在head標籤中導入Bootstrap CSS
- 按jQuery，Popper.js和bootstrap.min.js的順序導入腳本以使用任何Bootstrap的JavaScript功能
這是一個入門模板。
… … …
在本教程中，我們將使用CDN託管的資源版本（CSS和JS文件）來構建這些框架。這是Bootstrap的快速入門指南。
除了強大的移動優先方法之外，還有重要的社區支持，這些支持符合框架的成熟度。此外，雖然Bootstrap維護了一個已批准的框架和工具包列表供您選擇，但第三方開發人員還提供了Bootstrap的工具包和軟體包，可以輕鬆地與您的項目集成。這是我們為Bootstrap選擇的免費UI工具包。除了首先是移動之外，還有一些支持觸摸屏。由於Bootstrap是一個成熟的項目，它支持許多輔助功能。
Bootstrap的最大缺點是頁面重量的增加。雖然在平均頁面大小約為2MB的世界中，幾百千位元組可能並不重要，但它可能會關注那些追求最高效率的開發人員。對jQuery的依賴是一個問題，儘管知道jQuery的刪除是Bootstrap 5路線圖的一部分是令人鼓舞的。
?優點：
- 移動優先，響應式網頁設計框架
- 良好的社區支持和文檔
?缺點：
- 大的依賴大小（~300KB）
- 依賴於jQuery以使某些組件工作
如果您正在尋找具有良好支持基礎的穩定平台，Bootstrap應該是您的首選。如果您不希望修改默認組件，這是正確的選擇。 Bootstrap非常適合那些希望在敏捷環境中快速迭代解決方案的用戶。
基金會（foundation.zurb.com） 
Foundation是2011年Bootstrap一個月內首次發布的，它不僅適用於網站，還適用於應用程序和電子郵件，是一類前端框架！讓我們看看Bootstrap與Foundation如何疊加！
就像Twitter上的Bootstrap一樣，Foundation在Zurb基金會作為內部工具開始，然後最終作為框架發布。 Foundation的源代碼是開源的，重點是移動優先響應式設計。 Foundation有一個類似於Bootstrap的網格系統，有12列可供選擇。此外，JavaScript也是可選的！
在您的網站上使用Foundation的主要步驟如下：
- 下載Foundation資源
- 使用HTML5 doctype
- 在head標記中添加Foundation CSS文件
- 包括jQuery，what-input.js和Foundation的腳本
- 在結束body標記之前，調用foundation（）函數將Foundation屬性附加到各種DOM元素
這是一個快速啟動模板：
… …
如果適合您的需要，您可以下載Foundation框架的自定義版本。
當我們嘗試比較Bootstrap與Foundation時，會出現一些問題。 Bootstrap提供了來自社區的更多支持，更容易使用，並且在開始時為您提供了廣泛的主題供您選擇。另一方面，Foundation為您提供了對組件的更多控制和自由，而無需向DOM元素添加類 – 因為屬性與組件相關聯。此外，由於Foundation已經開發了幾年，它提供了許多輔助功能。
?優點：
- 移動優先，響應式網頁設計框架
- 為應用程序和電子郵件提供支持
?缺點：
- 大型依賴大小，如Bootstrap
- 大量的功能可能會壓倒初學者
Bootstrap與Foundation之間的功能沒有太大變化，選擇任何一個平台時都不會失去太多。話雖這麼說，如果你想要更多地控制你的項目，你應該和基金會一起去。
布爾瑪（bulma.io） 
Bulma是一個基於Flexbox的開源輕量級CSS框架。
雖然不是Bootstrap的水平，Bulma是GitHub上一個相當受歡迎的項目，擁有超過35,000顆星。
Bulma旨在提供移動優先的響應式框架，並進一步關注模塊化。
要在項目中使用Bulma，您必須執行以下步驟：
- 添加HTML5文檔類型
- 為響應式視口添加元標記
- 在頭標記中包含Bulma CSS文件
- （可選）添加fontawesome腳本以使用圖標
這是一個模板：
… …
回到關於Bootstrap vs Foundation vs Bulma的辯論，Bulma有一個更溫和的學習曲線。 Bulma與Bootstrap和Foundation之間的顯著差異是CSS的唯一關注點，框架中沒有任何JavaScript元素。 JavaScript的排除使框架也變得輕量級。在可訪問性方面，Bulma只是部分可訪問，儘管社區正在定期添加支持。
?優點：
- 輕量級，基於flexbox的框架
- 模塊化元件可實現靈活性
?缺點：
- 沒有JavaScript元素
- 對可訪問性的有限支持
作為開發人員，如果您希望使用可幫助您為Web創建響應元素的輕量級框架，則應選擇Bulma。如果您遇到困難，該框架可以為您提供相當大的支持。
語義（semantic-ui.com） 
Semantic是一個CSS框架，旨在創建直觀的用戶界面。
該框架使用明顯的類名來幫助簡化學習過程。 Semantic中的類受英語語言的啟發，將邏輯概念與類名聯繫起來。
要在項目中使用語義組件，您需要完成以下步驟：
- 包括HTML5文檔類型
- 載入語義CSS文件
- 在調用任何JavaScript元素之前包含jQuery
- 包括Semantic的腳本
這是一個模板：
… …
為了比較Semantic與Bootstrap vs Foundation以及其他，你會注意到儘管有直觀的命名約定，Semantic在學習的複雜性方面也不盡如人意。文檔很廣泛，但需要一些時間來習慣。與Angular和React等JavaScript框架集成很好，這使得它非常適合在涉及使用這些框架的應用程序中使用。
?優點：
- 直觀的類名
- 與JavaScript框架集成
?缺點：
- 可能無法滿足大型項目的需要
- 社區的有限支持
語義是一個相對容易學習的框架，也支持JavaScript框架。如果您的要求涉及使用JavaScript，那麼您應該考慮在下一個項目中使用此框架。
UIkit（getuikit.com） 
UIkit是一個現代的輕量級框架，非常強調模塊化以創建Web界面。
它是一個相對較新的開源框架，在GitHub上有大約15k的星星。 UIkit可幫助您創建響應式設計，並在BrowserStack上自動連續部署。
要在項目中使用UIkit組件，您需要完成以下步驟：
- 包括HTML5文檔類型
- 載入UIkit CSS文件
- 包含UIkit的功能和圖標腳本
這是一個模板：
… …
如果我們將它與Bootstrap vs Foundation和Bulma進行比較，那麼UIkit有很多功能。儘管有JavaScript元素，但UIkit並不依賴於jQuery，這使得最終用戶的負載更小。對於在敏捷開發環境中快速迭代Web應用程序的版本，它肯定與這些框架並駕齊驅。
?優點：
- 專註於模塊化，使其易於使用
- 元素是可定製的，從而帶來靈活性
?缺點：
- 有限的文檔和社區支持
雖然UIkit在控制結構和功能方面給你很多自由，但它是相當新的，如果你遇到框架問題，這會導致在線支持有限。因此，只有當您的前端編程技能足夠先進時，才應該在項目中考慮此框架。
轉到頂部Bootstrap vs Foundation vs Bulma vs Semantic vs UIkit：最後的想法
總結一下我們在頂級CSS框架的比較中所討論的內容：
- 如果你想要一個有很多支持的無障礙解決方案，請選擇Bootstrap
- 要獲得組件的更多自由，請嘗試使用Foundation
- 為了確保項目的輕量級添加，請嘗試使用Bulma或UIkit
- 如果您的Web應用程序使用繁重的JavaScript框架，則應選擇Semantic
你在2019年使用哪個CSS框架？請在下面的評論中告訴我們！
…
不要忘記加入我們的速成課程，以加快您的WordPress網站。通過一些簡單的修復，您可以將載入時間減少50-80％：
Karol K的布局，演示和編輯。