哪種響應(yīng)設(shè)計框架是最好的？當(dāng)然，這取決于杭州派迪科技的網(wǎng)頁制作水平

三年前，我為Smashing Magazine撰寫了一篇文章，“ 響應(yīng)式設(shè)計框架：僅僅因為可以，應(yīng)該嗎？

自那時以來，該行業(yè)以其典型的突飛猛進(jìn)的速度發(fā)展。Sass是CSS預(yù)處理器，已成為大多數(shù)工作流程的標(biāo)準(zhǔn)。我們更習(xí)慣于調(diào)整Sass變量以自定義現(xiàn)有代碼。我們放心地使用mixin，建立自己的風(fēng)格。我們甚至擁有用于生成配色方案的Sass公式，可以將其納入我們的工作中。

通過使用諸如Node.js，Bower，Grunt，Gulp，Git等技術(shù)，工作流本身已成為標(biāo)準(zhǔn)。舊的瀏覽器繼續(xù)消失，使前端開發(fā)人員可以放心地使用HTML5和CSS3的更多功能，而不必?fù)?dān)心重大的跨瀏覽器兼容性問題。

回顧我2014年的文章中的131條評論時，我看到讀者提出了許多使用響應(yīng)式設(shè)計框架的方法：

• 有些人建議將框架的一部分與您自己的自定義代碼一起使用。
• 一些開發(fā)人員插入了自己的框架，這些框架是從頭開始編寫的，或者是從另一個框架派生的代碼。
• 幾個開發(fā)人員提出了我未涵蓋的框架，包括Susy，Singularity，Breakpoint，UIkit，Pattern Lab，Toolkit，Pure，Cardinal，Skeleton，ResponsiveBP等。

所有這些都是合法的方法。數(shù)以百計的框架可用。無論是已經(jīng)建立的框架還是他們創(chuàng)建的框架，許多從事該業(yè)務(wù)已有一段時間的人都非常喜歡。

但是，越來越多地，我看到學(xué)生，客戶和Web開發(fā)公司默認(rèn)將Bootstrap作為其起點，并且通常很少對其是否是當(dāng)前任務(wù)的合適解決方案進(jìn)行嚴(yán)格的評估。例如，客戶雇用我來進(jìn)行Bootstrap培訓(xùn)，然后詢問他們?nèi)绾翁砑覨oundation固有的功能。當(dāng)我問“為什么不使用Foundation？”時，他們告訴我他們從未聽說過它，并且不知道Bootstrap之外的響應(yīng)設(shè)計還有其他選擇。

我無法回顧數(shù)十個（即使不是數(shù)百個）響應(yīng)式設(shè)計框架。但是，鑒于Bootstrap是響應(yīng)式設(shè)計的500磅重的大猩猩，因此與Bootstrap相比，我選擇了另外兩個框架進(jìn)行評估：Foundation和GetUIkit。我根據(jù)它們共有的特征選擇了這三個框架，因為它們是全方位服務(wù)的響應(yīng)式設(shè)計框架。他們提供網(wǎng)格系統(tǒng)，具有自定義功能的一堆變量和mixins的SCSS，幾乎所有HTML5標(biāo)簽的基本樣式，預(yù)樣式化的組件（如徽章，標(biāo)簽和卡片）以及一堆基于JavaScript的功能（如下拉菜單，手風(fēng)琴，標(biāo)簽，圖像）畫廊，圖像輪播等等。所有這三個框架都提供了將文件大小減小為僅在給定網(wǎng)站上工作所需的樣式和功能的方法。他們都在積極發(fā)展。

同樣，我并不是在建議這些是唯一的響應(yīng)式設(shè)計框架，也不是在暗示它們是最好的框架。但是，這些框架是流行的框架，具有大量現(xiàn)成的功能，這使它們對于希望與“ Bootstrap或近似的同類產(chǎn)品”合作的許多開發(fā)公司具有吸引力。

背景資料

為了開始討論，讓我們檢查每個框架的一些基本背景功能。

正如人們所期望的那樣，每個框架都帶有一個網(wǎng)格系統(tǒng)。Bootstrap和Foundation的網(wǎng)格系統(tǒng)包括多個斷點，嵌套網(wǎng)格，偏移量和源順序（即，折疊時更改內(nèi)容的順序）。確切的斷點值會有所不同，但是斷點通?？梢允褂肧CSS進(jìn)行自定義。UIkit的網(wǎng)格完全不同，下面將進(jìn)行介紹。

在最新的alpha 6版本中，Bootstrap默認(rèn)情況下具有基于Flexbox的網(wǎng)格系統(tǒng)。（這部分是其Internet Explorer 10+支持瀏覽器的原因。）默認(rèn)情況下，F(xiàn)oundation具有浮動網(wǎng)格系統(tǒng)（在某種程度上，其Internet Explorer 9+支持對其有所幫助）。（可選）在Foundation中，可以通過切換適當(dāng)?shù)腟ass變量并重新編譯為CSS來編譯基于flexbox的網(wǎng)格系統(tǒng)。Foundation指出Internet Explorer 9不支持flexbox，因此如果這是您的目標(biāo)瀏覽器，請記住這一點。

與Bootstrap相比，F(xiàn)oundation提供了更多的網(wǎng)格功能，包括居中的列，不完整的行，響應(yīng)式裝訂線，語義網(wǎng)格選項和流暢的行。

當(dāng)使用基于浮點的網(wǎng)格系統(tǒng)時，等高列是一個常見問題。Foundation包含一個名為Equalizer的JavaScript組件。因為UIkit和Bootstrap基于flexbox而不是浮點數(shù)，所以等高列內(nèi)置在網(wǎng)格系統(tǒng)中，永遠(yuǎn)不會成為問題。

UIkit的網(wǎng)格與Foundation和Bootstrap完全不同。UIkit而不是標(biāo)準(zhǔn)的12列系統(tǒng)，而是將其布局分為三個部分：網(wǎng)格，伸縮和寬度。從grid組件開始，您可以創(chuàng)建任意多的列：

要創(chuàng)建網(wǎng)格容器，請將uk-grid屬性添加到<div>元素。無需添加類。添加子<div>元素以創(chuàng)建單元格。默認(rèn)情況下，所有網(wǎng)格單元都是堆疊的。要將它們并排放置，請從Width組件中添加一個類。uk-child-width-expand不論有多少，使用都會自動將相等的寬度應(yīng)用于項目。

如文檔中所隱含的那樣，在某些布局中，網(wǎng)格會設(shè)置可能彼此相鄰的框，而width確定這些框的寬度，而flex使用flexbox屬性確定每個框內(nèi)的布局。最后，與其他網(wǎng)格系統(tǒng)不同，UIkit在網(wǎng)格列之間提供了邊界。

CSS和默認(rèn)樣式

這三個框架都帶有某種程度的CSS樣式。可以通過覆蓋樣式表或修改提供的SCSS或LESS預(yù)處理器文件來更改樣式。一般來說，為所有或幾乎所有HTML5元素都提供了基本樣式。所有框架都提供了一些實用程序類，通常用于打印，響應(yīng)性和元素的可見性。Foundation和UIkit為從該方向編寫的語言提供了從右到左的支持。UIkit聲明它將具有RTL版本，并具有使用自定義前綴編譯UIkit的選項。

從其文檔中尚不清楚Bootstrap 4是否提供RTL支持，但是在以前的版本中已經(jīng)可用。看來這可能是將來穩(wěn)定發(fā)行版的一部分。在Bootstrap社區(qū)中包含此功能引起了很多興趣。

現(xiàn)成的樣式最少的框架是Foundation。長期以來，該框架一直假設(shè)其用戶是更高級的開發(fā)人員，他們希望為其項目編寫自己的樣式。因此，ZURB始終通過設(shè)計提供較少的開箱即用樣式，這意味著以后將要覆蓋的樣式將更少。

UIkit提供了兩種顏色選項，可通過Inverse組件進(jìn)行訪問。它們包括標(biāo)準(zhǔn)方案（淺色背景和深色文本）和對比方案（深色背景和淺色文本）。UIkit還提供了一些獨特的樣式化組件，例如文章和評論，以及占位符，該占位符為拖放式文件上傳界面提供了一個空白空間。如果您回想起YOOtheme的WordPress和Joomla主題化根源，那么這些功能很有意義。Bootstrap和Foundation都不包含特定于內(nèi)容管理系統(tǒng)的樣式，因此，這是框架的顯著特征。

Bootstrap提供的功能遠(yuǎn)不止Foundation。確實，Bootstrap的獨特外觀已經(jīng)滲透到網(wǎng)站上了好幾年了。Bootstrap 4的外觀與Bootstrap 3相似。Bootstrap仍然提供幾種顏色，例如“警告”，“危險”，“主要”，“信息”和“成功”，并且在樣式某些HTML元素時通常提供一些變體。 ，例如表格和表格。

還值得比較每個框架中的CSS單元。Bootstrap 4始終使用rem作為其主要CSS單元。但是，它指出：“像素仍然用于媒體查詢和網(wǎng)格行為，因為視口不受類型大小的影響?！?Bootstrap還將其基本字體大小從版本3的14像素增加到版本4的16像素。

基金會說：“我們幾乎在基金會的任何地方都使用rem單元，甚至編寫了Sass函數(shù)來使它更容易一些。該rem-calc()函數(shù)可以獲取一個或多個像素值，并將其轉(zhuǎn)換為適當(dāng)?shù)膔em值。”

最后，UIkit似乎使用像素作為主要尺寸單位，盡管偶爾會在其LESS文件中的某些地方使用百分比和rems。其CSS尺寸原理未在其文檔中解決。

導(dǎo)航和導(dǎo)航元素

這三個框架都附帶了響應(yīng)式導(dǎo)航元素。它們都包含一些相當(dāng)通用的導(dǎo)航組件，例如格式化的面包屑，標(biāo)簽，手風(fēng)琴和分頁。這些之間有一些細(xì)微的差異，但它們通常都能按預(yù)期工作。

所有這三個框架都帶有下拉菜單。通常，這些下拉菜單可用于多種情況：標(biāo)準(zhǔn)的響應(yīng)式導(dǎo)航欄，選項卡，按鈕等。所有三個下拉菜單均包括垂直下拉菜單。Foundation和UIkit還包括水平下拉列表，其中下拉列表顯示為行而不是列。

導(dǎo)航欄存在于所有三個框架中。每個導(dǎo)航欄都可以容納網(wǎng)站品牌和搜索，并可以使其具有粘性，并且元素可以在欄中向左或向右對齊。所有導(dǎo)航欄都折疊，但是它們可能以不同的方式顯示折疊的內(nèi)容（有些通過漢堡包按鈕加一個下拉菜單，有些通過畫布之外的菜單顯示）。導(dǎo)航欄之間也有一些區(qū)別。

Bootstrap提供了一些基本的水平和垂直導(dǎo)航欄，這些導(dǎo)航欄具有不同的樣式選項（標(biāo)簽，藥片，堆疊的藥片，合理的樣式或普通樣式）。它提供了一個單獨的水平響應(yīng)導(dǎo)航欄，該導(dǎo)航欄在折疊時會創(chuàng)建一個漢堡包按鈕。有兩種配色方案，可以通過SCSS自定義顏色和斷點。

Foundation在與Bootstrap類似的早期版本中具有響應(yīng)式導(dǎo)航欄。在版本6中，它已將幾種導(dǎo)航欄處理變成可以組合的單個元素。例如，在折疊時，導(dǎo)航可能會隱藏在漢堡包按鈕后面，非畫布處理之后或向下鉆取菜單之后，在其中用戶加載菜單項的屏幕。可以在特定的屏幕尺寸下更改這些類型的導(dǎo)航處理。例如，完整的導(dǎo)航欄可能在桌面尺寸上可用，但切換到針對移動設(shè)備的向下鉆取。

UIkit的欄提供的功能類似于Bootstrap的功能。默認(rèn)情況下，它沒有內(nèi)置的切換開關(guān)，但是可以通過適當(dāng)?shù)腃SS類和JavaScript輕松添加。折疊的內(nèi)容通常位于漢堡按鈕的后面，并且可能與畫布功能無關(guān)。UIkit還專門提供了基于圖標(biāo)的導(dǎo)航欄（iconbar）。它附帶了26個SVG圖標(biāo)，可以將其集成在此欄中，并有望在將來提供更多圖標(biāo)。

JavaScript組件

這三個框架的基于JavaScript的組件均依賴jQuery。Foundation和UIkit附帶了jQuery副本，而Bootstrap依賴于通過CDN或下載連接到j(luò)Query。

這三個框架都包含相似的功能類型：工具提示，模式窗口，手風(fēng)琴，選項卡，下拉菜單，圖像輪播等。

Foundation有兩個方便的組件使它與眾不同。一個就是Abide，它是功能齊全的HTML5表單驗證庫。它可以處理表單的客戶端錯誤檢查。另一個是Interchange，一個基于JavaScript的響應(yīng)式圖像加載器。它與圖像以及部分HTML和文本兼容。它根據(jù)媒體查詢將適當(dāng)?shù)膬?nèi)容加載到頁面上。盡管響應(yīng)式設(shè)計的定義特征之一是調(diào)整大小的圖像，但是Bootstrap和UIkit都沒有提供類似的功能。

UIkit在其文檔中將其樣式和JavaScript組件結(jié)合在一起，都稱為“組件”。目前在其Beta版中可用的一些基于JavaScript的獨特組件包括Scroll（可平滑滾動到網(wǎng)頁的其他部分）和Sortable，這將在頁面上啟用拖放網(wǎng)格。

在UIkit的未來版本中，我們將向UIkit 2提供許多組件，包括“ Slideshow，Slider，Slideset，Parallax，Nestable，Lightbox，Dynamic Grid，HTML編輯器，Date和Timepicker組件。”值得強(qiáng)調(diào)的是HTML Editor和日期和時間選擇器組件，因為它們通常用于管理界面和應(yīng)用程序中。請記住，YOOtheme會在其業(yè)務(wù)中創(chuàng)建Joomla和WordPress主題，因此這些是其重要組成部分。Foundation和Bootstrap都不包含這些易于管理的小部件，因此，這是此框架的顯著特征。

但是，UIkit最具特色的JavaScript功能之一是：

UIkit正在偵聽DOM操作，并且會在將組件插入DOM或從DOM中刪除時自動初始化，連接和斷開組件。這樣，它可以輕松地與Vue.js和React之類的JavaScript框架一起使用。

那么，哪個最好？

這取決于！這三個項目都得到了積極維護(hù)，并致力于追隨者。最后，適合您的框架將取決于項目的要求，需要編程的幫助（使其變得漂亮嗎？編碼功能？）和您的個人編碼理念（Rems與像素，LESS與Sass？）。與所有技術(shù)一樣，沒有完美的選擇，您將不得不在功能，功能和代碼樣式上做出讓步。

考慮到這一點，在決策時需要權(quán)衡以下幾點。

• 瀏覽器支持。此處介紹的框架版本支持類似的瀏覽器。但是，返回一個框架版本，或遵循有關(guān)合并polyfill的說明，可能會增加對重要瀏覽器的支持。特別是，如果需要Internet Explorer 8支持，則可能需要查看Bootstrap 3。
• CSS單位差異。Foundation幾乎將其所有單位都保留在Ems和Rems中。Bootstrap主要使用em和rems，帶有用于媒體查詢的像素。UIkit主要使用像素測量。一些開發(fā)人員對這些方法有很強(qiáng)的見解，可能會基于它們選擇一個框架。
• 樣式數(shù)量。UIkit具有許多現(xiàn)成的樣式。基金會少得多。引導(dǎo)程序介于兩者之間。您需要覆蓋多少樣式？您想已經(jīng)展示多少款式？您只想寫很少還是什么都不寫？
• CSS預(yù)處理程序。基礎(chǔ)是用SCSS原生編寫的。Bootstrap在版本3中有一個從LESS到SCSS的端口，然后在版本4中重寫了它的SCSS。UIkit在beta中仍可以在LESS中工作，但是它將在將來的版本中提供SCSS端口。這也可能會影響您對框架的選擇。
• 工作流程。如果您希望修改SCSS文件，請知道Foundation會將您鎖定在相當(dāng)嚴(yán)格的工作流程中。Bootstrap和UIkit提供了工作流程，但是您可以選擇其他工作流程或根本不選擇任何工作流程。
• JavaScript組件。Foundation提供表單驗證和響應(yīng)式內(nèi)容管理。UIkit是專門為與反應(yīng)式JavaScript框架一起使用而構(gòu)建的，它包括用于構(gòu)建管理界面的組件。根據(jù)您所需的組件，這可能會影響您的決定。
• 網(wǎng)格差異。Bootstrap和Foundation提供12列網(wǎng)格。UIkit提供了非常不同的網(wǎng)格布局方法，其樣式也非常不同。使用SCSS可以輕松地將Foundation的網(wǎng)格修改為更多或更少的列，也可以使其具有語義。UIkit和Bootstrap的網(wǎng)格默認(rèn)情況下是基于flexbox的，而Foundation的網(wǎng)格則是基于float的，但是可以通過SCSS轉(zhuǎn)換為flexbox。